React環境構築

環境構築

create-react-app

必要なもの

• node 8.10以上
• npm 5.6以上

上記インストールのためにhomebrew、nodebrewが必要

homebrewのインストール

nodebrewのインストール

$ brew install nodebrew
$ nodebrew -v // インストールの確認

nodeのインストール

参考：https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

$ nodebrew ls remote // インストール可能なnodeのバージョン確認
$ nodebrew install stable // 安定版のインストール
$ nodebrew ls // 現在インストールされているnodeのバージョン一覧
$ nodebrew use v{インストールしたバージョン} // currentへの追加
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile // zshの場合

npmのインストール

nodeを入れた時点でnpmも入る
バージョンが5.6以上であることを確認する

npm -v

create-react-appによるプロジェクトの作成

$ npx create-react-app react-blog-app

create-react-appとは

React開発環境を超簡単に構築できるツール。
Reactを学習するのに最適な環境
(React公式documentから引用)

• React開発環境の構築は難しい
• トランスパイラのbabelやバンドラーのwebpackの設定が必要

create-react-appなら1コマンドで環境を整えてくれる

create-react-appの環境構成

1. src : コンポーネントを作るJSファイルなど
2. public : htmlファイルや設定ファイルなど。manifest.jsonはPWAを開発する際に使用する設定ファイル
3. build : 本番環境用のファイル

基本コマンド

$ npm run build

srcとpublic内のファイルを1つにまとめて（バンドル）、buildディレクトリに出力する

$ npm start

ローカルサーバを起動してReactアプリを動かす

$ npm run eject

babelやwebpackの設定を変更したい時に使用する

その他の環境構築ツール

• Next.js → サーバーサイドレンダリング（SSR）
• Gatsby → 静的ウェブサイトに最適（SSG）