This is a simple ToDo application built with React. It allows users to create tasks and mark them as complete when done. Users can also delete tasks by clicking on them.
💙 Join the channel to see more videos like this. Code_With_Pankaj
- A responsive design.
- Effect of hovering.
- Click on item to delete.
To create a new task, type the task name in the input field and press the Enter key. The new task will appear in the task list.
To mark a task as complete, click on the checkbox next to the task name.
To delete a task, click on the task name.
This project is open for contributions. If you would like to contribute to this project, you can fork the repository and submit a pull request.
Contributions are always welcome!
See index.html for ways to get started.
Please adhere to this project's code of conduct.
https://todo-urmn.onrender.com
If you have any feedback, please reach out to us at pankajbaliyan90@gmail.com
-
React Hooks: React hooks allow you to use state and other React features in functional components, instead of using class components. In this ToDo application, you can use the useState hook to manage the state of the tasks.
-
State Management with useState: The useState hook is a function that returns an array of two elements: the current state value and a function to update it. You can use useState to manage the state of the tasks in the ToDo application.
-
Props: In React, props are used to pass data from a parent component to a child component. In this ToDo application, you can pass the tasks as props to the TaskList component.
-
Component Composition: Component composition is the process of building complex UIs by combining smaller, reusable components. In this ToDo application, you can use component composition to create the Task and TaskList components.
-
Conditional Rendering: In React, you can conditionally render components based on the state of the application. In this ToDo application, you can conditionally render the completed tasks based on the showCompleted state.
-
Event Handling: In React, you can handle events such as click, submit, and change using event handlers. In this ToDo application, you can handle the click event to delete tasks.
-
CSS Styling: You can use CSS to style your React components. In this ToDo application, you can use CSS to style the UI components such as the input field, task list, and buttons.## Run Locally
- Clone the repository to your local machine:
git clone https://github.com/PankajBaliyan/react-todo.git- Install the required packages:
cd react-todo
npm install- Start code editor
code .- Start the application:
npm start- Open your browser and go to http://localhost:3000 to view the application.
For support, email pankajbaliyan90@gmail.com or join our Slack channel.