開発者ドキュメント

Reactフックを使用してReactTo-Doアプリを構築する方法

序章

React は、アプリケーションのインタラクティブなユーザーインターフェイスを作成するために使用できるフロントエンドJavaScriptライブラリです。

このチュートリアルでは、ToDoアプリケーションを作成します。 アプリケーションは、タスクを表示し、新しいタスクを追加し、タスクを完了としてマークし、タスクを削除する必要があります。 これらのアクションは、 CRUD(作成、読み取り、更新、および削除)アプリケーションの4つの側面に触れます。

このタイプのプロジェクトは、多くの場合、クラスコンポーネントを使用して実行されますが、このアプリケーションは、代わりに ReactHooksを統合します。 React Hooksを使用すると、機能コンポーネントに状態を持たせ、ライフサイクルメソッドを使用できるため、Classコンポーネントの使用を回避し、よりモジュール化された読みやすいコードを使用できます。

完成したプロジェクトはCodeSandboxチェックアウトできます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

ステップ1—Reactアプリを起動する

まず、新しいアプリを作成する必要があります。 ターミナルウィンドウで、新しいアプリケーションを配置する場所に移動し、次のように入力します。

  1. npx create-react-app react-to-do

注: React 16.8より前は、Reactフックを利用するにはReact16.7のアルファビルドをインストールする必要がありました。 この記事の執筆時点で、 Create React App は、フックをサポートする最新の安定バージョンのReact(16.13.1)をインストールします。

次に、新しいプロジェクトディレクトリに移動します。

  1. cd react-to-do

次に、プロジェクトを実行します。

  1. npm start

案内する localhost:3000 ブラウザで回転するReactロゴを確認してください。

これでアプリケーションがセットアップされ、アプリの残りの部分の作成を続行できます。

ステップ2—アプリケーションのスタイリング

スタイリングはこのチュートリアルの焦点ではありませんが、やることタスクを表示するのに役立ちます。

開ける App.css コードエディタで:

  1. nano src/App.css

このファイルの内容を、アプリ全体で使用する3つのクラスに置き換えます。

src / App.css
.app {
  background: #209cee;
  height: 100vh;
  padding: 30px;
}

.todo-list {
  background: #e8e8e8;
  border-radius: 4px;
  max-width: 400px;
  padding: 5px;
}

.todo {
  align-items: center;
  background: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 3px 10px;
}

これにより、次のCSSクラスが作成されます app, todo-list、 と todo. それはを利用します vh (ビューポートの高さ)単位と flexbox プロパティ (align-itemsjustify-content).

スタイリングが完了しました。 これで、CRUDの側面を実装できます。

ステップ3—やること項目を読む

CRUDのReadの部分から始めましょう。 リストを読んで表示できるように、リストを作成する必要があります。

クラスを使用するToDoアプリケーションは、次のようになります。

class App extends Component {
  state = {
    todos: [
      { text: "Learn about React" },
      { text: "Meet friend for lunch" },
      { text: "Build really cool todo app" }
    ]
  }

  setTodos = todos => this.setState({ todos });

  render() {
    return <div></div>
  }
}

React Hooksを使用するため、クラスを使用した場合とは状態が少し異なります。

開ける App.js:

  1. nano src/App.js

このファイルを変更して、次の行コードをに追加します App 成分:

src / App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [todos, setTodos] = React.useState([
    { text: "Learn about React" },
    { text: "Meet friend for lunch" },
    { text: "Build really cool todo app" }
  ]);

  return (
    // ...
  );
}

export default App;

コンポーネントは機能コンポーネントです。 以前のバージョンのReactでは、機能コンポーネントは状態を処理できませんでしたが、現在はフックを使用することで処理できます。

のフック useState Reactがコンポーネントの状態またはライフサイクルにフックするために使用するものです。 次に、オブジェクトの配列を作成し、状態の始まりを取得します。

後で使用できるコンポーネントを作成する必要があります return メインの App 成分。 あなたはそれを呼ぶでしょう Todo そしてそれは通過します todo と表示 text ToDoの一部(todo.text).

再訪 App.js 新しいを追加します Todo 前のコンポーネント App 成分:

src / App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function Todo({ todo }) {
  return (
    <div className="todo">
      {todo.text}
    </div>
  );
};

function App() {
  // ...
}

export default App;

アイテムのリストを作成しましょう。

