How to Use Strapi With React
Building modern web applications requires fast, flexible, and scalable
solutions. **Strapi**, one of the most popular open‑source headless CMS
platforms, helps developers create custom APIs effortlessly, while
**React** enables building dynamic and interactive user interfaces. When
used together, they empower developers to build robust, scalable
full‑stack applications with clean architecture and high performance.
In this in‑depth guide, you will learn **how to use Strapi with React**,
how to fetch Strapi APIs, how to build dynamic pages, how to configure
permissions, how to handle authentication, and how to structure your
project for long‑term scalability. The tutorial is written for both
beginners and experienced developers.
If you need expert help with full‑stack development, you can **hire
[AAMAX](https://aamax.co)**. AAMAX is a full‑service digital marketing
and development company offering MERN Stack Development, Web
Development, SEO, and Digital Marketing services.
## Introduction to Strapi and React Architecture
**[Strapi is a headless CMS](https://aamax.co/service/strapi-cms-website-development#place-order)**, meaning it provides a backend to manage
content while exposing it through APIs (REST or GraphQL). React is the
frontend layer where you display that content.
This separation allows:
- Faster development
- Improved performance
- Cleaner architecture
- High scalability
- Easy integration with mobile apps, websites, or third‑party services
### How Strapi and React Work Together
1. **Strapi manages content** (blogs, products, pages, user data).
2. **Strapi exposes APIs** automatically.
3. **React fetches this data** using `fetch`, `axios`, or React Query.
4. **React displays the content dynamically** in UI components.
This headless approach is now the standard for modern web development.
## Step 1: Setting Up the Strapi Backend
First, install Strapi using NPX:
npx create-strapi-app@latest strapi-backend
Navigate to your project:
cd strapi-backend
npm run develop
Strapi will open the admin dashboard at:
http://localhost:1337/admin
Create your admin user and you're ready to begin.
### Creating a Collection Type (Example: Blog Posts)
1. Open **Content-Type Builder**
2. Create a **Collection Type**
3. Name it: `Post`
4. Add fields:
- Title (Text)
- Slug (UID)
- Content (Rich Text)
- Featured Image (Media)
- Category (Relation)
5. Save and Strapi will auto‑restart.
### Adding Content in Strapi
1. Go to **Content Manager**
2. Choose the `Post` type
3. Add a new entry
4. Publish it
Strapi gives a draft & publish workflow, so make sure content is
published so React can fetch it.
## Step 2: Configuring API Permissions for React
By default, Strapi prevents public API access.
To allow your React frontend to fetch data:
1. Go to **Settings → Users & Permissions → Public**
2. Enable:
- find
- findOne
3. Save permissions
Now your API is ready for frontend requests.
### Example API Endpoints
GET http://localhost:1337/api/posts
GET http://localhost:1337/api/posts/1
To include media or relations:
GET http://localhost:1337/api/posts?populate=*
## Step 3: Setting Up the React Project
Create a new React app:
npx create-react-app react-frontend
Navigate:
cd react-frontend
npm start
Your React app will run at:
http://localhost:3000
Now you can connect it to Strapi.
## Step 4: Fetching Data From Strapi in React
Strapi automatically exposes data through REST APIs, making it simple to
fetch content.
### Option 1: Fetching With Native `fetch`
Inside a component:
import { useEffect, useState } from "react";
function BlogPage() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch("http://localhost:1337/api/posts?populate=*")
.then(res => res.json())
.then(data => setPosts(data.data));
}, []);
return (
))}
);
}
export default BlogPage;
### Option 2: Fetching With Axios
import axios from "axios";
axios.get("http://localhost:1337/api/posts?populate=*")
.then(res => console.log(res.data));
Using Axios is more convenient for error handling and interceptors.
### Option 3: Fetching With React Query
React Query provides caching, revalidation, and performance
optimization.
import { useQuery } from "@tanstack/react-query";
function BlogPage() {
const { data, isLoading } = useQuery({
queryKey: ["posts"],
queryFn: () =>
fetch("http://localhost:1337/api/posts?populate=*").then(res => res.json())
});
if (isLoading) return "Loading...";
return (
## Step 6: Handling Slugs and Dynamic Routing in React
If you're building a blog or product catalog, you need dynamic pages.
### Example: Dynamic Route With React Router
Install:
npm install react-router-dom
Define routes:
### Fetching a Single Post by Slug
Inside `SinglePost`:
import { useParams } from "react-router-dom";
function SinglePost() {
const { slug } = useParams();
const [post, setPost] = useState(null);
useEffect(() => {
fetch(`http://localhost:1337/api/posts?filters[slug][$eq]=${slug}&populate=*`)
.then(res => res.json())
.then(data => setPost(data.data[0]));
}, [slug]);
if (!post) return "Loading...";
return (
);
}
export default SinglePost;
React can now dynamically render pages from Strapi content.
## Step 7: Authentication With Strapi and React
Strapi provides built‑in **JWT authentication**.
### Register User
POST /api/auth/local/register
### Login User
POST /api/auth/local
Example React login handler:
axios.post("http://localhost:1337/api/auth/local", {
identifier: email,
password: password
}).then(res => {
localStorage.setItem("token", res.data.jwt);
});
### Using JWT in Requests
axios.get("http://localhost:1337/api/user-posts", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`
}
});
This allows React to access protected Strapi routes.
## Step 8: Creating Custom API Endpoints in Strapi
You may need custom logic for:
- filtering data
- advanced queries
- user‑specific content
- secure operations
Create custom controllers in:
/src/api//controllers
Example:
module.exports = {
async customRoute(ctx) {
ctx.body = "Custom API works!";
}
};
Define routes:
{
"method": "GET",
"path": "/custom-route",
"handler": "controller.customRoute"
}
React can fetch:
fetch("http://localhost:1337/api/custom-route")
## Step 9: Best Folder Structure for React + Strapi
A recommended structure:
react-frontend/
src/
components/
pages/
hooks/
utils/
services/
context/
Strapi API calls should be moved into `services/api.js`:
export const fetchPosts = async () => {
const res = await fetch("http://localhost:1337/api/posts?populate=*");
return res.json();
};
This helps maintain clean code and reusability.
## Step 10: Filtering, Searching, and Sorting Data in Strapi
Strapi provides powerful query options.
### Filtering:
/api/posts?filters[category][name][$eq]=Technology
### Search:
/api/posts?filters[title][$contains]=javascript
### Sorting:
/api/posts?sort=createdAt:desc
React can dynamically build queries based on user input.
## Step 11: Deployment Strategy for Strapi + React
Deploy independently:
### Strapi can be deployed on:
- DigitalOcean
- Render
- AWS EC2
- VPS (Nginx + PM2)
- Docker
### React can be deployed on:
- Vercel
- Netlify
- Cloudflare Pages
- AWS Amplify
### Environment Variables
Do not hard‑code API URLs.
React `.env`:
REACT_APP_API_URL=https://your-strapi-domain.com
Use it:
fetch(`${process.env.REACT_APP_API_URL}/api/posts`);
## Step 12: SEO Considerations for React + Strapi
React alone is not SEO‑friendly unless using:
- React Helmet
- prerendering
- server‑side rendering (Next.js preferred)
You can add:
import { Helmet } from "react-helmet";
{post.attributes.title}
However, if SEO is a priority, consider **Next.js instead of pure
React**.
## Final Thoughts
Using Strapi with React creates a highly scalable and flexible
full‑stack architecture. Strapi handles content management and API
creation, while React delivers exceptional UI performance and
interactivity. With the right approach---proper permissions, API
structure, dynamic routing, authentication, and clean project
architecture---you can build anything from blogs to eCommerce stores,
dashboards, SaaS apps, and enterprise tools.
If you need professional help with Strapi, React, or full MERN stack
development, you can **hire AAMAX**, a leading agency providing Web
Development, SEO, and Digital Marketing solutions.
Blog
{posts.map(post => ({post.attributes.title}
{data.data.map(post => (
);
}
React Query is recommended for production apps.
## Step 5: Displaying Media From Strapi in React
Images uploaded in Strapi come with a relative URL, so you need to
prepend the Strapi base URL.
const imageUrl = "http://localhost:1337" + post.attributes.featuredImage.data.attributes.url;
Render the image:
{post.attributes.title}
))}{post.attributes.title}
Grow Your Reach
Want to publish a guest post on aamax.co?
Place an order for a guest post or link insertion today.
Place an Order