create-react-appが素振りに最適なのだけど、電車の中などyarnで行いたい。
けど今のところ対応前なのでで、「create-react-app時にinstallはしない」、みたいなことも出来なそうなので、react-scriptsだけ美味しく使うことをやってみる。

今回は「start使えればいいや」ぐらいな気持ちなので、testなどは試していない。

1. 普段通りのプロジェクト作成

$ mkdir example-yarn-react
$ cd example-yarn-react
$ git init

npm init -yでもいいんだけど、せっかくなのでyarn使う

$ yarn init -y

2. 必要パッケージのinstall

react-scriptsを入れる。react-scriptという類似のパッケージがあるが、全く別物なので注意

$ yarn add --dev react-scripts --prefer-offline

reactとreact-domも入れる

$ yarn add react react-dom --prefer-offline

yarnさんも初回は時間がかかるのでじっくり待つ。。。

3. scripts部分を追加

package.jsonのscripts部分の追加。手打ちだけどしょうがない。
個人的には素振り目的なのでstartだけ入れる。

  "scripts": {
    "start": "react-scripts start"
  }

フルならこんな感じ。詳細はこのへん

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

4. 起動のためのpublic/index.htmlファイル準備

$ mkdir public
$ touch public/index.html

index.htmlの最低限はこのぐらいな感じ。

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

5. srcファイル準備

$ mkdir src
$ touch src/index.js

中身はこんな感じ

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>Hello</div>,
  document.getElementById('root')
)

6. 起動!!!

ここもせっかくなのでyarn使う

$ yarn start

起動した！

結論

めんどくさい！！旨味半減
旨味半減だけど、半分ぐらいは旨い。のでそんなに悪くはない
- webpack書かなくていいとかbabel設定しなくていいとかの部分で結構楽。
- budoセットアップするのより気持ち楽？ぐらい。
shell化するとかscript化するとかで改善できそうだけど、そこまでやる前に本体側が対応されそう

create-react-appでyarnしたいけど対応してないのでreact-scriptsだけ使う