環境構築
- node ver8.10以上
- npm ver5.6以上
- homebrew,nodebrewのインストールが必要。
nodebrew(node,npmも)のインストール
- nodebrewをhomebrewを使ってインストール。
> brew install nodebrew
- nodebrewのバージョン情報確認。
> nodebrew -v
- 利用できるnodebrewnのバージョンを確認。
> nodebrew ls-remote
- nodebrewの安定バージョンのインストール。
> nodebrew install stable
- 現在インストールされているバージョンの確認。
> nodebrew ls
- 使用するバージョンを指定。
> nodebrew use (バージョン)
- PATHの記述
> echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
これでnodeとnpmもインストールされる。
> node -v
> npm -v
バージョン情報が出れば成功。
- 環境構築コマンド入力。
> npx create-react-app-(ファイル名)
実際に動かしてみる。
- 本番環境のディレクトリを作成、このタイミングでバンドルやトランスパイルも行う。
> npm run build
- webページの立ち上げ。
> npm start
- babelやwebpackの設定を変更したい場合のみ使用。
> npm run eject
ディレクトリの説明
- src: コンポーネントを作るjsファイルがある。
- build: 本番環境用にバンドルされたディレクトリ。
- public: htmlファイルや設定ファイルがある。
バンドル: srcとpublicのファイルを一つのファイルに纏める。
何故 create-react-appで環境構築するのか？
トランスパイラのbabelやパンドラーの設定はとてもムズイらしいので、取り敢えずReactを使ってみたいと言う人はcreate-react-appで構築した方が良い。