Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する

新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。

## :hash: React.jsのひな形を簡単に作れる`create-react-app`が公開されました (2016/07/22)

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Launching create-react-app, a no config getting started experience, <a href="https://twitter.com/hashtag/nomorejsfatigue?src=hash">#nomorejsfatigue</a> <a href="https://t.co/fqVWgn7w5t">https://t.co/fqVWgn7w5t</a></p>&mdash; React (@reactjs) <a href="https://twitter.com/reactjs/status/756519871949770757">July 22, 2016</a></blockquote>

Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、`create-react-app`を公開しました。

- 公式ブログ記事: "[Create Apps with No Configuration](https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html)"
- GitHub: [`facebookincubator/create-react-app`](https://github.com/facebookincubator/create-react-app)

React.jsで「本格的な」アプリを作る際はWebpackやBabelなどの設定をいじる必要があり、導入障壁が高かったのですが、`create-react-app`を使えばそれらのステップをすっ飛ばせます。さっそく使ってみましょう。

## :hash: 導入方法

### :hash::hash: `create-react-app`コマンドをインストールする

注: Node.js (version 4以上)がインストールされている必要があります。

```
npm install -g create-react-app
```

### :hash::hash: `create-react-app`コマンドでアプリを作成する

以下のコマンドを実行すると、新しく`hello-world`ディレクトリが作られ、React.jsアプリに必要なファイルがコピーされます。このときに`npm install`が実行され依存パッケージが全てインストールされるため、少々時間がかかります。

```
create-react-app hello-world
```

<img width="536" alt="created-folder.png" src="https://qiita-image-store.s3.amazonaws.com/0/9504/40027f05-3df2-7dda-65a1-173816312cad.png">

### :hash::hash: サーバーを開始する

`hello-world`ディレクトリに行き、

```
npm start
```

を実行するとサーバーが起動し、`http://localhost:3000`を開けばアプリを見ることができます。

![screenshot 2016-07-22 at 3.22.40 PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/62cde5ce-3f8c-c447-f93b-36c43fa8a33f.png)

### :hash::hash: ファイルを触ってみる

試しにファイルを編集してみましょう。`src`ディレクトリの中にある`App.js`を開き、`Welcome to React`という文字を`Reactへようこそ`に変えて保存します。

![Pasted_Image_7_22_16__3_25_PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/233c82f2-682e-da29-2092-676ef07653f1.png)

そしてブラウザを更新すると、変更が反映されていました。

![screenshot 2016-07-22 at 3.25.33 PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/32fcde02-def5-2b11-3130-fcc7cec3e18d.png)

### :hash::hash: 構文チェックもしてくれます

かりに間違って、`logo`ではなく`log`とタイポしてしまったとします。

![Pasted_Image_7_22_16__3_37_PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/557a0353-17b3-acf8-bec2-b34d75f85b66.png)

すると、`npm start`を実行したターミナル画面で警告が表示されます。

![Pasted_Image_7_22_16__3_38_PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/8003a625-aa1b-f806-1671-71e32ca65a2f.png)

構文チェックのために、裏側で`eslint-loader`が使われているようです。ただ、「Reactでバグが起こりやすい間違い」コードだけが構文チェックの対象になっており、「こういう書き方をしなければいけない」という所謂opinionatedなチェックはあまりないようです。

### :hash::hash: package.jsonの依存もシンプル

依存するパッケージが`react`と`react-dom`と`react-scripts`のみなので、多くのパッケージを管理する必要がありません。

```json
{
  "name": "hello-world",
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  },
  "devDependencies": {
    "react-scripts": "0.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}
```

### :hash::hash: 公開用のファイルを出力する

作ったアプリを公開するにはどうすれば良いのか?まず、

```
npm run build
```

を実行します。すると、`build`ディレクトリに`index.html`とCSS、JS、ソースマップファイルが保存されます。これらを静的ファイルを返してくれるサーバーに配置すればOKです。GitHub Pagesにデプロイするのが一番簡単かもしれません。

ちなみに、`build`ディレクトリの中の`index.html`ファイルを直接開いても何も表示されませんので、ローカルで静的ファイルサーバーを立ち上げる必要があります。`build`ディレクトリで以下のコマンドを実行してみてください。

```
cd build # buildディレクトリに移動
npm install -g http-server
hs
open http://localhost:8080
```

## :hash: 裏では何が使われているの?WebpackやBabelのカスタマイズは?

[README](https://github.com/facebookincubator/create-react-app)によると、裏側では以下のツールが使われているようです(公開当時)。

- [webpack](https://webpack.github.io/)、[webpack-dev-server](https://github.com/webpack/webpack-dev-server)、[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)、[style-loader](https://github.com/webpack/style-loader)
- [Babel](http://babeljs.io/) (ES6/ES2015)
- [Autoprefixer](https://github.com/postcss/autoprefixer)
- [ESLint](http://eslint.org/)

### :hash::hash: (公開時点で)入ってないもの

- サーバーサイドレンダリング
- テスト用のスクリプト
- ES7が使えるようになるBabelの設定
- LESS, Sass, CSS Modules
- ホットリロード

### :hash::hash: カスタマイズするには

裏側で使われているWebpackやBabelの設定をカスタマイズしたい場合、

```
# 注意: これをやると元に戻せません。

npm run eject
```

を実効すると、`config`と`scripts`ディレクトリにBabelやWebpackの設定ファイルが書き込まれます。(**注意: 一度これをやると元に戻せません**ので、どうしてもカスタマイズが必要なときだけに実行しましょう。)

```
├── config
│   ├── babel.dev.js
│   ├── babel.prod.js
│   ├── eslint.js
│   ├── flow
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── ...
├── package.json
├── scripts
│   ├── build.js
│   ├── openChrome.applescript
│   └── start.js
```

また、`package.json`も、いままでは`react-scripts`だけに依存していましたが、それが裏側で使われているnpmパッケージに置き換えられます。

## :hash: どうして`create-react-app`が作られたの? (公式ブログより意訳)

![screenshot_2016-07-22_at_3_11_33_PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/5f463320-9035-3f3f-2396-5ab549486dd9.png)

箇条書きで書くと、

- 今までのフロントエンドフレームワークは生のJSで書いても問題なかったが、ReactはJSXやES6(ES2015)を使うことが推奨される
- JSXやES6を使うにはBabelやWebpack、ESLintなどのツールが必要不可欠なので、学習コストが増加した。どのパッケージを入れればいいか悩んだり、依存管理が面倒になるなど、「Reactを使うことによるJS疲れ (JavaScript Fatigue)」が問題になる。参考記事: [フロントエンドへの複雑化について、一つの視点](http://mizchi.hatenablog.com/entry/2016/04/11/185914)。Reactのスターターキットも乱立し、「どうやってReactのプロジェクトを始めればいいか分からない」という開発者が続出。
- React.js開発元のFacebookは、いままで「Facebook内で使われているReact周りのツールやライブラリ」しかリリースしてこなかった。Facebook社内では既にReactの設定周りが構築されていたため、「Reactを使いはじめるコストが高い」という問題にFacebookは積極的に取り組んでこなかった。
- しかし、最近になってFacebookもそのスタンスを少し改めるようになったらしく([参考リンク](https://github.com/facebook/react/pull/7292))、Facebook内では必要とされてなくてもコミュニティーで必要とされているツールもリリースするようになったらしい。`create-react-app`はその一つだそう。

けっきょく、`create-react-app`はリリース後数時間で1500スターを突破しました。ぼくが投げたPRも一瞬でマージされました。感謝です。

![screenshot 2016-07-22 at 5.40.53 PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/6c8cc80c-e26e-f35d-e8d9-7a4c66ee4ab5.png)

## :hash: ありがとうございました

リツイートしてくださると嬉しいです。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="ja" dir="ltr">今日リリースされたライブラリについて日本が朝になるまでに書きました。🔰  Qiita初投稿です。/ Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する <a href="https://twitter.com/Qiita">@Qiita</a> <a href="https://t.co/sAeTYb9NL0">https://t.co/sAeTYb9NL0</a></p>&mdash; Shu Uesugi (@chibicode) <a href="https://twitter.com/chibicode/status/756635942518001665">July 22, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

開発者のAbramov氏にもリツイートされました。

![screenshot 2016-07-22 at 5.50.13 PM.png](https://qiita-image-store.s3.amazonaws.com/0/9504/1d176abe-cf51-882c-2f81-cdfca2bd1451.png)