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

We invite future students of the "React.js Developer" course 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 the official documentation on the site , and in previous blog posts 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 http: // localhost: 3000 / in your browser and you will see the following window:

Let's see 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.  — .

3. , .

, , , , , .

App.js. useState()



.

:

<form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </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;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. item



, , . list



, .

handleChange



item



, . setItem



. handleSubmit



, . : id, UUID, item



complete



. complete



: true



, , false



.

Item.js



. :

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;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , id. . , list



, id complete



. . React-, .

:

. GitHub.

:

1. .

2. Firebase.

3. .

.

---

"React.js Developer".



" React+Redux".