1分でReactの開発環境を構築できる「Create React App」とは？ ｜ SiTest (サイテスト) ブログ

「今年、トレンドのReactを触ってみたい」と思っていても、まず開発環境を作らないといけないという障壁から、断念されるかたも多いのではないのしょうか？

開発環境の構築をすっ飛ばしてとりあえず触りたいですよね。

そこで今回はReactの開発環境を1分で構築できるFacebookが公開したビルド環境「Create React App」を紹介していきます。

開発と運用のための複雑な設定なしに
Reactを利用した開発が行えるビルド環境です。

後ほど説明しますが、Webpack, Babel ,ESLintといった技術が、
搭載されており、JSXやES6に対応しています。

他にもJavaScriptから直接イメージファイルやCSSのインポートが可能であり、CSSの接頭語自動付与などの機能も備えております。

それでは、手を動かしてみましょう。

ステップ1 npmで「Create React App」をインストールしてみよう！

「Create React App」はnpmで公開されているので、
下記のコマンドをたたくとインストールすることができます。

npm install create-react-app

すると、[node_modules]ディレクトリ内に
複数のファイルがインストールされますね。

ステップ2 Reactアプリ用ディレクトリを作成しよう！

こちらもワンコマンドで作成できます。

create-react-app <ディレクトリ名>

<ディレクトリ名>に指定した名前でディレクトリが
作成されます。

今回の例では、[react_app] とします。
コマンドをたたくと[react_app]ディレクトリが作成されましたね。

これで、開発環境の完成です!

ステップ3 Reactアプリを立ち上げよう！

cd react_app

のように作成したディレクトリに移動しておきましょう。

npm start

とすると、Reactアプリが立ち上がりましたね。

Reactアプリ立ち上げまでのコマンドをまとめると

npm install create-react-app
↓
create-react-app <ディレクトリ名>
↓
npm start

の3ステップでアプリを立ち上げれます。

srcディレクトリ内のApp.jsを編集してみてください、
リアルタイムでやテキストの変更が反映されます。

npm run build

とコマンドを打つと、
そのままアップすれば、公開できる
buildディレクトリを生成してくれます。

このように構築から立ち上げ、公開までを簡単に行なえます。

Create React App で構築環境にはどのようなツールが使われているのかを紹介していきます。

webpack

最適な形に作り変える為のツール（ビルドツール）です。
JadeをHTMLにコンパイルしてくれたり、
CoffeeScriptをJavaScriptにコンパイルしてくれたり、
画像やファイルをminifyしてくれたりもします。

Create React App ではES2016やJSXのトランスパイルなどで
使用されています。

webpack-dev-server

webpack用のローカル環境を用意してくれるツールです。

ローカルサーバーを起動してくれ、
ファイルを変更した際は検知して、ブラウザを自動的にリロードしてくれます。

Create React App の環境でファイルを変更した際に、
すぐに変更が反映されるのは、webpack-dev-server がウォッチしているからです。

style-loader

Javascriptのコード中でstylesheetをrequire出来るようにするツールです。

何が便利かというと、部品要素に必要なスタイルを、
必要な時だけ適用することができるので、
リクエスト数を減らすことができます。

Babel

ES6やES7, JSXをトランスパイルするツールです。

次世代のJavaScriptのES6やES7を使おうにも、
一部のブラウザがES5までしか対応してないことを考慮して、
開発されたのがBabelです。

Create React AppでES6やJSX(ES7は設定として未対応)を使用できるのは、
Babelが搭載されているからです。

ESLint

構文にミスがないかをチェックしてくれる静的検証ツールです。

特色としては、簡単に構文チェックをカスタマイズできるのと、
ES6, ES7, JSXの記法をサポートしていることです。

Create React Appでは、
ファイルを変更した際に、構文にミスがあると、
エラーメッセージをはいてくれます。

ES6, JSXをサポートしているESLintが搭載されているからです。

今回は「Create React App」を紹介しました。
いかがでしたでしょうか？

開発環境をすぐ構築して、
Reactアプリを開発していきましょう！