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

はじめに

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

・create-react-appの環境構築

■ Reactに関する過去の記事はこちら
・ React入門#1 〜Reactの基礎知識〜
・ React入門#2 〜JSXについて〜

概要

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公式のインストールをコピー&ペーストして実行します。

Terminal

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

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

Terminal

brew -v

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

Terminal

Homebrew 2.6.1

③ nodebrewをインストール

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

Terminal

brew install nodebrew

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

Terminal

nodebrew -v

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

Terminal

nodebrew 1.0.1

⑤ nodeをインストール

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

Terminal

nodebrew install stable

No such file or directoryのエラーが表示された場合は、こちらの記事が参考になります。
・ Node.jsのインストールに失敗する時の解決策（No such file or directory）

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

Terminal

nodebrew ls

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

Terminal

hoge@hogenoMacBook-Air ~ % nodebrew ls
v14.14.0

current: none
hoge@hogenoMacBook-Air ~ %

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

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

Terminal

nodebrew use v14.14.0

⑧ nodeの確認

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

Terminal

nodebrew ls
v14.14.0

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

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

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

Terminal

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

⑩ nodeのバージョンを確認

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

Terminal

node -v

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

Terminal

v14.14.0

⑪ npmのバージョンを確認

Terminal

npm -v

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

Terminal

6.14.8

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

立ち上げ

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

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

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

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

Terminal

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

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

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

④ buildフォルダを作成する

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

Terminal

npm run build

⑤ ブラウザを起動する

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

Terminal

npm start

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

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

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アプリケーションの中身が書き換わります。

補足

・ create-react-appの環境構成

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

① src：コンポーネントを作るJSファイル

② public：htmlや設定ファイル

③ build：本番環境用のファイル

・ コマンド集

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

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

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

次の記事はこちら

React入門#4 〜コンポーネント間でデータの受け渡しと再利用をする〜