Novice React Developers: To-Do List (Shopping) App

Future students of the course “React.js Developer” we invite you to sign up for a free demo lesson on the topic “Writing an Application in React + Redux”.

We also prepared a translation of useful material for you.


If you’re just getting started with React, you can build a simple application to practice the basic concepts of this framework. The first thing that comes to mind is a to-do or shopping list app. Let’s start with him. The basic concepts of React are outlined in official documentation on the site, and in previous posts on my blog you can find links to other tutorials on working with React.

Start VS Code or any other code editor. To create a React application, type the command in the terminal:

npx create-react-app grocerylist

Then change the directory:

cd grocerylist 

Start the server:

npm start 

Open the address in the browser http: // localhost: 3000 /and you will see the following window:

Let’s take a look at what interface elements we need to create and start developing.

1. First, let’s create a field for entering an item into the list.

2. Then – the button to save the item.

3. Finally, create a list to display items with the ability to delete items and mark them as completed.

To develop such an application, you need to learn how to work with hooks, how to create basic forms, work with arrays, objects, arrow functions, the array expansion operator and props.

Let’s work with the code in the App.js file. We will use functional components and a hook useState() to determine the state.

Let’s create a form:

<form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>

This is how all our code will look after creating the form:

import React, { useState } from "react";
import "./App.css"
import { v4 as uuidv4 } from "uuid";

function App() {
  const [item, setItem] = useState("");
  const [list, setList] = useState([]);

  const handleSubmit = (e) => {
    const newItem = {
      id: uuidv4(),
      item: item,
      complete: false,
    };
    e.preventDefault();
    if (item) {
      setList([...list, newItem]);
      setItem("");
    }
  };

  const handleChange = (e) => {
    setItem(e.target.value);
  };

  return (
    <div className="App">
      <h1>Grocery List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>
    </div>
  );
}

export default App;

Let’s explain the above code. We have created a state variable item, which stores the value of the list item entered by the user. Then we created another state variable list, which stores a collection of list items as an array.

We have created an arrow function handleChange to change state item every time the user enters a new value into the form. We change the state with setItem and assign it as the target value. We have created another function handleSubmit to update the array of list items each time the user enters a new item. Each item has the following properties: a unique id, which is generated as UUID, item and complete… Property complete is a boolean state: if assigned a value true, the item in the list is marked as completed, and the value false is assigned to unfulfilled items.

Now let’s create a new component Item.js… To do this, write the following code:

import React from "react";
import "./Item.css";

const Item = ({ id, items, list, setList, complete }) => {
  const remove = (id) => {
    setList(list.filter((el) => el.id !== id));
  };

  const handleComplete = (id) => {
    setList(
      list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            complete: !item.complete,
          };
        }
        return item;
      })
    );
  };

  return (
    <div className="item">
      <p className={complete ? "complete" : ""}>{items}</p>
      <img
        onClick={() => handleComplete(id)}
        src="https://img.icons8.com/offices/40/000000/checked-2--v2.png"
        alt="complete task"
      />
      <img
        onClick={() => remove(id)}
        src="https://img.icons8.com/color/48/000000/trash.png"
        alt="Delete"
      />
    </div>
  );
};
export default Item;

To remove items, we will filter the item to be removed by comparing items by their id. After deleting an item, the remaining items will continue to be displayed. To mark the items as completed, we will iterate over all the elements of the array in the variable list, compare them by id and change the state value complete for the corresponding item. Customize the application to your liking. You can take advantage of the styled React components that are available here

This is how our application will look like:

Demo applicationGitHub repository.

What else can you do:

1. Add local storage.

2. Add a server part based on Firebase.

3. Add registration and login functions.

Suggestions are welcome.


Learn more about the course “React.js Developer”.

Sign up for an open lesson “Writing an Application in React + Redux”.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *