Clever Geek Handbook

初心者React開発者：やることリスト（ショッピング）アプリ

「React.jsDeveloper」コースの将来の学生は、「React + Reduxでアプリケーションを作成する」というトピックに関する無料のデモレッスンにサインアップすることをお勧めします。



また、あなたに役立つ資料の翻訳も用意しました。









Reactを使い始めたばかりの場合は、このフレームワークの基本概念を実践するための簡単なアプリケーションを作成できます。最初に頭に浮かぶのは、やることリストや買い物リストを作成するためのアプリです。彼から始めましょう。Reactの基本的な概念は、サイトの公式ドキュメントに概説されています。私のブログの以前の投稿には、Reactの操作に関する他のチュートリアルへのリンクがあります。





VSコードまたはその他のコードエディターを起動します。Reactアプリケーションを作成するには、ターミナルで次のコマンドを入力します。





npx create-react-app grocerylist

次に、ディレクトリを変更します。





cd grocerylist 

サーバーを起動します。





npm start 

ブラウザでhttp：// localhost：3000 /を開くと、次のウィンドウが表示されます。





作成して開発を開始するために必要なインターフェイス要素を見てみましょう。





1.まず、リストにアイテムを入力するためのフィールドを作成しましょう。





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











More articles:


All Articles