Reactチュートリアルをcreate-react-appの形式に合わせて焼きなおす

動機

Reactチュートリアルをやってみたのですが、このチュートリアルはあまり主流ではないセットアップのようでした。
この記事やこの記事を読んでいるとcreateClassに頼らずにES6のclass構文を使って書くのがナウでヤングな書き方のようなのです。

しかし、BabelとかWebpackとかの事前準備がめんどくさい…と思っていたら最近create-react-appという便利なジェネレーターの存在を知りました。

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

package.jsonに書く依存も少ないしこれは良い。しかし、チュートリアルとあまりに様相が違うので戸惑いました。

ということで、チュートリアルを書きなおしてみました。

ポイント

プロジェクトの雛形を作る

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

$ npm install -g create-react-app

雛形作成

$ create-react-app react-sample

作られたもの

react-sample/
├── README.md
├── node_modules
│   ├── react
│   ├── react-dom
│   └── react-scripts
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

react-scriptsというのがBabelやWebpackをいい感じに内包しています。

package.json

{
  "name": "react-sample",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.6.0"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

npm startですぐさま簡易サーバーが立ち上がり、 http://localhost:3000 で確認可能。もちろんトランスパイルも行われます。

成果物を生成する場合はnpm run buildで./buildディレクトリにトランスパイルされたものが一式生成されます。

./build

./build
├── favicon.ico
├── index.html
└── static
    ├── css
    │   ├── main.9a0fe4f1.css
    │   └── main.9a0fe4f1.css.map
    ├── js
    │   ├── main.e0161bce.js
    │   └── main.e0161bce.js.map
    └── media
        └── logo.5d5d9eef.svg

minifyもされています。いいですね。

class定義にして移植する

ちまちまとcreateClassで書かれているものをclass構文で書きなおして移植します。
下記の記事が詳しいのですが、主に以下の部分をちょこちょこっと書き直しました。

• stateの扱い方
• thisの問題
• jQueryのajaxでやっていたところをaxiosに置き換え

See: ES5のReact.jsソースをES6ベースに書き換える

APIサーバーを作る

チュートリアルではexpressで、APIもフロントも同居した形になっています。
しかし、react-scriptのstartではこれができません。
このあたり記述があるのですが、別途APIサーバーを起動する必要があります。

ただ、別途サーバーを立てるとCORSがめんどくさいのでproxy機能を使ってこうするとよかろうというようなことが書いてありました。

See: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

ということで、チュートリアルよりserver.jsをつまんで来て別途npmプロジェクト化したのがこちらです。

おまけ docker-composeで一発で起動できるようにする。