How to Use Strapi with React

Using Strapi as a backend with a React frontend is a common setup, as it allows developers to build modern, dynamic applications with a powerful headless CMS.

Here’s a step-by-step guide to setting up and using Strapi with React:

1. Setting Up Strapi:

1.1 Install Strapi globally using npm or yarn:

npm install strapi@latest -g

1.2 Create a new Strapi project:

strapi new my-project

1.3 Navigate to the project directory and start the Strapi server:

cd my-project
strapi develop

2. Creating a Content Type:

• Once Strapi is running, go to the admin panel (usually http://localhost:1337/admin).
• Create a new content type (e.g., Article with fields like title, content, author).
• Save and restart the server if prompted.

3. Populating Data:

• Add a few articles or your chosen content type entries using the Strapi admin interface.

4. Setting Up React:

4.1 Create a new React app using Create React App:

cd my-react-app

4.2 Navigate to your React app directory:

cd my-react-app

5. Fetching Data from Strapi:

• You can use the fetch API, axios, or any other preferred method to get data from Strapi.

For instance, using the fetch API in a simple React component:

import React, { useState, useEffect } from 'react';

function App() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch('http://localhost:1337/articles')
      .then(response => response.json())
      .then(data => setArticles(data));
  }, []);

  return (
    <div className="App">
      <h1>Articles</h1>
      {articles.map(article => (
        <div key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.content}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

6. Setting Up CORS in Strapi:

• To allow requests from your React app to Strapi, you might need to set up CORS in Strapi.
• In Strapi, navigate to Settings > Webhooks > CORS and add your React app's URL (e.g., http://localhost:3000) to the allowed origins.

7. Securing Your Strapi API:

• You might not want your API to be publicly accessible. In Strapi, you can set permissions for various roles under Settings > Users & Permissions > Roles.
• For further security, consider using authentication tokens or integrating user authentication systems to ensure only authorized users can fetch or modify data.

8. Deploying:

• When you’re ready to deploy, make sure to update any URLs in your React app to match your deployed Strapi URL.
• Remember to also set up your database and environment configurations appropriately for production.

Read further: What Is Strapi? | Advantages of Using Strapi For Your Projects

In conclusion, the combination of Strapi and React provides a powerful and flexible foundation for building modern web applications. Strapi offers the backend capabilities and CMS functionalities, while React handles the dynamic frontend rendering, together forming a full-stack solution.