React is a front-end JavaScript library that can be used to create interactive user interfaces for your application. In this tutorial, we will create a “ToDo List” application that covers all four aspects of a CRUD: Create, Read, Update, and Delete.

This type of project is often done with Class components, but this application will integrate React Hooks. Hooks allow functional components to have a state and use life-cycle methods, allowing you to avoid using Class components and have more modular and readable code.

Without further ado, Let’s get started!

Table of Contents

• First Step 1 – Start a new React App
• Installing npm
• Creating a new app
• Step 2 – Creating a list of items
• Creating a new component
• Adding style to the App
• Adding a new state
• Defining an initial state
• Step 3 – Creating new items on the list
• Component parameters
• Creating the Form
• Manipulating the form values
• Importing the form
• Receiving the form values in the main component
• Step 4 – Updating the list
• Crossing out a task completed with CSS
• Step 5 – Removing items from the list
• Bottom Line
• How to use MongoDB with Node.js
• 4 big differences between forEach and map in Javascript
• How to replace occurrences of a string?

First Step 1 – Start a new React App

Installing npm

To install React, we need **npm** which is a package manager for JavaScript.

**npm** is installed together with Node.js. This means you have to install Node.js to get the npm installed on your computer.

Download Node.js from the official website: https://nodejs.org

Creating a new app

Let’s run the **create-react-app** command inside the terminal, in the folder where you want to create your project, followed by the name of our project, which will be for us, **react-to-do**, the command will look like this:

$ npx create-react-app react-to-do

**npx** is a tool to run **npm** packages that live inside the local node_modules folder or are not installed globally, this tool already comes in Node.js installation.

And the **create-react-app** command installs the necessary dependencies to build our React project and generates the initial structure that we will see next.

Once the installation is finished, we will test the application, just run these two commands on the same terminal:

$ cd react-to-do
$ npm run start

With the first command, you will enter the folder that the **create-react-app** command created, if you changed the name of the project, you need to change it here too.

The second command runs a Node.js service to host your application. It will host your application on a local service on route http://localhost:3000/.

The browser should open automatically and you will see something like this:

If your browser does not open directly, you can type** localhost:3000** in your browser to open your application, this symbol will probably be spinning.

Step 2 – Creating a list of items

With your application running, let’s start on the reading part of the CRUD. We’ll make a list of things for you to read/view.

But before that, we will remove all unnecessary code from our **src/App.js**, your file should look like this:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

Creating a new component

Now let’s create a new folder called **components** and inside this folder create a file with the name **TodoList.js**.

This component will be responsible for displaying the list of items on our screen.

In our component declaration we will include two parameters: **todos** and **updateTodos**.

function TodoList({ todos, updateTodos }) {
...
}

At this point, we will pay attention only to the first parameter, **todos**. The second parameter we’ll treat further ahead.

This parameter is the list with all the items on our list. We will receive the list of the main component, always updated, to display for you.

So with a few lines, we’ve already managed to show our list, the main part of our component looks like this:

<div className="todo-list">
  {todos.map((todo, index) => (
    <div
      key={index}
      className="todo">
      Item {index + 1}: {todo.task}
    </div>
  ))}
</div>

Notice that all the code is inside a **<div>**, which contains a property, **className="todo-list"**. This property inserts a new CSS class in this component, in the case of the CSS **todo-list** class, which I’ll show later.

Also, notice that, React uses **className=""** and not just **class=""** as we normally do with HTML, the reason behind this is that React uses JSX, I will create a dedicated post to explain more about JSX.

But for now, understand that it’s just a way of writing HTML into Javascript files.

So once the component receives the list, what we need to do is just iterate over the list and display it to the user. I am doing this using Javascript’s **Array.map()** method.

#coding from scratch #react