Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、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

created-folder.png

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

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

npm start

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

screenshot 2016-07-22 at 3.22.40 PM.png

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

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

Pasted_Image_7_22_16__3_25_PM.png

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

screenshot 2016-07-22 at 3.25.33 PM.png

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

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

Pasted_Image_7_22_16__3_37_PM.png

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

Pasted_Image_7_22_16__3_38_PM.png

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

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

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

{
  "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によると、裏側では以下のツールが使われているようです(公開当時)。

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

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

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

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

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

npm run eject

を実効すると、configscriptsディレクトリに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

箇条書きで書くと、

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

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

screenshot 2016-07-22 at 5.40.53 PM.png

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

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

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

screenshot 2016-07-22 at 5.50.13 PM.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした