beginner#react#todo-list#javascript
Building a Simple To-Do List App with React
Learn how to create a basic to-do list app using React and JavaScript.
Introduction
To get started with this tutorial, you'll need to have Node.js and npm installed on your computer.
Step 1: Create a new React app
Create a new React app using create-react-app by running the following command in your terminal:
npx create-react-app todo-list-app
Step 2: Create the To-Do List Component
Create a new file called TodoList.js and add the following code:
import React, { useState } from 'react';
function TodoList() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState('');
const handleAddTodo = () => {
setTodos([...todos, newTodo]);
setNewTodo('');
};
return (
<div>
<h1>To-Do List</h1>
<input type='text' value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
<button onClick={handleAddTodo}>Add Todo</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
export default TodoList;
Step 3: Render the To-Do List Component
Open the App.js file and replace the existing code with the following:
import React from 'react';
import TodoList from './TodoList';
function App() {
return (
<div>
<TodoList />
</div>
);
}
export default App;
Conclusion
You now have a basic to-do list app up and running. You can customize and extend this app as per your requirements.