Building a Simple Application Using React

React is a popular JavaScript library used to build dynamic and interactive user interfaces. In this article, we will walk through the process of building a simple application using React. Our application will be a simple to-do list where users can add and remove tasks.

1. Setting Up a React Project

Before starting to write the React application, we need to set up a React development environment. The easiest way to create a new React project is by using create-react-app, a tool that sets up everything needed for a React app with a single command.

1.1 Installing React with create-react-app

To create a new React project, run the following commands in your terminal:

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

The command npx create-react-app todo-app will create a new directory called todo-app with all the necessary files and dependencies. The npm start command will start the development server, and you can view the app in your browser at http://localhost:3000.

2. Building the To-Do Application

Once we have our React project set up, let's start building our simple to-do list application. This app will allow users to add new tasks, display them in a list, and remove tasks from the list.

2.1 Defining the App Component

In React, we build applications by creating components. Let's start by defining the App component, which will be the main component of our to-do list application. Open the src/App.js file and replace its contents with the following code:

        
        import React, { useState } from 'react';

        function App() {
            const [tasks, setTasks] = useState([]);
            const [taskInput, setTaskInput] = useState('');

            const addTask = () => {
                if (taskInput.trim()) {
                    setTasks([...tasks, taskInput]);
                    setTaskInput('');
                }
            };

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

            return (
                

                    
To-Do List

                     setTaskInput(e.target.value)}
                        placeholder="Enter a task"
                    />
                    
                    
    
                        {tasks.map((task, index) => (
                            
  • 
                                {task}
                                
                            
    • 
                        ))}
                    

                

            );
        }

        export default App;

In this example, we define two state variables: tasks to store the list of tasks, and taskInput to store the value of the input field. We use the useState hook to manage state. The addTask function adds a new task to the list, while the removeTask function removes a task based on its index in the array.

2.2 Explanation of the Code

  • useState([]): Initializes an empty array for the tasks state.
  • useState(''): Initializes an empty string for the taskInput state, which stores the value of the input field.
  • addTask: Adds a new task to the tasks state by appending the current value of taskInput.
  • removeTask: Filters the tasks array to remove the task at the given index.
  • {tasks.map()}: Maps over the tasks array and renders each task in a list item (<li>) element, with a "Remove" button for each task.

3. Running the Application

Now that we've defined our App component, the to-do list should be working. The application allows users to type a task into the input field, click the "Add Task" button, and see the task appear in the list. Users can also remove tasks by clicking the "Remove" button next to each task.

3.1 Testing the Application

To test the app, run the following command if you haven't already started the development server:

        
        npm start

This will start the React development server, and you can view the app in your browser. Try adding and removing tasks to see how the app works!

4. Conclusion

In this article, we created a simple to-do list application using React. We learned how to set up a React project with create-react-app, define a functional component, manage state with useState, and handle user input to add and remove tasks. React's component-based architecture and state management make it easy to build interactive user interfaces for modern web applications.

By following this example, you now have the foundation to build more complex applications with React. You can extend this app by adding more features, such as task completion, saving tasks to local storage, or filtering tasks based on their status.




Advertisement