🥦 🕵🏻 🏂🏻 Novice React Developers: To-Do List (Shopping) App 🤱🏿 💫 🔉

Convidamos futuros alunos do curso "Desenvolvedor React.js" a se inscreverem em uma aula de demonstração gratuita sobre o tema "Escrevendo um aplicativo no React + Redux".

Também preparamos uma tradução de material útil para você.

Se você está apenas começando com React, pode construir um aplicativo simples para praticar os conceitos básicos desta estrutura. A primeira coisa que vem à mente é um aplicativo de tarefas ou lista de compras. Vamos começar com ele. Os conceitos básicos do React são descritos na documentação oficial do site e, em postagens anteriores do blog, você pode encontrar links para outros tutoriais sobre como trabalhar com o React.

Inicie o VS Code ou qualquer outro editor de código. Para criar um aplicativo React, digite o comando no terminal:

npx create-react-app grocerylist

Em seguida, altere o diretório:

cd grocerylist

Inicie o servidor:

npm start

Abra http: // localhost: 3000 / em seu navegador e você verá a seguinte janela:

Vamos ver quais elementos de interface precisamos criar e começar a desenvolver.

1. Primeiro, vamos criar um campo para inserir um item na 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".

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

More articles: