シンプルな TODO reactjs アプリを作成する

CRUD (作成、読み取り、更新、削除) の基本原則を学ぶ、React を使用したシンプルな Todo アプリを作成しましょう.

こんにちは読者! React で何かを構築する記事を書くのはこれが初めてです. Todo アプリの作成は簡単で時間もかかりませんが、reactjs の重要な概念をいくつか教えてくれます.開発者にとって理解することが非常に重要な CRUD (作成、読み取り、更新、および削除) の原則について説明します.
単純な Todo リストを作成すると、ページを更新すると Todo を追跡できなくなります.したがって、これは完璧な解決策ではありませんが、良いスタートです.
Redux とサーバーを使用する高度な Todo アプリの作成方法を学習しますが、今のところはシンプルに保ちたいと思います.
さぁ、始めよう...

それでは、最初の React Todo アプリの作成を始めましょう

npx create-react-app todo

これで、現在のリポジトリに「todo」という名前のフォルダーが作成されます.次に、todo フォルダー内に移動する必要があります.

    cd todo

次に、npm を使用して必要なライブラリをインストールします.これは、Bootstrap ライブラリを使用してスタイリングを適用するのに役立ちます.

    npm install react-bootstrap bootstrap

上記のコマンドを実行すると、react-bootstrap と bootstrap パッケージの両方が todo アプリにインストールされます.
これで、アプリをビルドする準備が整いました.

App.css

それでは、カスタム CSS コードを書いてスタイリングを行いましょう.

 .app {
   padding: 30px;
   background-color: #848586;
 }
 .todo {
   display: flex;
   align-items: center;
   font-size: 18px;
   justify-content: space-between;
 }

App.js
次に、必要なものを App.js ファイルにインポートすることから始めます.

 import React, {useState, useEffect} from "react";
 import { Button, Card, Form } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import "./App.css";

React Hooks を使用します.
それでは、アプリのメインの Todo 機能から始めましょう.
すべての Todo を含む Todos リストを定義し、各 Todo のステータスを実行済みかどうかに関係なく保持します. setTodos を使用し、useState フックを使用します.

  const App = () => {
   const [todos, setTodos] = useState([
    { 
      label: "This is a sampe todo",
      isDone: false
      }
    ]);
  }

次に、todo を追加する部分に移ります. addTodo 関数を定義し、todo リストを取得して新しい todo のラベルをリストに追加する newTodos を定義します.次に、setTodos を使用して newTodos を todos として設定します.

   const addTodo = (label) => {
    const newTodos = [...todos, { label }];
     setTodos(newTodos);
   };

次に、Todo を完了としてマークする部分に移ります. markTodo 関数を定義します.スプレッド演算子を使用して newTodos のすべての todos をコピーし、インデックスを使用して todo を完了としてマークし、newTodos を todos として設定します.

  const markTodo = index => {
   const newTodos = [...todos];
    newTodos[index].isDone = true;
    setTodos(newTodos);
  };

次に、todos を削除する部分を移動します.同様に、今回はインデックスを使用してリストを結合し、インデックスが一致する todo を削除してから、新しい todo を設定します.
次に、todos を削除する部分を移動します.今回は、インデックスを使用してリストを結合し、インデックスが一致する todo を削除してから、新しい todo を設定します.

  const removeTodo = index => {
   const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

次に、アプリの機能を終了します.後で定義する FormTodo コンポーネントを使用しています. addTodo をパラメーターとして受け入れます.
次に、すべての todo リストを表示します.すべての todo を取得し、それを Todo コンポーネントに渡します. index、todo、markTodo、removeTodo 関数を送信します.

  return (
   <div className="app">
    <div className="container">
     <h1 className="text-center mb-4">Todo List</h1>
     <FormTodo addTodo={addTodo} />
      <div>
       {todos.map((todo, index) => (
        <Card>
         <Card.Body>
          <Todo
           key={index}
            index={index}
            todo={todo}
            markTodo={markTodo}
            removeTodo={removeTodo}
            />
          </Card.Body>
         </Card>
        ))}
      </div>
     </div>
    </div>
  );

次に、Todo コンポーネントを定義します.以前に Todo コンポーネントを呼び出したときに渡したパラメーターを受け入れます.
各 Todo を表示する JSX を返します. Todo を完了としてマークするための 2 つのボタンと、Todo を削除するための 2 つのボタンも表示されます.

 const Todo = ({ todo, index, markTodo, removeTodo }) ={
  return (
   <div className="todo" >
    <span style={{ textDecoration: todo.isDone ? "line- through" : "" }}>{todo.label}</span>
    <div>
     <Button variant="outline-success" onClick={() => 
      markTodo(index)}>✓</Button>{' '}
     <Button variant="outline-danger" onClick={() => 
     removeTodo(index)}>✕</Button>
     </div>
    </div>
   );
 }

次に、FormTodo 関数を定義します. addTodo をパラメーターとして受け入れます.新しい Todo の送信を処理します.値が空でない場合は、その todo テキストで addTodo 関数を呼び出し、フォームの値を再び空に設定します.
Todo を受け入れ、Todo を送信するための送信ボタンがあるフォームを返します.送信ボタンをクリックすると、Todo リストに Todo が追加されます.

     const FormTodo = ({ addTodo }) => {
      const [value, setValue] = useState("");

      const handleSubmit = e => {
       e.preventDefault();
       if (!value) return;
       addTodo(value);
       setValue("");
      };

      return (
       <Form onSubmit={handleSubmit}> 
        <Form.Group>
         <Form.Label><b>Add Todo</b></Form.Label>
         <Form.Control type="text" className="input" value= 
         {value} onChange={e => setValue(e.target.value)} 
         placeholder="Add new todo" />
        </Form.Group>
        <Button variant="primary mb-3" type="submit">
         Submit
         </Button>
        </Form>
       );
      }

それでは、App.js ファイルを見てみましょう.

       import React, {useState, useEffect} from "react";
       import { Button, Card, Form } from 'react-bootstrap';
       import 'bootstrap/dist/css/bootstrap.min.css';
       import "./App.css";

       const Todo = ({ todo, index, markTodo, removeTodo }) 
        => {
        return (
         <div className="todo">
         <span style={{ textDecoration: todo.isDone ? "line- 
          through" : "" }}>{todo.label}</span>
         <div>
        <Button variant="outline-success" onClick={() => 
         markTodo(index)}>✓</Button>{' '}
        <Button variant="outline-danger" onClick={() => 
         removeTodo(index)}>✕</Button>
       </div>
     </div>
     );
    }

     const FormTodo = ({ addTodo }) => {
      const [value, setValue] = useState("");
      const handleSubmit = e => {
      e.preventDefault();
      if (!value) return;
      addTodo(value);
      setValue("");
     };

      return (
      <Form onSubmit={handleSubmit}> 
      <Form.Group>
       <Form.Label><b>Add Todo</b></Form.Label>
       <Form.Control type="text" className="input" value= 
       {value} onChange={e => setValue(e.target.value)} 
       placeholder="Add new todo" />
     </Form.Group>
     <Button variant="primary mb-3" type="submit">
       Submit
     </Button>
    </Form>
    );
   }

    const App = () => {
    const [todos, setTodos] = useState([
      {
      label: "This is a sampe todo",
      isDone: false
      }
     ]);

     const addTodo = label => {
      const newTodos = [...todos, { label }];
      setTodos(newTodos);
     };

     const markTodo = index => {
      const newTodos = [...todos];
      newTodos[index].isDone = true;
      setTodos(newTodos);
     };

     const removeTodo = index => {
      const newTodos = [...todos];
      newTodos.splice(index, 1);
      setTodos(newTodos);
     };

     return (
       <div className="app">
        <div className="container">
         <h1 className="text-center mb-4">Todo List</h1>
         <FormTodo addTodo={addTodo} />
           <div>
           {todos.map((todo, index) => (
            <Card>
              <Card.Body>
                <Todo
                key={index}
                index={index}
                todo={todo}
                markTodo={markTodo}
                removeTodo={removeTodo}
                />
              </Card.Body>
            </Card>
           ))}
          </div>
         </div>
        </div>
      );
     }

     export default App;

これで todo アプリを実行できます:

npm start