ReactでuseStateを使って簡単なTODOアプリを作る方法

Reactは、簡単に複雑なUIを作成することができるJavaScriptライブラリです。Reactを使って、TODOアプリを作ってみましょう。この記事では、ReactのuseStateフックを使って、簡単なTODOアプリを作成する方法について説明します。

Reactとは？

Reactは、Facebookによって開発されたJavaScriptライブラリです。Reactを使用すると、コンポーネントと呼ばれる小さな部品から大きなUIを構築できます。Reactは、UIを構築するための機能が豊富で、JavaScriptの他のライブラリと組み合わせて使用することができます。

useStateフックとは？

useStateは、Reactに組み込まれたHooksの一つであり、状態管理に使用されます。useStateは、関数コンポーネントで状態を追跡することができます。また、状態が変更されたときにコンポーネントを再レンダリングすることもできます。

TODOアプリの作成

それでは、Reactを使用してTODOアプリを作成する方法を説明します。

まず、Reactアプリを作成しましょう。ターミナルで以下のコマンドを実行します。

npx create-react-app todo-app

Reactアプリが作成されたら、App.jsファイルを開き、以下のコードを追加します。

import React, { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const todo = e.target.elements.todo.value;
    setTodos([...todos, todo]);
    e.target.elements.todo.value = "";
  }

  return (
    <div>
      <h1>TODOアプリ</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="todo" placeholder="TODOを入力してください" />
        <button type="submit">追加</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

このコードでは、useStateフックを使用して、todosという名前の状態を作成しています。handleSubmit関数は、フォームが送信されたときに呼び出され、入力されたTODOをtodosに追加します。また、フォームの入力値をクリアしています。

フォームとTODOリストのレンダリングには、map
メソッドを使用して、todosの配列内の各要素をli要素にマップしています。

これで、Reactを使用してTODOアプリが作成されました！フォームにTODOを入力し、「追加」ボタンをクリックすると、TODOがリストに追加されます。

まとめ

Reactを使用してTODOアプリを作成する方法について説明しました。useStateフックを使用して、状態を追跡し、フォームの入力値を取得し、TODOをリストに追加しました。Reactを使用すると、複雑なUIを簡単に作成できるため、是非この記事を参考にして、Reactを学習してみてください！