If you are familiar with our blog you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks: Gatsby, React, Next.js, Nuxt, or Angular.

We thought that it would be a good idea to provide the result of these tutorials as starters for those who'd like to bootstrap a simple blog application with Strapi and their favorite frontend framework.

All the blog starters for React, VueJs, Next.js, Nuxt.js, Gatsby and Angular are going to be published one after the other, but right now, let's talk about the React starter!

Why did we make these starters?

Starters allow you to quickly visualize the result of the association between Strapi and your frontend framework.

It's easier and faster to dig into an existing application to get an idea of ​​the product than to start an application from scratch.

As we've made tutorials on how to make a blog with this or that framework, it seemed useful for the Strapi community to use the resulting application in order to create starters.

So to get started with the starter, you have two options:

• You can start by installing the starter and then following the tutorial to reproduce it and learn on the way.

• Or you can run the starter to directly test the application.

So, let's see how to run it!

Getting started

Clone the repository and install dependencies

git clone https://github.com/strapi/strapi-starter-react-blog.git
cd strapi-starter-react-blog

# Using yarn
yarn setup:yarn

# Using npm
npm run setup:npm

Scaffold your project

This command will launch both of your backend and frontend server and do a data migration in your backend server

# Using yarn
yarn build:yarn
yarn develop:yarn

# Using npm
npm run build:npm
npm run develop:npm

Alternatively, you can still start your servers separately:

Start the backend server

cd backend

# Using yarn
yarn build
yarn develop

# Using npm
npm run build
npm run develop

Start the frontend server

cd frontend

# Using yarn
yarn develop

# Using npm
npm run develop

React server is running here => http://localhost:3000 Strapi server is running here => http://localhost:1337

Features

• 2 Content types: Article, Category
• Permissions set to true for article and category
• 2 Created articles
• 3 Created categories
• Apollo integration (GraphQL) for fetching data from strapi
• Responsive design using UIkit

Pages

• "/" display every articles
• "/article/:id" display one article
• "/category/:id" display articles depending on the category

If you are interested in the idea of ​​making React applications with Strapi, here are the reasons why it is very good to bet on this duo: Strapi + React.

If you liked it, it would be great to share the word 📣 And let me know what you thought of it in the comments below.

Enjoy this starter!