How to setup React, Node and MongoDB based project - Part 2

Introduction

In part 1 of this series we setup the basic react app using create-react-app and installed Bootstrap to add some styling. In this part 2 of the series we’ll move onto setting up React Router, creating React components for our UI, and start setting up our backend with Express.

How To

So let’s jump straight into using React Router.

Setting Up React Router

React router is a react library which is used to provide routing facilities to navigate through various components.

Let’s configure the routes for the router: <Route path="/" exact component={TodosList} />
<Route path="/edit/:id" component={EditTodo} />
<Route path="/create" component={CreateTodo} />

For each route which needs to be added to the application a new element is added. The attributes path and component are used to add the configuration settings for each route. By using the attribute path the routing path is set and by using the component attribute the path is connected with a component.

We need three routes for our application: / /create * /edit/:id

These are three components which need to be connected with these routes: Todos.js Edit.js * Create.js

Creating Components

To create the needed components in our application let’s first create a new directory src/components and create three new files: todos.js edit.js * create.js

Let’s add a basic React component implementation for each of those components:

todos.js: import React, { Component } from "react";
export default class TodosList extends Component {
render() {
return (
<div>
<p>Create Your TO-DO List</p>
</div>
);
}
}

edit.js: ` import React, { Component } from “react”;

export default class EditToDo extends Component { render() { return (

create.js: import React, { Component } from "react";
export default class CreateToDo extends Component {
render() {
return (
<div>
<p>Create Your TO-DO List</p>
</div>
);
}
}

Finally, we have created three basic components for our to-do application. Let’s put them together.

Building a Basic Layout with Navigation using the above components

You will see something like as shown in picture below:

Once you click on Create ToDo, it will show you the content under that component as shown in the picture below:

Let’s create the form and functionality through which we submit data into the database. Replace the create.js code with the code provided below, I’ll give a brief about how it’s working:

After adding the above code, you will see a change in create todo component. You will see a form as shown below:

Now, we have set up everything in frontend. Let’s add the backend node and MongoDB to save the data in the database and retrieve that data as well.

Let’s create the backend part for this App: ` C:to-do-app>mkdir backend

C:to-do-appbackend>npm init -y `

This will create a default package.json file with the folder name and you don’t need to add anything manually if you want to change something, you can do it through your code editor. Let’s install the supporting files to run this application.

Let’s install the other dependencies and frameworks: C:\to-do-app\backend>npm install express body-parser cors mongoose

After adding this command, you will start thinking these packages are all about. Let me give you a brief introduction about them

express: A web framework for Node.js great for creating APIs easily. body-parser: A NodeJS body parsing middleware. cors: CORS is a NodeJS package for providing an Express middleware that can be used to enable CORS with various options. Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain. mongoose: A NodeJS framework which uses MongoDB in an object-oriented way.

Finally, we need to make sure to install a global package by executing the following command: C:\to-do-app\backend>npm install -g nodemon

Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. We’ll use nodemon when running our Node.js server in the next steps.

server.js: ` const express = require(‘express’); const app = express(); const bodyParser = require(‘body-parser’); const cors = require(‘cors’); const PORT = 4000; app.use(cors()); app.use(bodyParser.json()); app.listen(PORT, function() {

1
console.log("Server is running on Port: " + PORT);

}); `

Let’s test that everything works fine on not by running our backend on via nodemon. C:\to-do-app\backend>nodemon server

Conclusion

In this part 2 of this series we setup Routing, created our React UI Components, and setup our backend with Express. Continue on to part 3 of the tutorial where we setup MongoDB on the backend.