React入門 初心者でもCreate React App(create-react-app)で簡単に環境構築する方法
この記事では、Reactを始めたい人が簡単にReactの開発環境を構築できる方法をお伝えします。
この記事を読むことによって、Reactの環境構築がまずはできるようになります。
この記事を書いている僕は、フロントエンドのプログラマー(フリーランス)として、これまで4年ほどのWeb制作経験があり、Vue,React,Nuxtなどフロントエンドの開発を得意としています。
Reactは、公式のツール「Create React App」を使えば簡単にReact環境の構築ができるようになっています。今回はこの「Create React App」を使って簡単に環境構築ができる方法をご紹介します。
Reactの環境構築をする手順・方法
手順としては、①Node.jsを利用するのでインストールする必要があり、②「Create React App」などのパッケージをインストールして環境構築していきます。
1. Node.jsを使えるようにする
まずはNode.jsのインストールをします。既にインストールできていれば飛ばしてください。
今回は、nodenvを使って解説しています。別のNode管理ツールでも問題ありません。
「Create React App」を利用する際に、Node.jsは8.10以上のバージョンを利用するようにして下さい。
nodenvの使い方については別記事の「nodenv を使って Node.js を簡単にバージョン管理する方法 【.node-versionファイルで簡単に切替】」があるので必要に応じて参考にしてみてください。
nodenvのセットアップ手順を順番にしていきます。（不要な場合は次の項まで飛ばしてください）
nodenvのインストール
$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
$ cd ~/.nodenv && src/configure && make -C src
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
nodenvのプラグインなどをインストール
$ mkdir -p "$(nodenv root)"/plugins
$ git clone https://github.com/nodenv/nodenv-update.git "$(nodenv root)"/plugins/nodenv-update
$ nodenv update
$ git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build
nodenvでNode.jsをインストールします。今回は安定バージョンの12.18.3を使います。
$ nodenv install 12.18.3
※Vue-CLIではNode.js 8.9以上(8.11.0以上を推奨)としているので8.11.0以上を利用してください。
次に今回使うローカルのディレクトリ(ローカルで開発用の適当なディレクトリを用意してください)に移動します。
$ cd 【プロジェクトディレクトリ】
※例えばホームディレクトリのdevディレクトリ > vueディレクトリに作成するなら、「mkdir -p ~/dev/vue」でディレクトリ作成して「cd ~/dev/vue」で移動します。
バージョン12.18.3を指定します。（.node-versionというファイルができます）
$ nodenv local 12.18.3
これでNode.jsを使う環境が整いました。
2. yarnをインストールする
Node.jsでは標準のパッケージ管理システムのnpm(Node Package Manager)が用意されていますが、今回はFacebookが開発したyarnを利用するために、yarnをインストールして使えるようにします。
(インストール済みなら不要です)
Macの場合ならHomebrewを使います。詳細は公式に記載があります。
$ brew install yarn
※npmでのyarnをインストールする方法は非推奨になっています
3. Create React Appをインストールする
Create React Appをインストールしていきます。
$ yarn global add create-react-app
$ yarn global add create-react-app
yarn global v1.22.5
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-react-app@3.4.1" with binaries:
- create-react-app
✨ Done in 25.16s.インストールが問題ないかバージョン確認してみます。
$ create-react-app --version
$ create-react-app --version
3.4.14. Create React Appで環境構築する
Create React Appをインストールすると「「create-react-app」コマンドが使用できるようになり、「create-react-app 【プロジェクト名】」のコマンドだけでReactの環境構築ができるようになります。
今回は「my-app」という名前のプロジェクト名でReact環境を構築します。プロジェクト名は自由に決めて実行してみてください。
$ create-react-app my-app
$ create-react-app my-app
【中略】
We suggest that you begin by typing:
cd my-app
yarn start
Happy hacking!特に途中で設定項目などもなく、Reactの環境構築が完了します。
ReactのScriptsコマンド
構築された環境では、以下のコマンドにより実行ができるようになります。
$ yarn start
開発環境が立ち上がります。開発中はこちらで開発します。$ yarn build
本番用のビルドが出力されます。デプロイ用のファイルが出来上がります。$ yarn eject
webpackの細かい設定ができるようになるコマンドです。
▼package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},※ $ react-scripts eject
Create React Appでは、package.jsonのdependenciesなどで、jestのテストパッケージ以外は、「react」「react-dom」「react-scripts」の３つしか表示されていません。
このままだと、わかりづらく細かい複雑なパッケージ設定をすることが難しく、「react-scripts eject」を実行することによって、webpack、ESLintやBabelなど表示されるパッケージが増え、configディレクトリ内に設定ファイルが表示されるようになります。最初はこのあたりは気にしなくてよい部分です。
作成したプロジェクトのディレクトリに移動して、「yarn start」すると、localhost:3000で起動します。
$ cd my-app
$ yarn start
【中略】
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.xx.x:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
環境構築されたReact環境のファイル説明
ざっくりになりますが、ディレクトリ構成は以下のようになります。
my-app
└ node_modules
└ public
└ index.html
└ manifet.json
└ robots.txt
└ src
└ App.css
└ App.js
└ App.test.js
└ index.css
└ index.js
└ logo.svg
└ serviceWorker.js
└ setupTests.js
└ .gitignore
└ pakcage.json
└ yarn.lock- node_modules インストールされたnpmのパッケージが大量に入っています。このディレクトリを直接さわることは基本ありません。
- public ビルドされたファイルと組み合わされるファイル群
- public/index.html ベースとなるindex.htmlです
- public/manifet.json PWA開発する時に必要なファイル
- public/robots.txt クローラー向けの設定
- src ソースコードの格納ディレクトリです
- src/App.css App.jsから読み込まれるCSS
- src/App.js index.jsで読み込みされているJSファイル
- src/index.css index.jsで読み込まれるCSS
- src/index.js ビルド時に起点となって読み込まれるJSファイル
React Create Appで構築された環境のビルドや動作の流れ
ビルド時の流れを解説します。
$ yarn start や $ yarn build をした際に、「src/index.js」が起点となり、読み込まれます。
▼index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);- 「
import ReactDOM from 'react-dom';」でReactのDOMのメソッドが使えるようになります。 - 「
import App from './App';」でApp.jsを読み込んでいます。 - 「
ReactDOM.render」で「public/index.html」の「<div id="root"></div>」要素にAppのReact要素のレンダリングを行います。 - 「
React.StrictMode」タグはstrictモードで厳密なチェックがされて警告などがでます。開発モードでのみ動き、本番ビルドには影響を与えません。 - 「
import './index.css';」とCSSがJSに読み込まれていますが、css-loaderによって読み込みが可能となっています。
App.jsはfunctional component（関数コンポーネント）と呼ばれるものです。
▼App.js
import React from 'react';
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;「export default App;」でexport defaultしており、読み込んでいる「index.js」では、「function App() { 〜 }」のJSXがReact要素としてレンダリングされることになります。
まとめ
Reactの環境構築をCreate React Appで簡単に構築する方法を解説しました。
さらに基礎学習を進めたい人は、【React入門】 Reactを基礎から学ぶおすすめの勉強方法【初心者向け】の記事もぜひ参考にして見てください。僕がReact未経験からフリーランスでいきなりReactの案件に入れた時に勉強していた方法を紹介しています。
Reactの公式は以前は英語しかなかったのですが、最近は日本語対応した簡単なリファレンスもあるので学習しやすくなっており、これを見るのもよいと思います。
「Create React App」を使えば、「Create React App 【プロジェクト名】」で簡単にReactの開発環境を作ることができます。
ただ細かい設定をするには「react-scripts eject」をしてもう少し深く対応をする必要がある場合もあると思います。
Reactを始める時に環境の構築は挫折してしまうハードルのひとつです。
まずは環境構築は最低限できるようにしておき、Reactのコードをきちんと書けるようにすることが優先順位として高いと思います。
細かい設定などは必要に応じて勉強し、知識を増やしていけば問題ありません。
もしこの記事を読んで、難しいと感じる人は、JSFiddle や CodeSandbox などで簡単にReactを始めるのもオススメです。
ただ、個人的には今回紹介しているcreate-react-app にて実際のローカル環境を構築して学習を進める方が、実際の開発に則していてよいと思っています。
JSFiddleやCodeSandboxはReactに慣れた後に、ちょっと学修したことを試したいといった時に使うほうが好ましいと思います。
ちなみに今回構築した方法で、「react-scripts start」や「react-scripts build」で簡単にビルドができるのですが、僕の感覚だと実際の現場では、「react-scripts」ではなく直接webpackやその他のバンドラーを使いたい場合があり、Create React Appを利用せず、ビルドの構築をしていることも結構多い印象があります。
今回の環境構築をしたサンプルのGitHubリポジトリ
https://github.com/it-web-life/react_environment_setup
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています