跳到主要内容

Getting Started with React

🧹 Removing integration guides

The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.

As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be replaced by a React (and possibly Next.js) integration guide. This will be the only official integration guide that the Strapi Documentation team will maintain.

You will find other integration guides on Strapi's integrations page when it's done.

This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

If you haven't gone through the Quick Start Guide, the way you request a Strapi API with React remains the same except that you will not fetch the same content.

Create a React app​

Create a basic React application using create-react-app.

yarn create react-app react-app

Use an HTTP client​

Many HTTP clients are available but in this documentation there are examples using Axios and Fetch.

To install Axios:

yarn add axios

There is no installation required for Fetch.

GET Request your collection type​

Execute a GET request on the restaurant collection type in order to fetch all your restaurants.

Be sure that you activated the find permission for the restaurant collection type

Example GET request with axios
import axios from "axios";

axios.get("http://localhost:1337/api/restaurants").then((response) => {
  console.log(response);
});
Example response
{
  "data": [
    {
      "id": 2,
      "documentId": "na8ce9ltc0y99syjbs3vbigx",
      "Name": "Biscotte Restaurant",
      "Description": [
        {
          "type": "paragraph",
          "children": [
            {
              "type": "text",
              "text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
            }
          ]
        }
      ],
      "createdAt": "2024-08-09T08:59:05.114Z",
      "updatedAt": "2024-08-09T08:59:06.341Z",
      "publishedAt": "2024-08-09T08:59:06.344Z",
      "locale": "en"
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

Example​

./src/App.js

import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {
  const [error, setError] = useState(null);
  const [restaurants, setRestaurants] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:1337/api/restaurants")
      .then(({ data }) => setRestaurants(data.data))
      .catch((error) => setError(error));
  }, []);

  if (error) {
    // Print errors if any
    return <div>An error occured: {error.message}</div>;
  }

  return (
    <div className="App">
      <ul>
        {restaurants.map(({ id, attributes }) => (
          <li key={id}>{attributes.Name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

POST Request your collection type​

Execute a POST request on the restaurant collection type in order to create a restaurant.

Be sure that you activated the create permission for the restaurant collection type and the find permission fot the category Collection type.

In this example a japanese category has been created which has the id: 3.

Example POST request with axios
import axios from "axios";

axios
  .post("http://localhost:1337/api/restaurants", {
    data: {
      "Name": "Dolemon Sushi",
      "Description": [
        {
          "type": "paragraph",
          "children": [
            {
              "type": "text",
              "text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
            }
          ]
        }
      ],
      categories: [3],
    },
  })
  .then((response) => {
    console.log(response);
  });
Example response
{
  "data": {
    "id": 3,
    "documentId": "jm8rm7jl9ncalk12lkc4bhcx"
    "name": "Dolemon Sushi",
    "description": [ 
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
          }
        ]
      }
    ],
    "createdAt": "2024-03-02T21:40:39.185Z",
    "updatedAt": "2024-03-02T21:40:39.185Z",
    "publishedAt": "2024-03-02T21:40:39.118Z",
    "locale": "en"
  },
  "meta": {}
}

Example​

./src/App.js

import axios from "axios";
import { useCallback, useEffect, useState, useId } from "react";

const Checkbox = ({ name, isChecked, onAddCategory, onRemoveCategory }) => {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>{name}</label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={isChecked ? onRemoveCategory : onAddCategory}
        name="categories"
        id={id}
      />
    </div>
  );
};

const App = () => {
  const [allCategories, setAllCategories] = useState([]);
  const [error, setError] = useState(null);
  const [modifiedData, setModifiedData] = useState({
    categories: [],
    description: "",
    name: "",
  });

  const handleInputChange = useCallback(({ target: { name, value } }) => {
    setModifiedData((prevData) => ({ ...prevData, [name]: value }));
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();

    await axios
      .post("http://localhost:1337/api/restaurants", { data: modifiedData })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        setError(error);
      });
  };

  useEffect(() => {
    axios
      .get("http://localhost:1337/api/categories")
      .then(({ data }) => {
        setAllCategories(data.data);
        console.log(data.data);
      })
      .catch((error) => setError(error));
  }, []);

  if (error) {
    // Print errors if any
    return <div>An error occured: {error.message}</div>;
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <h3>Restaurants</h3>
        <br />
        <label>
          Name:
          <input
            type="text"
            name="name"
            onChange={handleInputChange}
            value={modifiedData.name}
          />
        </label>
        <label>
          Description:
          <input
            type="text"
            name="description"
            onChange={handleInputChange}
            value={modifiedData.description}
          />
        </label>
        <div>
          <br />
          <b>Select categories</b>
          {allCategories.map(({ id, attributes }) => (
            <Checkbox
              key={id}
              name={attributes.Name}
              isChecked={modifiedData.categories.includes(id)}
              onAddCategory={() => {
                const nextData = {
                  ...modifiedData,
                  categories: [...modifiedData.categories, id],
                };
                setModifiedData(nextData);
              }}
              onRemoveCategory={() => {
                const nextData = {
                  ...modifiedData,
                  categories: modifiedData.categories.filter(
                    (catId) => catId !== id
                  ),
                };
                setModifiedData(nextData);
              }}
            />
          ))}
        </div>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

PUT Request your collection type​

Execute a PUT request on the restaurant collection type in order to update the category of a restaurant.

Be sure that you activated the put permission for the restaurant collection type.

We consider that the id of your restaurant is 2, and the id of your category is 2.

Example PUT request with axios
import axios from "axios";

axios
  .put("http://localhost:1337/api/restaurants/2", {
    data: {
      categories: [2],
    },
  })
  .then((response) => {
    console.log(response);
  });
Example response
{
  "data": {
    "id": 3,
    "documentId": "jm8rm7jl9ncalk12lkc4bhcx"
    "name": "Dolemon Sushi",
    "description": [ 
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
          }
        ]
      }
    ],
    "createdAt": "2024-03-02T21:40:39.185Z",
    "updatedAt": "2024-03-02T21:40:39.185Z",
    "publishedAt": "2024-03-02T21:40:39.118Z",
    "locale": "en"
  },
  "meta": {}
}