Introduction

This is a step-by-step tutorial to create a website similar to Hacker News using Tribe react sdk. Live preview of the end result is available.

1. Create a community#

In this tutorial we will use ReactSDK Tutorial community. If you want to use your own community, you can create one on Tribe.

2. 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.

3. Install tailwindcss#

For this tutorial we will use tailwindcss to style out components. You can install tailwindcss to your React app. In order to add the HackerNews colors to the theme, we update the tailwind.config.js.

"tailwind.config.js

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {
            colors: {
                'hacker-header': '#ff6600',
                'hacker-body': '#f6f6ef',
            }
        }
    },
    plugins: [],
}

4. Set up router#

We use React Router to set up the routing.

5. 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-router-dom": "6",
    "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"
    ]
  }
}

6. 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 {BrowserRouter} from "react-router-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',
            networkDomain: 'react-sdk-tutorial.tribeplatform.com',
        }}>
            <BrowserRouter basename="/react-sdk-tutorial">
                <App/>
            </BrowserRouter>
        </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.