今年の 7 月にcreate-react-appがリリースされ、僕の観測範囲内ではかなり話題となりました。

昨晩、React コンポーネントの素振りを目的として初めて使ってみたのですが、なかなか便利だったので、素振り+GitHub Pages へデプロイするまでの作業メモです。

前提

あくまでcreate-react-appを Web アプリの開発用途としてではなく、React コンポーネントの素振りを目的として使います。そのため、詳しい使い方については触れません。

詳しい使い方については以下が参考になるかなと思います。

また、公式のドキュメントには GitHub Pages へのデプロイの他に Heroku なんかも記載されてますが、極々簡単に使いたいだけなので今回は特に触れません。

ざっくりと概要

  1. create-react-appをインストール
  2. create-react-appコマンドで環境構築
  3. React コンポーネントの素振り
  4. package.jsonのhomepageにデプロイ先の URL を設定
  5. gh-pagesのインストール
  6. npm scriptsへdeployを設定
  7. GitHub でgh-pagesの設定

create-react-app をインストール

create-react-appコマンドとして使いたいので、グローバルにインストールしちゃいます。

$ npm i -g create-react-app

インストールが終わって、以下のコマンドでバージョンが出力されるか確認しておきます。

$ create-react-app --version

素振り環境の構築

create-react-appコマンドが使えるようになったので、早速素振り環境を作ります。

# my-app という名前で作成
$ create-react-app my-app

# インストールが完了したらディレクトリへ移動
$ cd my-app

ここで既に諸々の準備が出来ているので、startでブラウザが開いて動作が確認できます。
設定いらずで簡単に React を試せる環境構築が出来て良い感じです。

$ npm start

あとはいつもどおり、$ npm installで必要なコンポーネントをインストールして、src/App.js辺りにコードを書くだけです。

ちなみに以下実行すると、buildディレクトリに最適化済みの静的ファイルが生成されます。

$ npm run build

デプロイ

素振りに満足したら GitHub Pages で動かしてみたいので、デプロイの設定をしていきます。
もし、まだ GitHub 上にリポジトリがなければ作っておく必要があります。

前準備

これは必須ではありませんが、やっておくと良いかもしれません。

  1. public/index.htmlの<title>タグ変更
  2. TODO

package.json の編集

GitHub Pages として公開する URL をpackage.jsonのhomepageに設定します。

package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "https://[username].github.io/[your-repository-name]"
  // ...
}

上記[]の中身は適当に変える必要があります。

npm scripts の編集

GitHub 上のリポジトリへ、gh-pages ブランチを作りそれを GitHub Pages として動作させます。
そこらへんをコマンド一発でやるためにgh-pagesを使うのでインストールしておきます。

$ npm i -D gh-pages

インストールが終わったら、scriptsへdeployを追加します。

package.json
{
  // ...
  "scripts": {
    // ...
    "deploy": "npm run build && gh-pages -d build"
  }
}

これで$ npm run deployを実行すると、buildが実行された後、gh-pagesブランチへbuildディレクトリ以下のファイルが push されるので、先にhomepageへ指定した URL で動作確認ができるようになります。

GitHub 上で gh-pages を GitHub Pages へと登録

リポジトリ > Settings > GitHub Pages を開き、Sourceからgh-pagesを選択してSaveすれば完了です。

まとめ

ほとんど公式のドキュメントに記載されている内容ですが、上記で簡単に React コンポーネントの素振りができました。

昨晩触ったきっかけですが、趣味リポジトリのnode_modulesをインストールしなおしている間(これがめっちゃ長い…)にさくっと触ったレベルですが、かなり短時間で気になっていたライブラリを触ってみることが出来ました。

素振りの他にも自作ライブラリの DEMO や動作確認なんかにも重宝しそうですね。

ただ、個人的にガッツリ開発するぞっとなった場合は、やっぱり一から設定していきたので、あくまで素振り+サンプルなんかに使っていきたいなという感じでした。