react.md

id
react

Quick start with React

Give a proper backend to your React app.

:::warning

This quick start guide focuses exclusively on the frontend. To ensure the functionality of this code, your Manifest backend must be up and running at http://localhost:1111.

:::

1. Create a React app

If you already have a React app, you can skip this step.

There are several ways to do that. We will use the easiest one: create-react-app. You can replace my-client by the name of your front-end app.

npx create-react-app my-client
cd my-client
npm start

2. Install Manifest SDK

Install the JS SDK from the root of your React app.

npm i @mnfst/sdk

3. Use it in your app

In that example we are using a Cat entity created previously. Replace it by your own entity. This example uses TypeScript, you can remove the typing to have plain JS.

import Manifest from '@mnfst/sdk';
import { useEffect, useState } from "react";

function App() {
  interface Cat {
    id: number;
    name: string;
  }

  const [cats, setCat] = useState<Cat[]>([]);

  useEffect(() => {
    // Init SDK.
    const manifest = new Manifest();

    // Fetch the list of Cats.
    manifest.from("cats")
      .find<Cat>()
      .then((res) => {
        setCat(res.data);
      });
  }, []);

  // Display a list of Cats.
  return (
    <ul>
      {cats.map((cat) => (
        <li>{cat.name}</li>
      ))}
    </ul>
  );
}

export default App;

Checkout the SDK doc to see more usages of the SDK: CRUD operations, file upload, authentication,