Creating a Blog CMS with Strapi and React

Hello, budding developers! Today, we’re diving into the exciting world of building Content Management Systems (CMS) using Strapi and React. If you’re new to these technologies, worry not—we’ll guide you through each step, making sure you’re comfortable before moving on. By the end of this tutorial, you’ll have a working blog CMS and the skills to personalize it further. Let’s get started!

What is Strapi?

Strapi is an open-source, headless CMS that gives developers the flexibility to create their content structure, manage it’s entries, and connect it with any frontend framework. It’s built with JavaScript, making it ideal for modern web applications.

Why React?

React is a popular JavaScript library for building user interfaces. Its component-based architecture allows for reusable UI designs and efficient state management, perfect for dynamic web apps like our blog.

Step 1: Setting Up Strapi

The first step towards building our CMS is to set up Strapi as the backend.

#### Installing Strapi

You’ll need Node.js and npm installed on your machine. Once that’s set, open your terminal and run:

bash
npx create-strapi-app my-blog-backend --quickstart

This command will create a new Strapi project in a folder called my-blog-backend. The --quickstart flag sets up a default SQLite database for local development.

#### Configure the Blog Content Type

1. Launch the Strapi Admin Panel: Navigate to http://localhost:1337/admin to access the admin panel.
2. Create a New Content Type:
– Go to ‘Content-Type Builder’.
– Click ‘Create new collection type’ and name it BlogPost.
3. Add Attributes:
– Title (Type: Text)
– Content (Type: Rich Text)
– Author (Type: Text)
– Published date (Type: Date)

Once finished, save your content type and Strapi will restart.

Step 2: Populating Data in Strapi

Now that your backend is ready, let’s add some sample blog posts.

1. Go to ‘Content Manager’: Click on BlogPost.
2. Add Entries: Use the form to create entries and fill them with sample data.

This step gives you a few blog posts to work with when connecting to your frontend.

Step 3: Setting Up React

With our backend configured, it’s time to set up a React app to serve as the frontend.

#### Create a New React App

Run the following command in your terminal to create a new React app:

bash
npx create-react-app my-blog-frontend

#### Fetching Data from Strapi

1. Install Axios for HTTP Requests:

bash
    npm install axios
    

2. Fetch Blog Posts:

Open src/App.js and replace its contents with the following:

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

   function App() {
     const [blogs, setBlogs] = useState([]);

     useEffect(() => {
       axios
         .get('http://localhost:1337/blogposts')
         .then((response) => {
           setBlogs(response.data);
         })
         .catch((error) => console.error('Error fetching data:', error));
     }, []);

     return (
       

         
My Blog

         

           {blogs.map((blog) => (
             

               
{blog.title}

               
{blog.content}

               
By: {blog.author} on {new Date(blog.published_at).toDateString()}

             

           ))}
         

       

     );
   }

   export default App;
   

Bringing it All Together

Your React app now queries your Strapi backend and displays the blog posts. You can style your application using CSS or a framework like Bootstrap to make it more visually appealing.

Summary and Next Steps

Congratulations! You’ve just created a basic CMS for a blog using Strapi and React. This setup provides you the foundations to expand where and how you need. You can:

– Add User Authentication: Explore Strapi’s user and permissions plugin to secure your app.
– Enhance the UI: Get creative with frontend frameworks like Material-UI or Tailwind CSS for better design.
– Deploy your CMS: Take it live with services like Heroku or Vercel.

Not only have you done it, but now you are equipped to take your project to the next level. Keep experimenting and happy coding! If you have questions or want to share your project, feel free to comment below or reach out on sagarkunwar.com.np.

—

Here’s to your future creations. Let us know what you build next!