These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is React?

React is Facebook's JavaScript library for building dynamic user interfaces with a component-based architecture. Components manage their own state and combine to create complex interfaces, showcasing the React capabilities that make code reusable and maintainable.

The virtual DOM is React's secret weapon; it creates an in-memory copy of the real DOM. When things change, React only updates what actually needs changing. This selective updating delivers the performance that made React popular for single-page applications, where users expect fast interactions.

In a headless CMS setup, integrating React with Strapi serves as the presentation layer. The CMS handles content and API creation, while React focuses on consuming that data and presenting it to users. This separation allows content teams to work independently from developers and provides complete control over presentation and user experience. To deepen your understanding headless CMS, consider how React plays a pivotal role in such architectures.

Why Integrate React with Strapi

Integrating React with Strapi creates a powerful combination for building modern web applications. This headless architecture provides full control over both content management and user experience. It offers the best of both worlds—backend flexibility with frontend freedom. While other frameworks are available, the decision between React vs Vue often comes down to developer preference and project requirements.

Strapi's dual API approach stands out. You automatically receive both REST and GraphQL endpoints, allowing you to select the data fetching method that works best for your React components. For a GraphQL overview, you can understand how it differs from REST. Understanding the evolution of APIs can help you make an informed choice between them. If you're deciding between GraphQL vs REST, Strapi supports both to fit your application's needs.

The division of responsibilities makes practical sense. By integrating React with Strapi, the CMS handles content modeling, authentication, and data storage while your frontend manages component logic and user interactions. The benefits of Strapi as a CMS include handling content modeling, authentication, and data storage.

React developers gain several advantages with this platform, benefiting from the advantages of using React. Strapi creates customizable APIs matching your component structure, offers granular role-based permissions for security, and provides flexible content modeling that grows with your application. Full TypeScript support ensures type safety throughout your stack, highlighting the benefits of TypeScript in your development.

How to Integrate React with Strapi

Connecting a headless CMS with React creates a powerful architecture that separates content management from presentation. This section will guide you through the process of integrating React with Strapi. You'll need Node.js (version 14 or higher), npm or Yarn, and familiarity with React and APIs.

Setting Up the Strapi Backend

Create your project with the CLI command below; during the setup, select SQLite for development:

1
npx create-strapi@latest my-project

Go to http://localhost:1337/admin to create your admin account. Build content types through the Content-Types Builder—add collections like "Articles" with fields for title, content, and publication date.

Set API permissions in Settings > Users & Permissions plugin > Roles. For public content, give the "Public" role "find" and "findOne" permissions for your content types so your React app can fetch data without authentication.

CORS configuration lets your frontend talk to the backend. Update config/middlewares.js to include your React app's URLs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: false,
    },
  },
  {
    name: 'strapi::cors',
    config: {
      enabled: true,
      origin: ['http://localhost:3000', 'https://yourdomain.com'],
    },
  },
  // other middlewares...
];

Creating a React Frontend

Choose between Create React App (CRA) and Vite for your frontend:

For fast development cycles, use Vite:

1
2
3
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

For teams who prefer stability and documentation, use CRA:

1
2
npx create-react-app my-react-app
cd my-react-app

Install packages for API communication and routing:

1
npm install axios react-router-dom

Connecting React to Strapi APIs

Create an API service file to centralize your API logic:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// src/api/strapi.js
const API_URL = process.env.REACT_APP_STRAPI_URL || 'http://localhost:1337';

export async function fetchArticles() {
  const response = await fetch(`${API_URL}/api/articles?populate=*`);
  const data = await response.json();
  return data.data;
}

export async function fetchArticle(id) {
  const response = await fetch(`${API_URL}/api/articles/${id}?populate=*`);
  const data = await response.json();
  return data.data;
}

Set up environment variables in a .env file:

1
REACT_APP_STRAPI_URL=http://localhost:1337

Use hooks for data fetching in your React components:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { useEffect, useState } from 'react';
import { fetchArticles } from '../api/strapi';

function ArticleList() {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchArticles()
      .then(data => {
        setArticles(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {articles.map(article => (
        <div key={article.id}>
          <h2>{article.attributes.title}</h2>
          <p>{article.attributes.content}</p>
        </div>
      ))}
    </div>
  );
}

Using React hooks for data fetching not only simplifies state management but also supports web performance optimization for your application.

Set up React Router for content navigation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ArticleList from './components/ArticleList';
import ArticleDetail from './components/ArticleDetail';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ArticleList />} />
        <Route path="/articles/:id" element={<ArticleDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

Project Overview

Let's walk through building a complete blog that demonstrates real-world integration patterns. This blog includes posts, authors, and categories, showcasing how to handle relationships, authentication, and production challenges.

By integrating React with Strapi, the blog features a public React frontend displaying articles from a headless backend. Both REST and GraphQL approaches are covered, with REST as the primary method for simplicity.

Strapi Content Modeling

The backend utilizes three content types to demonstrate relationship handling. Posts have title, content, slug, featured image, and publication date fields, connecting to Authors. Authors contain name, bio, avatar, and email fields. Categories help organize and filter content.

Creating these relationships is straightforward through the admin interface. When building the Post type, add a "Relation" field connecting to Author with a "many-to-one" relationship—multiple posts can share one author. Posts connect to categories through a "many-to-many" relationship.

Set up roles and permissions for public access to posts, authors, and categories endpoints. Your React frontend can fetch content without authentication for public pages while keeping the admin interface secure.

React Implementation

The frontend uses a modular architecture separating API logic from components. Start with an API service handling all CMS communication:

1
2
3
4
5
6
7
8
9
10
11
12
13
const API_URL = process.env.REACT_APP_STRAPI_URL || 'http://localhost:1337';

export async function fetchPosts() {
  const response = await fetch(`${API_URL}/api/posts?populate=*`);
  const data = await response.json();
  return data.data;
}

export async function fetchPostBySlug(slug) {
  const response = await fetch(`${API_URL}/api/posts?filters[slug][$eq]=${slug}&populate=*`);
  const data = await response.json();
  return data.data[0];
}

Components follow routing best practices with separate pieces for post lists, individual posts, and author profiles. Each component uses hooks to handle loading states and API responses:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function BlogPost({ slug }) {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchPostBySlug(slug)
      .then(setPost)
      .finally(() => setLoading(false));
  }, [slug]);

  if (loading) return <div>Loading...</div>;
  if (!post) return <div>Post not found</div>;

  return (
    <article>
      <h1>{post.attributes.title}</h1>
      <p>By {post.attributes.author.data.attributes.name}</p>
      <div>{post.attributes.content}</div>
    </article>
  );
}

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the React documentation.

FAQ

1
2
3
4
5
6
1. Set up your Strapi backend, create content types, and configure API permissions.</br>
2. Initialize your React application using tools like Create React App or Vite.</br>
3. Install necessary packages for API communication, like axios, and routing with react-router-dom.</br>
4. Create API service functions in React to fetch data from Strapi.</br>
5. Implement React components that use hooks to fetch and display content from Strapi.</br>
6. Configure CORS in Strapi to allow requests from your React application domain.