create-react-appの使い方
正直webpackだとかbabelだとかbrowserifyとか全くわからない。
そんなアホな僕にも使えるツール、それがcreate-react-app
reactの開発には基本create-react-app
とES6( ecmascript2015)だけあれば基本いいみたいだ。
そしてnpmはcreate-react-appと組み合わせるとまたすごくなる。
まずは適当なディレクトリでPowershellかterminalを開いて
create-react-app myapp
でappを作る。
cd myapp
npm start
でアプリのモックが表示される。
これを起点にアプリを作っていく。
構造はこんな感じになっている。
簡単に説明する。
. ├── node_modules ├── package.json ├── public ├── README.md └── src
重要なのはpackage.json
【package.json】
作ったアプリに対してどんなモジュールが必要だとか、スクリプトが出来るかとか、そういったことを定義するファイル。
このファイルに定義されていない限りたとえnpm install --global 【モジュール名】
でインストールされたモジュールだろうと読み込まれない。
【src(ディレクトリ)】
ここにアプリ本体を書いていく。最初にあるファイルたちは全部削除してOK
①必要なモジュールのインストール
必要なモジュールはmyappディレクトリでpowershellかterminalを開いて
npm install --save 【モジュール名】
で必要なモジュールをインストール出来る。ちなみに--save
オプションを付けておけばpackage.jsonに自動的に登録されてインポートできるようになるスゴイ
②テスト
npm start
でテスト出来る。ちなみにホットリロード式になっているのでセーブさえすれば即座に変更が反映される。スゴイ
③完成したアプリをアップロードできる形にする。
npm run build
でpublic
ディレクトリにアプリがパブリッシュされる。これをアップロードすればいいらしい。スゴイ
スゴイ。