To-Do App: The React JS Way

If you are a developer or a beginner in the world of coding, you might have heard about React JS. React JS is a popular JavaScript library that is used for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React JS has gained immense popularity over the years due to its flexibility, efficiency, and ease of use. In this article, we will explore how to create a To-Do App using React JS.

Getting Started with React JS

Before we dive into creating our To-Do App, let’s first set up our development environment with React JS. You can start by creating a new project using Create React App. This will set up a new React project with all the necessary dependencies and configurations.

npx create-react-app todo-app
cd todo-app
npm start

Creating the To-Do App

Once the project is set up, we can start building our To-Do App. We will start by creating a new component for our To-Do list. In this component, we will have an input field for adding new tasks, a list to display the tasks, and the functionality to add and remove tasks.

import React, { useState } from 'react';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    setTasks([...tasks, newTask]);
    setNewTask('');
  };

  const removeTask = (index) => {
    const newTasks = tasks.filter((task, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    

      
To-Do App
       setNewTask(e.target.value)}
      />
      Add Task
      

        {tasks.map((task, index) => (
          
{task}  removeTask(index)}>Remove
        ))}
      
    
  );
}

export default TodoApp;

Rendering the To-Do App

Now that we have our To-Do component, we can render it in our main App component. We can also add some styling to make our To-Do App look better.

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

function App() {
  return (
    

      
My To-Do App
      
    
  );
}

export default App;

Conclusion

With just a few lines of code, we have created a simple To-Do App using React JS. React JS simplifies the process of building user interfaces and allows us to create interactive and dynamic applications with ease. If you are new to React JS, I encourage you to explore more about this powerful library and its capabilities.