React入門#3 〜create-react-appの環境構築〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・create-react-appの環境構築

■ Reactに関する過去の記事はこちら
・ [React入門#1 〜Reactの基礎知識〜](https://qiita.com/s79ns/items/271ec50a26949e902016)
・ [React入門#2 〜JSXについて〜](https://qiita.com/s79ns/items/da61ddd58e0ac0d2baf6)

## 概要

#### create-react-app
Reactの環境構築を簡単に行うことができるツールで、Reactの公式ドキュメントにも、Reactを学習するのに最適な環境と書かれています。

■ なぜcreate-react-appを使うのか

・ Reactの環境構築は難しい
・ トランスパイラのbabelやバンドラーのwebpackの設定が必要
→ create-react-appなら1コマンド実行するだけでOKです。

■ create-react-appに必要なもの

・ node 8.10以上
・ npm 5.6以上
→ node及びnpmのインストールに必要な、nodebrewをhomebrewを使ってインストールします。

## 手順

#### ① homebrewをインストール

[Homebrew公式](https://brew.sh/index_ja)のインストールをコピー&ペーストして実行します。

```terminal:Terminal
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

#### ② homebrewがインストールされているか確認

```terminal:Terminal
brew -v
```

インストールされていると、バージョンが表示されます。

```terminal:Terminal
Homebrew 2.6.1
```

#### ③ nodebrewをインストール

homebrewを使ってnodebrewをインストールします。（処理に時間がかかります）

```terminal:Terminal
brew install nodebrew
```

#### ④ nodebrewがインストールされているか確認

```terminal:Terminal
nodebrew -v
```

homebrew同様、インストールされているとバージョンが表示されます。

```terminal:Terminal
nodebrew 1.0.1
```

#### ⑤ nodeをインストール

安定版のnodeをインストールします。

```terminal:Terminal
nodebrew install stable
```

`No such file or directory`のエラーが表示された場合は、こちらの記事が参考になります。
・ [Node.jsのインストールに失敗する時の解決策（No such file or directory）](https://qiita.com/yn01/items/d1fa10dbe4850f7cd693)

#### ⑥ インストールしたnodeの確認

```terminal:Terminal
nodebrew ls
```

初めてnodeをインストールすると、currentがnoneになっています。

```terminal:Terminal
hoge@hogenoMacBook-Air ~ % nodebrew ls
v14.14.0

current: none
hoge@hogenoMacBook-Air ~ %
```

#### ⑦ インストールしたnodeのバージョンを指定する

今回の例では`nodebrew use v14.14.0`と指定して実行します。

```terminal:Terminal
nodebrew use v14.14.0
```

#### ⑧ nodeの確認

再度`nodebrew ls`を実行し、currentがuseで指定したバージョンになっている事を確認します。

```terminal:Terminal
nodebrew ls
v14.14.0

current: v14.14.0
hoge@hogenoMacBook-Air ~ %
```

#### ⑨ nodebrewでインストールしたバージョンを使う為、パスを通す

この状態ではnodebrewでインストールしたnodeがまだ使えませんので、下記コマンドを実行します。

```terminal:Terminal
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
```

#### ⑩ nodeのバージョンを確認

ターミナルを再起動後、`node -v`と実行します。

```terminal:Terminal
node -v
```

v14.14.0の様にバージョンが表示されていたら成功です。

```terminal:Terminal
v14.14.0
```

#### ⑪ npmのバージョンを確認

```terminal:Terminal
npm -v
```

nodeをインストールするとnpmもインストールされています。

```terminal:Terminal
6.14.8
```

以上で、create-react-appを使う準備が整いました。

## 立ち上げ

#### ① プロジェクトフォルダに移動

`cd`コマンドで、プロジェクトフォルダに移動します。

#### ② npxを使ってcreate-react-appを呼び出す

作成したいプロジェクトフォルダにReactの開発環境を作ります。（処理に時間がかかります）

```terminal:Terminal
npx create-react-app 作成したいプロジェクト名
```

#### ③ 作成したプロジェクトフォルダを使用しているエディタで開く

作成したプロジェクトフォルダをエディタで開き、エディタ内でターミナルを起動します。

#### ④ buildフォルダを作成する

本番環境に公開するフォルダを作成します。

```terminal:Terminal
npm run build
```

#### ⑤ ブラウザを起動する

create-react-appで作成した初期画面を表示します。

```terminal:Terminal
npm start
```

こちらが起動した画面の状態です。

![1718882ddcc9fc277086958a66d0eb26.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/a5526940-a885-08ca-852a-b5291187ed56.gif)

ロゴの下に`Edit src/App.js and save to reload`と書かれています。
試しにsrcフォルダ配下にある、App.jsというファイルの`Learn React`の文字に`!!`を足してみます。

```javascript:App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React!!
        </a>
      </header>
    </div>
  );
}

export default App;
```

`Let's Learn React!!`という表示になりました。
srcフォルダのファイルを編集することで、公開しているReactアプリケーションの中身が書き換わります。

![1436.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/87704a3b-87eb-86a3-e26e-5e573b7f544f.gif)

## 補足

#### ・ create-react-appの環境構成

大きく分けて3つのフォルダに分類されます。

① <font color="red">src</font>：コンポーネントを作るJSファイル

② <font color="green">public</font>：htmlや設定ファイル

③ <font color="blue">build</font>：本番環境用のファイル

#### ・ コマンド集

`npm run build`
srcとpublic内のファイルを1つにまとめて（バンドル）、buildディレクトリに出力します。

`npm start`
ローカルサーバーを起動してReactアプリを確認します。

`npm run eject`
babelやwebpackの設定を変更したい場合のみ使います。

## 次の記事はこちら
[React入門#4 〜コンポーネント間でデータの受け渡しと再利用をする〜](https://qiita.com/s79ns/items/3dcc4a5c20b78dd09c9d)