Skip to content

A simple React ToDo List application, utilizes key React concepts for managing state, component composition, event handling, and Vite.js. πŸ—“

Notifications You must be signed in to change notification settings

shanibider/React-ToDo-List

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

21 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React ToDo List App πŸ“†

Javascript React Vite

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 🎯

My Skills

  • 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 -

Todo 1 Todo 2 Todo 3

Code Snippets ⌨

App.js:

2

TodoItem.js:

3

InputArea.jsx:

1

style.css

4

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

linkedin portfolio
For any questions or feedback, please reach out to shanibider@gmail.com.


Happy Coding! πŸŽ‰

LicenseπŸ“„

This project is licensed under the MIT License.

About

A simple React ToDo List application, utilizes key React concepts for managing state, component composition, event handling, and Vite.js. πŸ—“

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published