React ToDo List App 📆

A simple ToDo List application utilizes several key React concepts for managing state, component composition, and event handling. Built using: React, utilizing the Vite.js build tool .

React Concepts Used 🥇

🎖 State Management with useState Hook

• The app uses the useState hook to manage two key pieces of state:
  • inputText: to store the value of the input field where users add new tasks.
  • items: to maintain the list of tasks.

🎖 Component Composition and Tree Management

• The app is composed of several components:

  • App: The main component responsible for rendering the entire application.
  • ToDoItem: A child component representing individual todo items.

• The component tree is managed efficiently, with each component focusing on a specific responsibility.

🎖 Event Handling

• handleChange function: This function handles the onChange event of the input field, updating the inputText state with the new value entered by the user.

• addItem function: This function adds a new item to the list of tasks (items state) when the user clicks the "Add" button. It utilizes the spread operator to create a new array with the updated list of items.

• deleteItem function: This function removes an item from the list of tasks when the user clicks the delete button on a specific todo item. It uses the filter method to create a new array excluding the item to be deleted.

🎖 Spread Operator

• The spread operator (...) is used in the addItem function to create a new array by spreading the previous items and adding the new item entered by the user. This ensures immutability of state.

Technologies Used 🎯

• React: A JavaScript library for building user interfaces.
• Vite.js: A build tool that provides a fast development environment.
• JavaScript (ES6+): Modern JavaScript features and syntax.
• CSS: Styling for the components.

Screenshots -

Code Snippets ⌨

App.js:

TodoItem.js:

InputArea.jsx:

style.css

Folder Structure 📁

react-todo-list/
  ├── src/
  │   ├── components/
  │   │   ├── App.js
  │   │   ├── TodoItem.js
  │   │   └── InputArea.jsx
  │   ├── index.html
  │   └── ...
  ├── public/
  │   └── styles.css
  ├── package.json
  └── ...

🚀 Running the Projects

To get started with these projects, clone the repository and install the dependencies. To run any of the projects, navigate to the project directory and start the development server:

git clone <link-to-project>
npm i
npm run dev

Tip

Feel free to explore my repositories and see my projects. I'm always open to collaboration and welcome feedback to improve and grow as a developer. Let's code something amazing together! 🚀😊👩‍💻💻

🚀 Contact

For any questions or feedback, please reach out to [email protected].

---

Happy Coding! 🎉

License📄

This project is licensed under the MIT License.