再訪 App.js の内容を置き換えます return これらの新しいコード行で:

src / App.js
function App() {
  // ...

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo
            key={index}
            index={index}
            todo={todo}
          />
        ))}
      </div>
    </div>
  );
}

JavaScriptメソッドmap()を使用すると、マッピングして新しいアイテムの配列を作成できます。 todo 状態からのアイテムとインデックスによるそれらの表示。

これにより、 <div> 為に app<div> 為に todo-list、およびの地図 todosTodo コンポーネント。

この時点で、を削除することも可能です logo.svg 使用されなくなるため。

全体 src/App.js これまでのところ、ファイルは次のようになります。

src / App.js
import React from "react";
import "./App.css";

function Todo({ todo }) {
  return (
    <div className="todo">
      {todo.text}
    </div>
  );
};

function App() {
  const [todos, setTodos] = React.useState([
    { text: "Learn about React" },
    { text: "Meet friend for lunch" },
    { text: "Build really cool todo app" }
  ]);

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo
            key={index}
            index={index}
            todo={todo}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されます。

これでデータを読み取っており、CRUDの他の側面に進むことができます。

ステップ4—ToDoアイテムの作成

それでは、アプリケーションにToDoアプリの新しいアイテムを作成する権限を与えましょう。

にいる間 App.js ファイルには、いくつか追加する必要があります。

まず、という別のコンポーネントを追加します TodoForm. このコンポーネントでは、次のことを行います。

状態を設定するには、次のように記述します。

const [value, setValue] = React.useState("");

1つ目は「値」で、2つ目は状態の設定方法です。 状態は空から始まり、状態に物事を追加すると、やること項目のリストに追加されます。

追加する必要があります handleSubmit あなたを扱うことができる変数 addTodo 関数を実行し、アイテムをリストに追加します。 入力ボックスに何も入っておらず、ユーザーがを押した場合 ENTER、空のアイテムをリストに追加しないようにします。

入力ボックスのあるフォームに機能を追加します。

src / App.js
// ...

function TodoForm({ addTodo }) {
  const [value, setValue] = React.useState("");

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </form>
  );
}

function App() {
  // ...
}

// ...

この新しいを追加します TodoForm あなたのコンポーネント App 成分:

src / App.js
function App() {
  // ...

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo
            key={index}
            index={index}
            todo={todo}
          />
        ))}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}

を構築しましょう addTodo 今機能します。

内にとどまる App.js、の状態で App コンポーネントの場合、関数は既存のアイテムのリストを取得し、新しいアイテムを追加して、その新しいリストを表示することができます。

src / App.js
function App() {
  // ...

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

  return(
    // ...
  );
}

ないことに注意してください this.state. 新しいReactフックを使用すると、 this.state 新しいフックは、それが特定の場所で暗示されることを理解しているからです。

コードにもスプレッド演算子があります。 前の3つのドット todos リストをコピーして、新しいToDoアイテムを追加できるようにします。 次に、前に設定したキーワードを使用して、状態を次のように設定します。 setTodos.

Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されているはずです。 新しいやること項目を追加するためのフィールドもあるはずです。

これでデータを作成し、CRUDの他の側面に進むことができます。

ステップ5—ToDoアイテムの更新

完了したら、やることリストの項目を消す機能を追加しましょう。

あなたの状態 App 「完了」ステータスを変更できるようにするには、コンポーネントに少し余分なものが必要です。 オブジェクトのリストに別のキーと値のペアを追加します。

追加することにより isCompleted: false 値、あなたはそれをに設定します false まず、プロンプトが表示されたら、次のように変更します true.

再訪 App.js と追加 isCompleted あなたの州へ:

src / App.js
function App() {
  const [todos, setTodos] = React.useState([
    {
      text: "Learn about React",
      isCompleted: false
    },
    {
      text: "Meet friend for lunch",
      isCompleted: false
    },
    {
      text: "Build really cool todo app",
      isCompleted: false
    }
  ]);

  // ...
}

あなたはのような機能が必要になります addTodo 機能しますが、これはアイテムを「完了」としてマークすることができます。 あなたはあなたがしたのと同じようなことをするでしょう addTodo、スプレッド演算子を使用して現在のアイテムのリストを取得するようなものです。 この関数では、を変更します isCompleted ステータス true それが完了したことを知るためです。 次に、状態を更新し、状態をに設定します newTodos.

次のコードを更新します。

src / App.js
function App() {
  // ...

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

  return (
    // ...
  )
}

を使用して completeTodo の中に Todo 機能、あなたはその機能を使用することができます。 完了ボタンをクリックすると、 textDecoration: line-through スタイリングとアイテムを取り消します。

三項演算子を使用して、アイテムを完成させ、リストを更新します。

src / App.js
function Todo({ todo, index, completeTodo }) {
  return (
    <div
      className="todo"
      style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
    >
      {todo.text}
      <div>
        <button onClick={() => completeTodo(index)}>Complete</button>
      </div>
    </div>
  );
}

追加 completeTodo の中に Todo 返品の一部 App 成分:

src / App.js
function App() {
  // ...

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo
            key={index}
            index={index}
            todo={todo}
            completeTodo={completeTodo}
          />
        ))}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}

Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されます。 やること項目を完了としてマークするための完了ボタンもあります。

これでデータが更新され、CRUDの最後の側面に進むことができます。

ステップ6—ToDoアイテムの削除

やることリストの項目が削除されたときに削除する機能を追加しましょう。

ビルドします removeTodo X をクリックしてアイテムを削除すると、そのアイテムが削除されるように機能します。 その機能は、状態の下にある他の人によって配置されます App 成分;

src / App.js
function App() {
  // ...

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

  return (
    // ...
  )
}

これで removeTodo 関数の場合、再びspread演算子を使用しますが、現在のリストを取得すると、アイテムの配列から選択したインデックスをスプライシングします。 それが削除されたら、次のように設定して新しい状態に戻ります setTodos することが newTodos.

あなたの中で Todo 関数の場合、やること項目を削除するためのボタンを追加する必要があります。

src / App.js
function Todo({ todo, index, completeTodo, removeTodo }) {
  return (
    <div
      className="todo"
      style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
    >
      {todo.text}
      <div>
        <button onClick={() => completeTodo(index)}>Complete</button>
        <button onClick={() => removeTodo(index)}>x</button>
      </div>
    </div>
  );
}

追加 removeTodo の中に Todo 返品の一部 App 成分:

src / App.js
function App() {
  // ...

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo
            key={index}
            index={index}
            todo={todo}
            completeTodo={completeTodo}
            removeTodo={removeTodo}
          />
        ))}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}

Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されます。 やること項目を削除するためのXボタンもあります。

これでデータが削除され、CRUDの4つの側面すべてが実装されました。

ステップ7—アプリを完成させる

あなたがまとめた後 Todo コンポーネント、 TodoForm コンポーネント、および App コンポーネント、あなたの App.js ファイルは次のようになります。

src / App.js
import React from "react";
import "./App.css";

function Todo({ todo, index, completeTodo, removeTodo }) {
  return (
    <div
      className="todo"
      style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
    >
      {todo.text}
      <div>
        <button onClick={() => completeTodo(index)}>Complete</button>
        <button onClick={() => removeTodo(index)}>x</button>
      </div>
    </div>
  );
}

function TodoForm({ addTodo }) {
  const [value, setValue] = React.useState("");

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </form>
  );
}

function App() {
  const [todos, setTodos] = React.useState([
    {
      text: "Learn about React",
      isCompleted: false
    },
    {
      text: "Meet friend for lunch",
      isCompleted: false
    },
    {
      text: "Build really cool todo app",
      isCompleted: false
    }
  ]);

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

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

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

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo
            key={index}
            index={index}
            todo={todo}
            completeTodo={completeTodo}
            removeTodo={removeTodo}
          />
        ))}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}

export default App;

これで、CRUDの4つの側面すべてに対応するアプリケーションができました。 To Doアイテムの作成、To Doアイテムの読み取り、To Doアイテムの更新、およびToDoアイテムの削除。

結論

To Doアプリは、Web開発におけるCRUDに関して、優れたリマインダーまたは出発点になる可能性があります。 情報の読み取り、新しい情報の作成、既存の情報の更新、および情報の削除ができることは、どのアプリケーションでも強力です。

このチュートリアルでは、 React Hooksを使用してCRUDTo-Doリストアプリを作成しました。これにより、コードを明確、簡潔、わかりやすくすることができます。

Reactの詳細については、Reactトピックページで演習とプログラミングプロジェクトを確認してください。

モバイルバージョンを終了