Share
Explore

React Shopping List App Workbook

React Shopping List App Workbook

Introduction

Welcome to this hands-on lab where you will create a simple shopping list application using React.
This workbook builds upon the basic knowledge from our previous "Hello World" lab.

Objective

By the end of this lab, you will have a functional shopping list application where you can:
Add items to the list.
View the added items in a list format.
Future: Make draggable items list and add Firebase data store to share app data with other users.

Prerequisites

Visual Studio Code installed.
Node.js and npm installed.
Basic understanding of React from our "Hello World" app.

Setup

Open Visual Studio Code.
Go to the terminal (View > Terminal).
Navigate to your desired directory and run:
bashCopy code
npx create-react-app shopping-list-app
Change into your new app directory:
bashCopy code
cd shopping-list-app

Building the App

Creating the App Structure
Inside the src directory, update App.js to look like:
import React, { useState } from 'react';
import './App.css';

function App() {
const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState('');

const addItem = () => {
if(newItem.trim() !== '') {
setItems([...items, newItem]);
setNewItem('');
}
};

return (
<div className="App">
<h1>Shopping List</h1>
<div className="input-section">
<input
value={newItem}
onChange={e => setNewItem(e.target.value)}
placeholder="Add an item"
/>
<button onClick={addItem}>Add</button>
</div>
<ul className="items-list">
{items.map((item, index) => <li key={index}>{item}</li>)}
</ul>
</div>
);
}

export default App;

Styling the App
Open App.css in the src directory and replace its contents with:
.App {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}

.input-section {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.input-section input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}

.input-section button {
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.input-section button:hover {
background-color: #0056b3;
}

.items-list {
list-style-type: none;
padding: 0;
width: 50%;
margin: 0 auto;
}

.items-list li {
padding: 10px;
font-size: 18px;
border-bottom: 1px solid #eee;
}

Running the App
In the terminal, run:
bashCopy code
npm start
Your shopping list app should now be running in your default browser. You can add items using the input field and view them in the list below.

Conclusion

Congratulations! You've built a simple shopping list application using React. This exercise should solidify your understanding of basic React concepts like component structure, state management, and event handling.

Further Study

Implement a delete functionality for each item.
Save the shopping list to local storage so it persists across browser sessions.
Explore adding more styling or themes using CSS or other styling libraries.
Remember, the key to mastering React and any other technology is consistent practice and real-world application. Keep building!
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.