React.jsでToDoアプリを作ってみました

こんにちは。三橋です。

今回React.jsでお決まりのTodoアプリを作成する手順を載せていきます。

React.jsとはWebサイトやWebアプリのUIを作成するためのJavaScriptのフレームワーク内で機能するライブラリです。

React.jsにはCreate React Appという手軽に始められるツールがあります。今回それを使っていきます。

手順は以下になります。

• プロジェクト作成
• Appコンポーネントの作成
• TodoFormコンポーネントの作成
• TodoListコンポーネントの作成
• 実行する

プロジェクト作成

以下のコマンドでプロジェクトが作成されます。

npx create-react-app プロジェクト名

Appコンポーネントの作成

既存のApp.jsを変更し以下のようにします。

import { useState } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

let nextId = 0;

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

 const addTodo = newTodo => {
   nextId = nextId + 1;
   setTodos([...todos, { id: nextId, text: newTodo }]);
 }

 const deleteTodo = id => {
   setTodos(todos.filter(todo => todo.id !== id));
 }    

 return (
   <>
     <TodoForm add={addTodo}></TodoForm>
     <TodoList todos={todos} del={deleteTodo}></TodoList>
   </>
 );
}

export default App;

TodoFormコンポーネントの作成

TodoForm.jsとTodoList.jsを置くためのcomponentsフォルダを作成し、components配下にFormファイルを置きます。ファイル内は以下のように記述します。

import { useState } from 'react';

const TodoForm = ({add}) => {
 const [ newTodo, setNewTodo ] = useState('');

 const handleChange = event => {
   setNewTodo(event.target.value);
 }

 const addTodo = () => {
   if (newTodo === '') return;
   add(newTodo);
   setNewTodo('');
 }

 return (
   <>
     <h3>Todo List</h3>
     <input value={newTodo} onChange={handleChange} placeholder="Input here..." />
     <button onClick={addTodo}>add</button>
   </>
 );
}

export default TodoForm;

TodoListコンポーネントの作成

components配下にTodoList.jsを作成し、以下を記述します。

const TodoList = ({todos, del}) => {
 return (
   <>
     <h5>List</h5>
     <ul>
       {
         todos.map(todo => {
           return (
             <li key={todo.id}>
               {todo.text}
               <button onClick={() => del(todo.id)}>delete</button>
             </li>
           )
         })
       }
     </ul>
   </>
 );
}

export default TodoList;

最後に

実行してみます。

npm start

ブラウザでhttp://localhost:3000にアクセスするとアプリが起動するのが確認できればOKです。

株式会社クオリアシステムズでは一緒に働く仲間を募集しています