Reactでtodoアプリを作ろう①：環境構築～コンポーネント作成

今回からReactの学習記録をスタートさせたいと思います。

Reactを選んだ理由は、以前作成した「ポモドーロタイマー」を
最終的にReact/Reduxにリプレイスするためです。

そのためには、React自体の理解が必須です。
まずは、簡単なアプリの作成を通して理解を深めていくことにしました。

※そもそも、なぜポモドーロタイマーをReact/Reduxにリプレイスしたいかというと
私が目指している企業の「求める経験」の中にReactが多かったためです。
Reactに合わせて、その周辺知識であるReact/Reduxまで理解しておきたく学習を進めています！

完成品イメージ

今回のアプリの完成イメージです。

完成品イメージ

タイトルと内容を分けて入力する仕様になっています。

環境構築

早速、環境構築から始めていきます。

今回は最も簡単にReactの開発環境を整えられる
「create-react-app」を用いることにしました。

//react-todoの部分は任意。お好きなプロジェクト名でOK
$ create-react-app react-todo
$ cd react-todo

ディレクトリ構成

アプリ作成に当たり、まずはディレクトリの構成を決めます。
今回は以下のように設定します。
（※不要なファイルは削除しています。）

 ．
┗node_modules/
┗public/
┗src/
　┗components/
  |　   |- App.jsx
  |　   |- Header.jsx
  |　   |- Form.jsx
  |　  ┗ ToDoList.jsx
  |-App.css
  |-index.js
 ┗ serviceWorker.js
.gitignore
package.json
package-lock.json
README.md

srcディレクトリにcomponentsフォルダを作成し
その中にコンポーネントを作成していきます。

Appコンポーネントを親コンポーネントとして
以下3つのコンポーネントを子として配置します。

Headerコンポーネント：タイトルの表示(stateless)
Formコンポーネント：ユーザー入力エリア(stateを管理)
ToDoListコンポーネント：入力したTodoを表示するエリア(stateを管理)
※Appコンポーネントはstateを管理

※今回スタイルにBootstrapを使用しています。
　Bootstrapを使用する際は、public>index.htmlの
　haed内にリンクを追加してください。

コンポーネントの作成

ディレクトリ構成と各コンポーネントの役割を決めたので、
まずはそれらに沿って、見た目を整えていきます。

Headerコンポーネント

タイトルを描画させるだけなので、コードはシンプルです。
タイトルの内容をAppコンポーネントからpropsで受け取っています。

//Header.jsx

import React from 'react';
import '../styles.css';

const Header = (props) => {
  return(
    <header className="toDo-header">
      <h1>{props.headerTitle}</h1>
    </header>
  );
}

export default Header;

Formコンポーネント

タイトル入力エリアはinput
内容入力エリアはtextareaで作成。

state更新のためのAddボタンをbuttonタグで作成し
全体をFormタグで囲っています。

classNameは独自のものとBootstrap由来のものが混在しています。

//Form.jsx

import React, {useState} from 'react';
import '../styles.css';

  return (
    <form className="toDo-form">
      <div className="toDo-form-title input-group">
        <div className="input-group-prepend">
          <span className="input-group-text">Title</span>
        </div>
        <input 
          type="text" 
          className="form-control shadow"
          />
      </div>
      <div className="toDo-form-detail input-group">
        <div className="input-group-prepend">
          <span className="input-group-text">Detail</span>
        </div>
        <textarea className="form-control shadow"
        ></textarea>
      </div>
      <div className="toDo-form-add">
        <button className="btn btn-success"
          type="submit" >
          Add
        </button>
      </div>
    </form>
  );
}

export default Form;

ToDoListコンポーネント

本来は入力したTodoリストが表示される部分ですが、
まだ追加・表示の機能を実装していないので分かる部分のみ記述しています。

//ToDoList.jsx

import React from 'react';
import '../styles.css';

const ToDoList = (props) => {
  return(
    <div className="toDo-list">
      <h1>Your Tasks: 0</h1>
      <div>
  　　//ここにTodoリストを表示するための記述をする
      </div>
    </div>
  );
}

export default ToDoList;

Appコンポーネント

3つの子コンポーネントをインポートしています。
※importとexport defaultは忘れがちなので注意。

現時点では、Headerのみにprops(タイトル)を渡していますが、
今後機能を実装していく中で、他のコンポーネントにも都度propsを渡していきます。

//App.jsx

import React, { useState } from 'react';
import '../styles.css';
import Header from './Header';
import Form from './Form';
import ToDoList from './ToDoList';

const App = () => {
  return(
    <div className="toDo-app">
      <Header headerTitle="To Do List Used By Hooks"/>
      <div className="toDo-app-body container">
        <div className="toDo-main">
          <Form />
          <ToDoList />
        </div>
      </div>
    </div>
  );
}

export default App;

まずは一旦これで、見た目が整いました。
現時点ではこのような状態になっています。

次回からは、この見た目を元に

Todoリストの追加などの機能を実装していきます。

↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック

kenjimorita.jp