React を用いたWebアプリ作成チュートリアル

1. はじめに

2019年3月15日に開催された社内ハンズオン「React 体験ハンズオン」での「React を用いたWebアプリ作成」について、自分への備忘録としてまとめてみました。ご参考になれば幸いです。

---

2. このスライドを見てできること

• React を用いたWebアプリ「Todoタスク追加＆削除」が作成できるようになる。

---

3. Node.jsのインストール

• Node.jsをインストールする。

---

4. npxコマンドのインストール

• npxコマンドをインストールする。

コマンドプロンプト

# npxコマンドの有無確認＆バージョン確認
$ npx --version

# npxコマンドのインストール
$ npm install -g npx

---

5. プロジェクトの作成

• npxコマンドを用いてWebアプリの雛形プロジェクト「todo」を作成する。

コマンドプロンプト

# 任意のフォルダに移動
$ cd

# 雛形プロジェクトの作成（5分程度かかる）
$ npx create-react-app todo

---

6. Webアプリの起動

• ローカル環境で作成した雛形プロジェクトを起動します。

コマンドプロンプト

# todoプロジェクトフォルダ内に移動
$ cd todo

# Webアプリの起動（自動でWebアプリサイトがブラウザに表示されます）
$ npm start

# yarnコマンドでWebアプリを起動する場合
$ yarn start

---

7. Webアプリの起動確認

• うまくいけばReactの雛形プロジェクトが起動します。
• 自動でブラウザが開かなかった場合は、手動でhttp://localhost:3000/にアクセスします。

---

8. Visual Studio Codeのインストール

• Visual Studio Codeをインストールする。

※任意のエディタソフトをお使い頂いて結構です。（ただし、文字コードUTF-8、改行コードLFの編集が可能なエディタソフトをお使いください。）

---

9. Todo.jsファイル新規作成

• todo/src/フォルダ配下にTodo.jsファイルを新規作成する。

Todo.js

import React from "react";

// Todo項目部品コンポーネント
export default function Todo({ todo, complete, index }) {
    // jsx記述
    return (
        <p>
            <button onClick={() => complete(index)}>レ</button> {todo.text}
        </p>
    );
}

---

10. TodoForm.jsファイル新規作成

• todo/src/フォルダ配下にTodoForm.jsファイルを新規作成する。

TodoForm.js

import React, { useState } from "react";

// Todoフォーム部品コンポーネント
export default function TodoForm({ add }) {
    const [value, setValue] = useState("");
    const handleSubmit = e => {
        e.preventDefault();
        if (!value) return;
        add(value);
        setValue("");
    };

    // jsx記述
    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={value}
                onChange={e => setValue(e.target.value)}
            />
            <input type="submit" value="追加" />
        </form>
    );
}

---

11. App.jsファイル修正

• todo/src/フォルダ配下のApp.jsファイルを修正する。

App.js

import React, { useState } from 'react';
import TodoForm from "./TodoForm";
import Todo from "./Todo";

// Webアプリ本体
function App() {
    // 初期表示のTodo項目
    const [todos, setTodos] = useState([
        { text: "食う" },
        { text: "寝る" },
        { text: "遊ぶ" }
    ]);

    // Todo項目の追加
    const add = text => {
        const newTodos = [...todos, { text }];
        setTodos(newTodos);
    };

    // Todo項目の削除
    const complete = index => {
        const newTodos = [...todos];
        newTodos.splice(index, 1);
        setTodos(newTodos);
    };

    // jsx記述
    return (
        <div>
            {todos.map((todo, index) => (
                <Todo key={index} complete={complete} index={index} todo={todo} />
            ))}
            <TodoForm add={add} />
        </div>
    );
}

export default App;

---

12. 「todo」Webアプリの確認

• Todo.jsファイル、TodoForm.jsファイル、App.jsファイルを保存すると、起動中のWebアプリが自動反映さます。 「todo」Webアプリが表示されたら完成です。

---

13. おわりに

React App学習の参考になれば幸いです。
ハンズオン開催してくださいました社内講師様、感謝いたします。

2019/03/16 TAKAHIRO NISHIZONO