Introduction

This is a step-by-step tutorial to create a website similar to Hacker News using Bettermode 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 Bettermode.

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 Bettermode 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 Bettermode 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 Bettermode React provider

Wrap your App by BettermodeProvider. 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 BettermodeProvider} from '@tribeplatform/react-sdk'

ReactDOM.render(
    <React.StrictMode>
        <BettermodeProvider config={{
            baseUrl: 'https://api.bettermode.com',
            networkDomain: 'react-sdk-tutorial.tribeplatform.com',
        }}>
            <BrowserRouter basename="/react-sdk-tutorial">
                <App/>
            </BrowserRouter>
        </BettermodeProvider>
    </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();

info

If your community is hosted on a region other than the US region (us-east-1), you should use a different GraphQL URL (baseUrl) as stated here under the GraphQL Endpoint section.

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