How to Build a CMS for Blog With React [Guide]
A blog is an effective tool for spreading information if done and maintained correctly. And React is one of the best and most popular libraries to build a CMS for your blog. And in this article, we would like to take you on a little tour that will help you understand the process of creating a React CMS for blog step-by-step.
How to Make React-based CMS for Blog
What we are going to have, is an extremely simple CMS for a blog website that will have quite a small toolset. But nonetheless, it will be open to improvement due to its simplicity.
Next, let’s discuss what features our React-based Blog would have:
- Ability to add and delete blogs;
- Fetching and displaying details about each and every individual blog;
- Fetch blogs from a local JSON server. They would also be displayed in a list form;
- This would be a purely React-based blog and there would be no back-end servers used.
It means that all the changes made on the page of the chat would not be saved and we will see the blog in its default state with each refresh of the page.
All of these features are aimed at creating as simple a CMS for blog application as it can be in order to strip the blog to its bare skeletal state and pay closer attention to its structure. Now, we get to coding.
Step №1. Installing Node Package Manager
The first practical step we take in creating our npm module that will help our back-end’s Node.JS to put modules into place so that it would be able to find them, as well as manage dependencies conflicts.
To install npm from the npmjs.com site, after which you install it and start creating the React Blog app by writing down the following command:
npx create-react-app react-blog
npx is a tool that is bundled with npm. So, by writing the line above you create a new React project that would be named react-blog, as well as a basic React program that will contain node modules, a src folder, a public folder, and a package.json file. After that, we get down to working with the latter and the src folder.
Step №2. Working on src folder and package.json
What we need to understand is that our package.json file would have many dependencies, which secure React’s correct work. But fear not, as our previous step has covered most of this work preemptively. Here is how it should look at this point:
Step №3. Creating a GitHub Repository
This step is needed to ensure that you would be able to track all the changes that are going to be made into our React Blog App. What we need to do here is to initialize this new Get Repo that is going to be used in the folder of our project by adding the next line of code:
After that you would need to link it with the GitHub Repository by the command that goes like:
git remote add origin your-repo
What you need to do next is add our previous file to the Git repo that you have initialized earlier by adding the next line of code:
git add -A
And making a commit into the Git repository with the following line:
git commit -m "First commit"
The final thing you would need to do during this step is pushing all your local Git Repositories to the Github repository with the help of:
git push origin master
Keep in mind that the process of working with the GitHub Repository is manual at the moment, which means you would have to add, commit and push (by using the git add, -commit and -push commands respectively) by hand when making any significant changes.
Step №4. Creating a homepage of the React Blog App
To create the homepage for our React Blog App we would mostly use the BlogList component and the useFetch hook.
First, you need to set up the useFetch hook, which would perform three functions for the blog:
1. Holding all the present blogs in your local JSON database;
2. Allowing you to know if the data is currently being fetched and when it is fully fetched and displayed;
3. Storing all the errors that are to be encountered while the data is fetching from the local JSON server.
This piece of code would look the following way:
Now we bring our attention to the BlogList component. As seen in the previous piece of coding, we have already invoked this component and it is going to pass in the blogs and titles to be displayed in our Blog App.
Now we need to import Link, which would, similar to the anchor tag, help us in the task of linking texts, images, and URLs, although not calling the server, but using the locally saved data. We import Link with the help of the react-router-dom.
Step №5. Setting up Blog’s detail component
Blog detail component’s goal is to fetch and display single blog posts. That’s why it is important to be careful when setting it up and not forget to call the Blog detail component using a Link passing in the web address and include a blog’s id in the URL as a param. In order to do that we extract the id using the getParams() hook, after which we use the previously mentioned useFetch custom hook to actually get the particular blog entry by passing in the id in the useFetch hook.
During this step, we also set up such a hook as useHistory() in order to establish a history stack, push or pop elements and store the components or visited pages in the history stack. And, finally, we add the function of deleting the blog by adding the button that functions as a handleClick. This part of the process code-wise would look the following way:
Step №6. Creating the Create Component
Just as the name implies, the Create Component is used to create new blog posts in the app. It would use two hooks:
- the useState hook;
- and the useHistory hook.
The coding for this part would look as follows:
Step №7. Finalizing the useFetch hook
We have already set up our useFetch hook and now it is time to make small adjustments and additions for it to fit our React Blog App like a glove. What we mean by that is setting up useState and useEffect hooks.
The useState hook is responsible for setting up three hooks in this case:
· data, which would be an empty array by default;
· sPending, which we are to set to true;
· and error, which we would set to null.
By using our own local JSON server we rid ourselves of the ability to see the loading effect on the homepage. For that, we are going to use the setTimeout function in order to delay the fetching process.
And as for the useEffect hook, we would use an abort controller stored inside, as well as the timeout function for data fetching using the URL that we have received from other components when this hook was called. What we need to do here is wait for the response from the server and see, whether the response is positive or negative:
· if the response is negative, we mark it as an error;
· if the response is positive — we’ve got the data.
After we’ve got the date, we need to set it in our data variable, set the error variable to null and set isPending to false.
The piece of coding needed for this whole step would look like this:
Step №8. Setting up the leftover components
The next step in the creation of the React CMS for your Blog App will be to create such components, as:
- The Navbar component;
- The NotFound Component;
- The App Component;
We set up the Navbar component in order to display the navigation bar in the App. It is rather easy, as it is only going to have two links: the Home link and the Create Blog link. The coding for the Navbar component would look like this:
The NotFound component is needed to display the 404 Error page. It would be a simple 404 Error page with a heading displaying 404 error, a text saying that the page was not found, and a link to the homepage.
The App component is needed to bind and interlink all the components together, as it imports all the required components, as well as BrowserRouter, Route and Switch from react-router-dom. The coding, in this case, would look like this:
Index.css, as the name implies, is a CSS file needed for the design of our React-based Blog App. And as the design is the most subjective part of the whole process, we would present you with the utmost freedom in creating it.
Index.js, on the other hand, is quite fixed in its coding, as it is the index file that serves as the starting point of our application. Here is how it should look:
Step №9. Setting up the JSON Server
Our final step brings us to setting up a JSON server, which we would use to build a fake REST API. In order to do that, you should use the following command:
npm install -g json-server
After that you need to create the data folder and make a db.json file inside of it, which will contain the following piece of coding:
After that part is completed, start the server with the following command:
npx json-server — watch data/db.json — port 8000
It is now possible to start it on any different port and check it out.
The whole process is not that hard to complete from the technical point of view, it is surely quite tedious in execution due to the number of steps you need to take. But fear not, as there is, actually, a much easier way to create your own Blog App. And by that we mean Flatlogic’s Platform, which allows you to build an array of different React-based applications in just 5 simple steps.
How to Create React CMS for Blog With Flatlogic Platform
Step №1. Select your name
Step №1 is as self-explanatory as they come. Just write down a name you would like your project to have and be on your merry way to the second step.
Step №2. Choose your stack
This step is quite crucial, as here you decide the whole basis of your new app and by that, we mean frontend, backend, and database. For the purposes of this article, we’ve chosen React for the frontend side of the app, Node.js for the backend, and MySQL for the database.
Step №3. Choose design for your project
This step is most pleasing for those, who understand the value of a nice design. And Flatlogic’s Full Stack Web has a wide selection of beautiful designs for you to choose from. For our exemplary React Blog App, we’ve decided to choose the Classic design for its slickness.
Step №4. Create database schema for blog CMS
Database Schema is the backbone that will help your blog work properly. Luckily, Flatlogic’s Platform gives you an array of ready-made Database Schemas that you can use, including a Schema for blogs, which means that you don’t even have to create it yourself!
And this is a fully made high-quality Database Schema as well, as it covers everything from users to comments, as you would be able to see in the following pictures.
Step №5. Review and generate your app
And now we come to the final step of creating a React CMS for blog with the help of Flatlogic’s Web App Platform — reviewing and generating the application. All you need to do here is to assure yourself that you’ve included and chosen everything you wanted and click the “Create Project” button. After that, you can give yourself a round of applause for a job well done and wait for the final project to generate.
In this article, we have taken an extensive look at the process of building a CMS for your blog with React. As you could understood, React is a handy and an efficient tool to build any CMS, and you should definitely try it to build your next blog, be it a separate project or a part of the project.
First published on: https://flatlogic.com/blog/how-to-build-a-blog-on-react/