React Workshop: Building a Shopping List Application

Welcome to the React Workshop! In this workshop, we will build a simple shopping list 🛒 application using React. This README will guide you through the setup and provide an overview of the project structure.

Project Structure

• App.jsx: This file contains the main component of our application. It manages the state of the tasks and handles adding and deleting tasks.
• App.css: This file contains the styles for our application, including layout, colors, and button styles.
• package.json: This file contains the project dependencies and scripts for running and building the application.

Getting Started

Prerequisites

Make sure you have the following installed on your machine:

• Node.js (v14 or higher)
• npm (v6 or higher)

Installation

1. Clone your fork:

   git clone https://github.com/GDSCGuelph/LearnReact

2. Navigate to the project directory:

   cd shopping-list

3. Install the dependencies:

   npm install

Running the Application

To start the application, run the following command:

npm start

This will start the development server and open the application in your default web browser.

Application Overview

App.jsx

The App.jsx file contains the main component of our application. It includes the following features:

• State Management: Uses the useState hook to manage the list of tasks and the input value.
• Add Task: Adds a new task to the list when the "Add" button is clicked.
• Delete Task: Removes a task from the list when the "Purchase" button is clicked.

App.css

The App.css file contains the styles for our application. It includes:

• Variables: Defines CSS variables for colors and shadows.
• Layout: Styles for the container, input, and task items.
• Button Styles: Styles for the add and delete buttons.

package.json

The package.json file includes the project dependencies and scripts. Key dependencies include:

• React: The main library for building the user interface.
• React DOM: Provides DOM-specific methods for React.
• React Scripts: Scripts and configuration used by Create React App.

Conclusion

By the end of this workshop, you will have a functional shopping list application built with React. Feel free to customize and expand the application further. Happy coding!