React Tutorial
Step 1: Setting Up Your Development Environment
First, make sure you have Node.js and npm (or Yarn) installed. You can download Node.js from here.
Step 2: Creating a New React Application
Use `create-react-app` to set up a new React project. Open your terminal and run the following
command:
npx create-react-app todo-list
cd todo-list
Step 3: Starting the Development Server
Navigate to your project directory and start the development server:
npm start
Step 4: Creating the To-Do List Component
In the `src` folder, create a new file called `TodoList.js` and add the following code:
import React, { useState } from 'react';
import './TodoList.css';
const TodoList = () => {
const [tasks, setTasks] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
const addTask = () => {
if (inputValue.trim()) {
setTasks([...tasks, inputValue.trim()]);
setInputValue('');
}
};
const removeTask = (index) => {
const newTasks = tasks.filter((task, i) => i !== index);
setTasks(newTasks);
};
return (
<div className="todo-container">
<h1>To-Do List</h1>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Add a new task"
/>
<button onClick={addTask}>Add</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task} <button onClick={() => removeTask(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;
Step 5: Styling the To-Do List
Create a TodoList.css file in the src folder and add the following styles:
<style>
.todo-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.todo-container h1 {
font-size: 24px;
margin-bottom: 20px;
}
.todo-container input {
width: 70%;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.todo-container button {
padding: 10px 15px;
border: none;
background-color: #61dafb;
color: white;
border-radius: 4px;
cursor: pointer;
}
.todo-container ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
.todo-container li {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo-container li button {
padding: 5px 10px;
border: none;
background-color: red;
color: white;
border-radius: 4px;
cursor: pointer;
}
</style>
Step 6: Using the To-Do List Component
Modify the App.js file to use the new TodoList component:
import React from 'react';
import TodoList from './TodoList';
const App = () => {
return (
<div className="App">
<TodoList />
</div>
);
};
export default App;