Développeurs React débutants: application de liste de tâches (Shopping)

Nous invitons les futurs étudiants du cours "React.js Developer" à s'inscrire à un cours de démonstration gratuit sur le thème "Ecrire une application dans React + Redux".



Nous avons également préparé une traduction de matériel utile pour vous.

---

Si vous ne faites que commencer avec React, vous pouvez créer une application simple pour mettre en pratique les concepts de base de ce framework. La première chose qui me vient à l'esprit est une application de liste de tâches ou de courses. Commençons par lui. Les concepts de base de React sont décrits dans la documentation officielle sur le site , et dans les articles précédents sur mon blog, vous pouvez trouver des liens vers d'autres tutoriels sur l'utilisation de React.

Démarrez VS Code ou tout autre éditeur de code. Pour créer une application React, saisissez la commande dans le terminal:

npx create-react-app grocerylist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Puis changez de répertoire:

cd grocerylist 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Démarrez le serveur:

npm start 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ouvrez http: // localhost: 3000 / dans votre navigateur et vous verrez la fenêtre suivante:

Voyons quels éléments d'interface nous devons créer et commencer à développer.

1. Commençons par créer un champ pour saisir un élément dans la 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".