名前も知らないSEでしょう

この木なんの木気になる樹

JavaScript

React関連の使い方を復習する/(1) create-react-app

更新日:

業務に使うわけでもなく、趣味でreact、react-redux、react-router、react-router-redux、それらのテストやJenkinsでのCIなど色々と触ってきたけど、動くものを作るところから入っていて基本を落としがちなので、復習というか備忘のために冬休みの宿題として記事を書いて行こうと思う。

最終的には、簡易カンバンのようなタスク管理ツールを作ることを目指しつつ、少しずつ積み上げていく。どこまでできるかは取れる時間次第。

この記事で触れること

アプリケーションの雛形を作る

react-create-appを利用します。
「create-react-app アプリケーション名」とすると、必要なパッケージを解決した雛形が出来上がります。

出来上がった雛形のpackage.jsonを見てみると、こんな感じです。

2017年12月時点で最新のパッケージが設定されていますね。試しにアプリケーションを起動してみる。

動いた。出来上がったファイルを見てみる。
div#rootにAppをマウントしている感じ。当たり前ですけど、いたってシンプル。

ビルドツールたちは内包されているようで、アプリケーションを起動した状態でファイルを修正すると自動的にリロードして反映されます。eslintによるコードチェックもしてくれているようです。

内包された設定を自分で編集できるようにするには、eject(取り出し)を実行すれば良いようです。
但し、不可逆な操作なので一度実行すると元には戻せないとのこと。

試しに実行して中身をみてみる。

「config」と「scripts」が生成されました。試しにwebpackの設定ファイルを開いてみると、eslintやらpolyfillやら色々と設定されているみたいです。今回のサンプルではカスタマイズするようなことはないので、ejectする前の状態で進めていくことにします。

私の開発環境はWebStromなので、gitignore.ioでWebStormの設定を生成して追加してコミットします。段階ごとにブランチを切っていく予定。
https://github.com/tnemotox/react-todo-training

あんまり書いていないけど、今日はここまで。
明日は純粋なReactでTodoを作るところまで進められると良いな。時間とれるかな。というか、作るサンプルの仕様を考えておかないと。

-JavaScript
-,

Copyright© この木なんの木気になる樹 , 2024 AllRights Reserved.