React npm init + react-scripts で react プロジェクトを作った時の罠

create-react-app 内で使われている react-scripts を使って必要な部分だけを自分で設定する react プロジェクトを作成することができます。
方法としては

1. 必要なパッケージのインストールとファイルの作成

$ npm init
$ yarn add -D react-scripts
$ yarn add react react-dom
$ mkdir public
$ mkdir src
$ touch public/index.html | touch src/index.js

2. package.json に npm-script を追加

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

これで yarn start とすれば create-react-app で作成したアプリと同じように react のプロジェクトが作れるという感じです。

`yarn start` で Uncaught SyntaxError: Unexpected token '<' になる事がある

GitHub のリポジトリと繋がった状態で npm init を行うと package.json 内に homepage という項目が作られてしまいます。
この項目があると yarn start した際に表示されるルートが localhost:3000 ではなく、 localhost:3000/<github_user_name>/<repository_name> と homepage の値のパスが採用されてしまい、src/index.js が読み込めず、 Uncaught SyntaxError: Unexpected token '<' のエラーになってしまうようです。

最初 URL を見てなくて、エラーの理由がなんもわからん…になってました

package.json の `homepage` の項目を削除する

解決方法は、上記の通り package.json にある homepage の項目を削除しましょう。
<完>

一応 create-react-app で作られた package.json を確認すると、homepage という項目はありませんでした。
npm init した後で remote に GitHub のリポジトリを設定するのが良さそうです。(最初のコミットは空コミットにしたい派なので、ﾁｮｯﾄ不便ﾀﾞｹﾄﾞ…)

[参考]