
MERN EP03: Developing the Front-End with NodeJS, ReactJS and Bootstrap 3
First, we need to go to our solution folder. remember about our folder structure created in the last post? let’s refresh that:
So, let’s hop in!
Create the react app
Go to the root folder of the project
cd todolist-reactjs-exampleNow, we are going to use a boilerplate to create the base project for our reactjs app. The boilerplate is “create-react-app”, but you need to install it with NPM first:
sudo npm install -g create-react-appSo, following the solution architecture explained a little back, we are going to create the front-end project:
create-react-app react-frontendWhen finished, you should be seeing something like this:

Now, let’s start the app and test if it works! type:
cd react-frontend
npm startThis will start the development server, and when it’s ready, it will open your explorer with the app url:

But remember that we are going to work with Docker, so let’s shutdown the service (CTRL+C) and start the containers with docker-compose:
cd ..
sudo docker-compose up
Open in the explorer: http://localhost:3000

Building the Application
The next step after creating the base of the project, is to start building the application.
First, create the component folder inside the src directory and create all the files that we are going to use in this project:
mkdir src/components/
touch src/components/AddTodo.js
touch src/components/Header.js
touch src/components/ListTodo.js
touch src/components/ListTodoRow.js
touch src/components/TodoService.js
touch src/components/UpdateTodo.js
touch src/index.jsNow, you need to install the react router and axios package:
sudo npm install react-router-dom --save
sudo npm install axios --saveReact Router will help you with routing the different components (you can see it working in the index.js file later). On the other hand, Axios will make the connections to the backend, in a very similar way than the classic “jQuery Ajax” do it.
Service Class
Let’s create the service that is going to connect to the back-end (Simple CRUD):
File: TodoService.js
Index Page (List the Tasks)
In this component we are going to list all our tasks and we will set all the buttons for the actions (Add, Delete, Update).
In the body part of the table, we are going to render the component “ListTodoRow” (The next component after this one).
File: ListTodo.js
Rows of the list
This component it’s going to be rendered for every task inside the table.
File: ListTodoRow.js
Add Tasks
This is a simple form with just one input for adding a new task. The state is just the value of the input that represents the description of the task.
The handler of the form submit (handleSubmit) will call the todoService (declared in the constructor) and will send all the data to the backend.
File: AddTodo.js
Update a Task
Simple form for updating a task. In this case, we are storing in the state the ID and the Description of the current task, that we send later to the backend in the handleSubmit handler.
File: UpdateTodo.js
Header of the app
Just the app header.
File: Header.js
Index of the App
This is the starting point of the app, that renders the different components depending on the route (Using React Route). The path attribute says with what route the component is going to be rendered in that location in the HTML.
Also, you can reference a full component as a tag, like “<Header/>”.
File: index.js
Style CSS file
Just the CSS file that will make things prettier :)
File: index.css
Index Html (HTML App container)
Now we are going to add the reference of the Bootstrap 3 CSS file (From a CDN).
Add the following line in the header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">The full file should look like this:
File: /public/index.html
Testing the App
Now the app it’s ready, let’s see how it look:
(Remember that you need to start the service with Docker Compose)

Play a little with this mini app and add some new tasks:

And we are done! it’s all working (hope is the same for you, let me know if you have some problem!).
If you want to download the full project, go to the repository in GitHub:
https://github.com/gonzalompp/todolist-reactjs-example
Also, I will be putting here the link for the following chapter of our series. Leave some comments below!
Happy Coding!
Gonzalo

