Easy backend for React

How do you set up an easy backend for React? In this example we'll create a simple React app front-end with a Node.js codehooks.io backend API and database. The main objective of this example is to learn how to use codehooks.io as an API backend for your React app.

This article is also available in the Codehooks.io docs.

The output of the React example app is shown in the screen shot below. The "Hello React world!" text and the visitor count is fetched by calling the backend REST API:

Read on to learn how to create a simple React app front-end and backend application.

Create the React example app

We'll be using the standard create-react-app to kick-start our React example app development.

Run the following commands from your command line:

npx create-react-app react-backend-example

cd react-backend-example

You can also clone the GitHub repo git clone https://github.com/RestDB/codehooks-io-examples.git

The boilerplate React example app is now generated in your application directory.

Then open the src/App.js file in your favorite code editor (some prefer VS Code and others like Vim 🥔 🍅) and replace the default generated code with the React code example shown below. If you read the code comments you'll get a pretty good idea of what's going on.

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

// React backend API endpoint and API token
const API_ENDPOINT = 'https://reactback-nyly.api.codehooks.io/dev/hello';
const API_KEY = 'a4679c85-b4c8-49fb-b8ac-63230b269dd7';

function App() {
  // Application state variables
  const [visits, setVisits] = useState(null);
  const [message, setMessage] = useState(null);

  useEffect(()=>{
    // Call Codehooks backend API
    const fetchData = async () => {
      const response = await fetch(API_ENDPOINT, {
        method: "GET",
        headers: { "x-apikey": API_KEY }
      });
      const data = await response.json();
      // Change application state and reload
      setMessage(data.message);
      setVisits(data.visits);
    }
    fetchData();
  },[])

  return (
    <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>
            React backend with Codehooks.io
          </h2>
          <h2 style={{height: '50px'}} className="heading">
            {message || ''}
          </h2> 
          <p>
            Visitors: {visits || '---'}
          </p>          
        </header>
      </div>
  );
}

export default App;

The React app is almost ready, we just have to create the backend API and database that serve the content of the message and visits variables.

Create the React backend API

The React backend JavaScript example code is located in the index.js file in the reactback directory. The complete code (14 lines and zero config) for the backend API and database is shown below:

// React backend example app
import { app, Datastore } from 'codehooks-js'

// REST API
app.get('/hello', async (req, res