A clean and simple to-do list application built with React and Vite. This project serves as a practical demonstration of fundamental React concepts, including state management, component props, event handling, and list rendering.

This is a foundational portfolio project designed to showcase a solid understanding of React's core principles without the overhead of complex state management libraries or back-end frameworks. It's a perfect example of how to build a functional, interactive front-end application from the ground up.

The user can add new tasks to a list, view all current tasks, and remove them once completed.

• Add Tasks: Quickly add new items to your to-do list via an input form.
• View Tasks: All current tasks are displayed in a clean, organized list.
• Delete Tasks: Remove tasks individually with a single click.
• Local State Management: The entire application state is managed locally within React components.

This project is an excellent demonstration of the following core React skills:

• State Management with useState: The application's logic relies entirely on the useState hook to manage both the array of to-do items and the state of the input field.
• Component Props: Data and functions (like the delete function) are passed from parent (App) to child (TodoItem) components, showcasing a clear understanding of component communication.
• List Rendering with .map(): Dynamically renders the list of to-do items, assigning a unique key to each element for efficient updates.
• Event Handling: Manages user interactions like form submissions (onSubmit) and button clicks (onClick) to trigger state updates.
• Component-Based Architecture: The application is structured into logical, reusable components for maintainability.

This project was built with a minimal and focused tech stack:

• React: A JavaScript library for building user interfaces.
• Vite: A modern front-end build tool for a fast development experience.
• JavaScript (ES6+): For all application logic.
• CSS: For custom styling and layout.

To get a local copy up and running, follow these simple steps.

Make sure you have Node.js and npm installed on your machine.

• npm

  npm install npm@latest -g

1. Clone the repository:

   git clone [https://github.com/VitorPio7/myListInReact.git](https://github.com/VitorPio7/myListInReact.git)

2. Navigate to the project directory:

   cd myListInReact

3. Install the NPM packages:

   npm install

To run the app in development mode, use the following command.

npm run dev

This will start the development server and open the application in your default browser, typically at http://localhost:5173.

Distributed under the MIT License. See the LICENSE file for more information.

Vitor Pio - GitHub Profile