Anfänger reagieren Entwickler: To-Do-Liste (Shopping) App

Wir laden zukünftige Studenten des Kurses "React.js Developer" ein , sich für eine kostenlose Demo-Lektion zum Thema "Schreiben einer Anwendung in React + Redux" anzumelden.



Wir haben auch eine Übersetzung von nützlichem Material für Sie vorbereitet.

---

Wenn Sie gerade erst mit React beginnen, können Sie eine einfache Anwendung erstellen, um die grundlegenden Konzepte dieses Frameworks zu üben. Das erste, was mir in den Sinn kommt, ist eine To-Do- oder Einkaufslisten-App. Beginnen wir mit ihm. Die grundlegenden Konzepte von React sind in der offiziellen Dokumentation auf der Website beschrieben . In früheren Beiträgen in meinem Blog finden Sie Links zu anderen Tutorials zur Arbeit mit React.

Starten Sie VS Code oder einen anderen Code-Editor. Geben Sie zum Erstellen einer React-Anwendung den folgenden Befehl in das Terminal ein:

npx create-react-app grocerylist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dann ändern Sie das Verzeichnis:

cd grocerylist 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Starten Sie den Server:

npm start 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Öffnen Sie http: // localhost: 3000 / in Ihrem Browser und Sie sehen das folgende Fenster:

Mal sehen, welche Schnittstellenelemente wir erstellen und entwickeln müssen.

1. Erstellen Sie zunächst ein Feld für die Eingabe eines Elements in die Liste.

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".