ReactでTODOリスト（build）

ReactでTODOリスト（Vue.jsで作成したものをReactで作ってみる）

Reactのお勉強つづき。 以前にVue.jsのお勉強時に作成したTODOリストをReactで同じように作ってみます。 create-react-appで作成された App.js と App.css を編集して、出来上がったソースは以下にな...

iwjp.net

2018.09.25

昨日作成した上記TODOリストはlocalhostで動いていたので、WEB上に公開できるようにビルドを実施します。

実行コマンドは yarn run build 。

正常に終了すると、buildディレクトリに色々とファイルが出来上がるので、これらをまとめてWEB上に公開すればOKなはず。

ということで、いったん出来上がったindex.htmlをローカルで開いたところ画面が真っ白・・・。よく見ると読み込むJavascriptやCSSファイルのパスがルート（/）になっているのが原因のようです。。。

パスの問題を解決するため、packege.jsonファイルに「”homepage”: “./”」の1行を追加して再度ビルドしたところ正常に表示されるようになりました。

出来上がったのがこちら。

ちなみに、create-react-appで作成したアプリはデフォルトの設定を簡単に変更できないようになっているので、Webpack等の設定を細かく変更したい場合は、「yarn eject」コマンドを実行することで細かいconfigファイル等が表に見えるようになるようです。