Scribd
Upload
1 views6 pages

React Todo

This document provides a step-by-step guide to creating a TODO application in React, including setting up the project, creating necessary components (App, TodoList, and TodoItem), and implementing functionality for managing tasks. It also includes instructions for styling the application to enhance its visual appeal. The final output is a functional TODO list application that can be deployed on GitHub.

Uploaded by

abdulrahman50ab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views6 pages

React Todo

This document provides a step-by-step guide to creating a TODO application in React, including setting up the project, creating necessary components (App, TodoList, and TodoItem), and implementing functionality for managing tasks. It also includes instructions for styling the application to enhance its visual appeal. The final output is a functional TODO list application that can be deployed on GitHub.

Uploaded by

abdulrahman50ab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

React Lab Manual

☛ Create a TODO application in react with necessary components and


deploy it into github.

Solution :

Step 1: Set Up the Project

Our first task is to set up the React project. This step involves creating the necessary
project structure. Here's how you can do it:

1. Create a React App:

Open your terminal and navigate to your preferred directory. Run the following command
to generate a new React app. Replace "todo-app" with your desired project name:

npx create-react-app todo-app

This command will create a directory named "todo-app" with all the initial code required
for a React app.

2. Navigate to the Project Directory:

Change your working directory to the "todo-app" folder:

cd todo-app

3. Start the Development Server:

Launch the development server with the following command:

npm start
This will open your React app, and you�ll see the default React starter page in your web
browser at 'http://localhost:3000'.

Step 2: Create the App Component

In this step, we create the App component, which serves as the entry point to our Todo
List application.

import React from'react';


import TodoList from'./components/TodoList';
function App() {
return (
<div className="App">
<TodoList />
</div>
);
}
exportdefault App;

Step 3: Create the TodoList

src->Component

Now, let's create the 'TodoList' component, which is responsible for managing the list of
tasks and handling task-related functionality.

import React, { useState } from 'react';


import TodoItem from './TodoItem';

function TodoList() {
const [tasks, setTasks] = useState([
{
id: 1,
text: 'Doctor Appointment',
completed: true
},
{
id: 2,
text: 'Meeting at School',
completed: false
}
]);

const [text, setText] = useState('');


function addTask(text) {
const newTask = {
id: Date.now(),
text,
completed: false
};
setTasks([tasks, newTask]);
setText('');
}
function deleteTask(id) {
setTasks(tasks.filter(task => task.id !== id));
}
function toggleCompleted(id) {
setTasks(tasks.map(task => {
if (task.id === id) {
return {task, completed: !task.completed};
} else {
return task;
}
}));
}
return (
<div className="todo-list">
{tasks.map(task => (
<TodoItem
key={task.id}
task={task}
deleteTask={deleteTask}
toggleCompleted={toggleCompleted}
/>
))}
<input
value={text}
onChange={e => setText(e.target.value)}
/>
<button onClick={() => addTask(text)}>Add</button>
</div>
);
}
exportdefault TodoList;
Step 4: Create the place the TodoItem in

src->Component

In this step, we create the 'TodoItem' component, which represents an individual task in
our Todo List.

import React from'react';


function TodoItem({ task, deleteTask, toggleCompleted }) {
function handleChange() {
toggleCompleted(task.id);
}

return (
<div className="todo-item">
<input
type="checkbox"
checked={task.completed}
onChange={handleChange}
/>
<p>{task.text}</p>
<button onClick={() => deleteTask(task.id)}>
X
</button>
</div>
);
}
exportdefault TodoItem;

These three components, 'App', 'TodoList', and 'TodoItem', work together to create a
functional Todo List application in React. The 'TodoList' component manages the state of
the tasks, and the 'TodoItem' component represents and handles individual tasks within
the list.

Step 5: Styling
To enhance the visual appeal of your Todo List, you can apply some basic styling.
Here�s an example of how you can style the todo items. In the `App.css` file, add the
following styles:

.todo-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.todo-itemp {
color: #888;
text-decoration: line-through;
}

Your output should look like this:

Output :
Initially it looks like:

Next,

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy