環境構築
速攻環境構築 -Create-React-App-
Create-React-Appって？
Create-React-AppはReactを学習するのに快適な環境であり、ReactでSPAを作成するのに最適な方法です。
React ツールチェイン
ツールチェインって？
Reactを環境構築するツールとなります。環境構築はツールチェインを使う方法か使わない方法の2通りがあります。
仮に、使わない方法を選択した場合、以下を設定する工程が発生します...
- 大量のファイルとコンポーネントでスケールする
- npm を通してサードパーティライブラリを利用する
- よくある間違いを早期に発見する
- 開発環境で CSS と JS をライブ編集する
- 本番用の出力を最適化する
ツールチェインは始めるにあたって設定が不要です。
非常にありがたいです😎
Create-React-Appに必要な要件
- node.js 10.16以上
- npm 5.6以上
(解説)
node.js...サーバー環境で動くJavascript
npm...Node Package Manager の略
JavaScript 系のパッケージを管理するツール
ポイント☝️ 上記インストールのためにhomebrew、nodebrewが必要
(解説)
- Homebrew...MacOSのパージョン管理
- nodebrew...Nodeのパージョン管理
インストール手順
- Homebrewのインストール
- nodebrewのインストール
- nodeのインストール
- nodeの環境パスを通す
Homebrewのインストール
Homebrew
macOSのターミナルまたはLinuxのシェルプロンプトに貼り付けて下さい。
インストール後、バージョンを確認します。
brew -v
nodebrewのインストール
ポイント☝️ nodebrewをインストールするのにHomebrewが必要になる
brew install nodebrew
インストール終了後
nodebrew -v
そうすると、nodeのバージョンが表示されます。
nodeのインストール
nodebrew ls remote
バージョンが沢山出てきましたが、安定板のバージョンをインストールしましょう！
nodebrew install stable
インストール終了後、Installed seccessfullyが表示されれば成功です🥰
nodebrew ls
現在インストールされているnodeのバージョン一覧
nodebrew ls
インストールしたバージョンを使うには
nodebrew use 16.1.0 //あくまでも一例です。使いたいバージョンに合わせてインストールしてください。
nodeの環境パスを通す
ポイント☝️ 使うSHELLによってコマンドが異なる
echo $SHELL
- zsh(新しめのMac)
- bash(古めのMac)
zsh
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
bash
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
バージョン確認
- node.js 10.16以上
- npm 5.6以上を満たしているか確認しましょう。
node -V
npm -V
要件を満たしたら、開発環境に移動してCreate-React-Appを構築していきましょう！
いよいよ！Create-React-App
npx create-react-app フォルダ名
見事に環境を構築することが出来ました
以上がCreate-React-Appを使った環境構築でした。
大変だと感じた方は環境構築なしでWeb 上で試せるオンラインエディタあるみたいので試してみて下さい