React Todo List App Tutorial – React JS Project Tutorial for Beginners

React JS is a JavaScript library used for building user interfaces and offers a simplified way of developing interactive web applications. In this tutorial, we will go through the process of building a Todo List app using React JS.

Prerequisites

Before we start, make sure you have the following installed on your machine:

• Node.js
• npm – Node Package Manager

Step 1: Set up the project

First, we need to create a new folder for our project. Open your terminal/command prompt and navigate to the desired location. Use the following command to create a new React app:


npx create-react-app todo-list-app


This command will create a new directory called “todo-list-app” with all the necessary files and dependencies to get started.

Next, go into the project directory by running the following command:


cd todo-list-app


Step 2: Create the Todo List component

In the “src” directory, create a new file called “TodoList.js”. This file will contain the code for our Todo List component.

Open “TodoList.js” and add the following code:


import React from 'react';

export default TodoList;


This code sets up the initial state of our Todo List component, with an empty array for the todos and a newTodo variable to track the input value.

Step 3: Add JSX code for the Todo List

In the render() method of the TodoList component, we can now add the JSX code for our Todo List.


render() {
return (

);
}


This JSX code will render a heading, an input field for adding new todos, a button to add the todo, and an unordered list to display the todos.

Step 4: Implement event handlers

In order for our todo list to work, we need to implement the event handlers for input change and the add button click.

Add the following code inside the TodoList component:


handleInputChange = (event) => {
this.setState({ newTodo: event.target.value });
}

addTodo = () => {
if (this.state.newTodo !== '') {
const updatedTodos = [...this.state.todos, this.state.newTodo];
this.setState({ todos: updatedTodos, newTodo: '' });
}
}


The handleInputChange function updates the state with the value of the input field, while the addTodo function adds the new todo to the todos array and clears the input field.

Step 5: Render the TodoList component

In the “src” directory, open the “index.js” file. Replace the existing code with the following:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './TodoList';

ReactDOM.render(


,
document.getElementById('root')
);


This code renders the TodoList component inside the root element of your HTML document.

Step 6: Start the development server

Finally, in the terminal/command prompt, run the following command:


npm start


This command will start the development server and automatically open your Todo List app in your default web browser.

Now you have a functional Todo List app built using React JS! You can add new todos and see them displayed on the screen.

Feel free to explore more React JS concepts and enhance the functionality of your app by adding features like marking todos as completed or deleting them. Happy coding!