How to build a React CRUD application using MERN stack?

Coding is one of the essential aspects of modern technology which opens up ample opportunities. The goal of this article is to describe how to build a React CRUD (Create, Read, Update and Delete) application using MERN stack.

The MERN stack contains a few particular technologies such as Node.js, Express, MongoDB, and React. MERN stack is quite similar to MEAN stack; however, the only difference is MEAN stack uses Angular for building front end portion of web applications, and MERN stack uses React to do so.

So, the application built here is a to-do app. Through this demonstration, one can see how one can build a CRUD application using MERN stack from scratch. There are generally 4 parts to its, and the first part is setting an application.

Setting up the application

Before beginning, one requires installing node.js in a system. To check whether Node.js is installed in a system a person requires typing $ node –v on the command line. This will offer one the information about installed Node.js and its version. Next, what one needs to do is – to create a React project using a script, create-react-app.

What’s remarkable about this script is that it is executed using npx command without requiring any installation in a system. All one requires writing is $ npx create-react-app mean-todo-app. Execution of this script will create new modern-to do-app project directory. This folder provides default template of React project along with dependencies installed.

All a person needs is change into this new folder created by typing $cd mern-tofo-app before starting web server development using the script $ npm start.

• Adding Bootstrap to react project

Adding the Bootstrap framework to the project is the next step. It is required because one would use CSS classes of Bootstrap for building the using interface. Inside this project, folder executes commands $ npm install bootstrap for adding library. Lastly, ensure importing CSS file of Bootstrap in App.js by adding code import “bootstrap/dist/css/bootstratp.min.css”.

• React router’s setting up

After importing a CSS file, adding project react router is essential for react-router-dom for which one should type the command $ npm install react-router-dom. After installing this package all one requires is adding routing configuration; however, before that, a statement one requires to add is import { BrowserRouter as router, Route, Link } from “react-router-dom”; as this configures routing in App.js. After this, a coder would need to embed JSX code in <Router></Router> element:

Inside <Router> element, one can now add router configuration using the below code:

<Route path=“/” exact component={TodosList}  />
<Route path=“/ edit/:id” component={EditTodo}/>
<Route path=“/ create” component={CreateTodo}/>

A new route element will be added for each route that requires adding in this application. The attributes component and path are utilized for adding each route’s configuration setting. With the help of the attribute path, the setting of the routing path is done. Also, by using the component attribute, a path is linked with the component. For this application, an individual requires adding three routes a slash (/), /create, and /edit/: id. And when connecting to these, three components include TodosList, EditTodo, and CreateTodo.

To learn React, you can explore the different sections of “React for Professionals: The App Building Guide“. It helps you in building a live React app from scratch be learning all the essential concepts.

• Creating components

To create required components, first one requires creating a new directory which is src/components. And for this one also requires creating three new files. Adding a React component is essential to these components for implanting it adequately.

• Creating navigation and layout

Now the work is to create a basic layout as well as the navigation menu for this application. Since Bootstrap library is already added, one can simply use CSS classes of Bootstrap for implementing this web application’s user interface. After this task is completed one requires going through the web browser to check the changes.

Also, after this, the navigation bar will display two menu items that include Create Todo and Todos. TodosList component, the default output is shown as it was linked to this application’s default route after this comes setting up the back end.

Setting up the back end

This is considered to be the second portion of building the application. In this, one will know about building server using node.js/Express. When opting to build back end, one should also set up Mongo DB. Moreover, connect it to the database from server Node.js/Express using mongoose library.

Back end work consists of HTTP endpoints for covering various cases such as retrieving available to do item’s complete list by sending the request of HTTP GET or retrieve a particular to do thing by sending the request of HTTP GET as well as providing a specific ID of to-do.

Apart from above two, other cases may include creating a new item of to-do in the database with the request of an HTTP POST or update to-do item that already exists in the database by request of the HTTP POST.

• Initiating back end

First of all, one requires changing the newly formed folder in which one requires creating a file package.json. With this file ready in this new folder one requires to add dependencies. Four packages where one requires working is express which is a lightweight and fast web framework. This is an essential part of MERN stack.

CORS is another package that offers Express middleware which is used for enabling CORS with multiple options. CORS refers to a mechanism which permits restricted resources on web pages for requesting from another outside domain which served the resource first. Another package is body parser that is Node.js middleware. Mongoose is another framework of Node.js that lets one access MongoDB in object-oriented approach.

Lastly, one requires ensuring installing the global package by implementing a command $ npm install –g nodemon. Nodemon refers to a utility which monitors any changes in one’s source. Also, automatically it restarts one’s server.

• Installing MongoDB

After setting up basic server, Node.js/Express one should continue with the next task which is setting up a database of MongoDB. First, ensure whether a MongoDB is installed. If not, install MongoDB in the system before creating a data directory utilizing MongoDB. Now, before running this, make sure user account running this has writing and read permission for the directory.

• Creating a MongoDB database

Next step in this is to create a MongoDB database. Thus, connecting database server using MongoDB client. Once the client starts it’s prompt a person can enter the database commands. Also, after this one requires creating Mongoose schema. By utilizing Mongoose one can access database in an object-oriented approach. It means an individual needs the addition of mongoose schema for Todo entity for implementing this on the project.

Learn MongoDB by opting for “MongoDB: Beginners to Professional“. From a basic overview to its advanced usage, everything is cover in this online tutorial.

• Creating server endpoints

In this last step, a complete server implementation has to be complete in server.js. This is done by using To-do schema which a person just created and added for implementing API endpoints.

Linking front and back end

The third part consists of connecting front with the back end. This will help a user to create to-do items as well as check an overview of every to-do item. The communication between the two ends is implemented by sending an HTTP request to server endpoints that were created in the above step.

Also, in this step Axios are installed along with finishing the task of implementing Todo component. Just following these two steps will allow a user to link back end with the front end of this application and this is the step before completing this application and making it ready for usage.

Completing the Application

This is the last step of building a React CRUD web application using MERN Stack. Before this, in the third step front and back end was linked. However, there are certain aspects which are still missing. In this portion, one will know about completing front-end so that users will be easily able to edit various to-do items as well as set every to-do item to complete.

• Linking EditTodo component

The link for this component is already included in output that is returned by the component Todo. The edit connection which is output for every todo entry points to /edit/: id path. This current todo’s ID is included in URL. This provides one to retrieve the current ID in EditTodo’ implementation’s component again.

Furthermore, one can see depending on the value of todo_completed will complete CSS class when applied. Also by applying the CSS class, text information of todo item gets displayed with a text which is crossed out.

• Edit Todo

The first task here is implementing EditTodo in edit-todo.component.js. Here, one requires creating Axios library first. After that, a person needs to add a class constructor for setting initial state. The state object consists of four properties that will represent one todo item. For retrieving current todo items from the back end as well as update state of the component requires adding lifecycle method.

Next, an individual uses Axios again to send HTTP GET for requesting back-end for retrieving information. Since ID is handed over as URL parameter, one can access this information so that it can be passed to back end. With such information of to do items that are selected can be edited and ready for output form. This helps the user able to check what is available and also used to alter data’s form.

Now you are well aware of how to build a React CRUD web application using MERN stack from scratch. Following these four parts will help your work to go swiftly within a specific period.