Introduction

This is a step-by-step tutorial to create a website similar to Hacker News using Tribe react sdk.

1. Create a community#

If you don't have a community yet, you should create one on Tribe. In this tutorial we will use ReactSDK Tutorial community.

2. Generate an access token#

First you need to generate an access token for the logged in member or guest. You can generate it directly using our GraphQL API or JavaScript SDK. You will then need to provide this token to use React SDK. You can simply generate a guest token for ReactSDK Tutorial community and continue this tutorial. You will be able to use the data already in the community, but some parts of this tutorial (e.g. posting news) requires logged-in token.

3. Create a react project#

You can follow Create React App to create a new React project with typescript. Alternatively, if you already have a React project you can add Tribe ReactSDK on top of it.

4. Install the React SDK#

You can simply install Tribe React SDK using the following yarn command:

yarn add @tribeplatform/react-sdk @tribeplatform/gql-client

note

We have to install @tribeplatform/gql-client because we will use it in this tutorial.

After installing your package.json should look similar to this.

package.json

{
  "name": "react-sdk-tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@tribeplatform/gql-client": "^1.0.4",
    "@tribeplatform/react-sdk": "^2.0.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

5. Inject Tribe React provider#

Wrap your App by TribeProvider. Here is how index.tsx should look like.

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider as TribeProvider} from '@tribeplatform/react-sdk'

ReactDOM.render(
    <React.StrictMode>
        <TribeProvider config={{
            baseUrl: 'https://app.tribe.so/graphql',
            accessToken: '{yourAccessToken}',
        }}>
            <App/>
        </TribeProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Now you have set up the project with Tribe ReactSDK, and it's ready to use.