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

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

---
# 2. このスライドを見てできること
- React を用いたWebアプリ「Todoタスク追加＆削除」が作成できるようになる。

---
# 3. Node.jsのインストール
- [Node.js](https://nodejs.org/ja/)をインストールする。

---
# 4. npxコマンドのインストール
- npxコマンドをインストールする。

```shell:コマンドプロンプト
# npxコマンドの有無確認＆バージョン確認
$ npx --version

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

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

```shell:コマンドプロンプト
# 任意のフォルダに移動
$ cd

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

---
# 6. Webアプリの起動
- ローカル環境で作成した雛形プロジェクトを起動します。

```shell:コマンドプロンプト
# todoプロジェクトフォルダ内に移動
$ cd todo

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

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

---
# 7. Webアプリの起動確認
- うまくいけばReactの雛形プロジェクトが起動します。
- 自動でブラウザが開かなかった場合は、手動で[http://localhost:3000/](http://localhost:3000/)にアクセスします。

![React.jpg](https://qiita-image-store.s3.amazonaws.com/0/240522/62e52523-7f43-4301-784b-343e67295bbf.jpeg)

---
# 8. Visual Studio Codeのインストール
- [Visual Studio Code](https://code.visualstudio.com/download)をインストールする。

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

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

```javascript: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ファイルを新規作成する。

```javascript: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ファイルを修正する。

```javascript: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アプリが表示されたら完成です。

![Todo.jpg](https://qiita-image-store.s3.amazonaws.com/0/240522/0811aa86-203e-ff03-9137-cf3c41d7404d.jpeg)

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

2019/03/16 TAKAHIRO NISHIZONO