Desarrolladores novatos de React: aplicación de lista de tareas pendientes (compras)

Invitamos a los futuros estudiantes del curso "Desarrollador React.js" a que se registren en una lección de demostración gratuita sobre el tema "Cómo escribir una aplicación en React + Redux".



También preparamos una traducción de material útil para usted.

---

Si recién está comenzando con React, puede crear una aplicación simple para practicar los conceptos básicos de este marco. Lo primero que me viene a la mente es una aplicación de lista de compras o de tareas pendientes. Empecemos por él. Los conceptos básicos de React se describen en la documentación oficial del sitio , y en publicaciones anteriores de mi blog puede encontrar enlaces a otros tutoriales sobre cómo trabajar con React.

Inicie VS Code o cualquier otro editor de código. Para crear una aplicación React, escriba el comando en la terminal:

npx create-react-app grocerylist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Luego cambia el directorio:

cd grocerylist 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Inicie el servidor:

npm start 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Abra http: // localhost: 3000 / en su navegador y verá la siguiente ventana:

Veamos qué elementos de la interfaz necesitamos crear y empezar a desarrollar.

1. Primero, creemos un campo para ingresar un elemento en la lista.

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