🤫 🏡 ♏️ Pengembang React Pemula: Aplikasi To-Do List (Belanja) 😮 🔌 🚗

Kami mengundang siswa masa depan kursus "Pengembang React.js" untuk mendaftar pelajaran demo gratis tentang topik "Menulis Aplikasi di React + Redux".

Kami juga menyiapkan terjemahan materi yang bermanfaat untuk Anda.

Jika Anda baru saja memulai React, Anda dapat membuat aplikasi sederhana untuk mempraktikkan konsep dasar framework ini. Hal pertama yang terlintas dalam pikiran adalah aplikasi agenda atau daftar belanja. Mari kita mulai dengannya. Konsep dasar React diuraikan dalam dokumentasi resmi di situs , dan di posting sebelumnya di blog saya, Anda dapat menemukan tautan ke tutorial lain tentang bekerja dengan React.

Mulai VS Code atau editor kode lainnya. Untuk membuat aplikasi React, ketikkan perintah di terminal:

npx create-react-app grocerylist

Kemudian ubah direktori:

cd grocerylist

Mulai server:

npm start

Buka http: // localhost: 3000 / di browser Anda dan Anda akan melihat jendela berikut:

Mari kita lihat elemen antarmuka apa yang perlu kita buat dan mulai kembangkan.

1. Pertama, mari buat bidang untuk memasukkan item ke dalam daftar.

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

Pengembang React Pemula: Aplikasi To-Do List (Belanja)

More articles: