Building a Simple Todo App in React
Building a Simple Todo App in React (Step-by-Step Guide)
React is a popular JavaScript library for building user interfaces, especially for single-page applications. A Todo app is a classic beginner project that helps you learn the fundamentals of React, such as components, state, props, and event handling.
🛠️ What You’ll Learn
Setting up a React app
Creating components
Using state with useState
Handling user input
Updating the DOM dynamically
✅ Step 1: Set Up the Project
First, make sure you have Node.js and npm installed. Then, use Create React App to set up the project:
bash
Copy
Edit
npx create-react-app todo-app
cd todo-app
npm start
This will open the React app in your browser at http://localhost:3000.
✅ Step 2: Clean Up Default Files
Remove or clean the content in:
App.css
App.js
logo.svg
Then edit App.js to start fresh.
✅ Step 3: Create the Todo App UI
Replace the code in App.js with:
jsx
Copy
Edit
import React, { useState } from 'react';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim() === '') return;
setTodos([...todos, input]);
setInput('');
};
const deleteTodo = (index) => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
return (
<div className="App">
<h1>Todo List</h1>
<div>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Enter a task"
/>
<button onClick={addTodo}>Add</button>
</div>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => deleteTodo(index)}>❌</button>
</li>
))}
</ul>
</div>
);
}
export default App;
✅ Step 4: Add Some Basic Styles
In App.css, add:
css
Copy
Edit
.App {
text-align: center;
font-family: Arial, sans-serif;
padding: 2rem;
}
input {
padding: 0.5rem;
margin-right: 0.5rem;
}
button {
padding: 0.5rem;
margin-left: 0.5rem;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 0.5rem 0;
display: flex;
justify-content: center;
align-items: center;
}
li button {
margin-left: 1rem;
}
✅ Step 5: Test Your App
Try typing a task in the input field and clicking Add. You should see the task appear in the list, with an option to delete it.
💡 Bonus Features to Add Later
Mark tasks as completed (with a checkbox or strikethrough)
Save tasks to local storage
Filter tasks (All / Active / Completed)
Add due dates or priorities
🧠 Conclusion
You’ve just built a simple Todo app using React! This project covers the core concepts of React like state management, event handling, and component rendering.
Learn Full Stack JAVA Course in Hyderabad
Visit Our IHUB Talent Training Institute in Hyderabad
Comments
Post a Comment