Yado_tech

旅館+ITとはなんぞ

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を作る。

f:id:devilmakelie:20180418102503j:plain

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 buildpublicディレクトリにアプリがパブリッシュされる。これをアップロードすればいいらしい。スゴイ


スゴイ。