Reactの社内勉強会をした際の開発環境の構築手順です
Reactのプロジェクト作成して、sample画面の成果物作成まで行います
インストール
VisualStudioCodeのインストール
React開発するためのエディタいれます
公式からダウンロードしてインストール
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Node.jsのインストール
webpackとか動かすため、インストールします
パッケージマネージャのnpmも一緒にインストールされます
https://nodejs.org/ja/
node,npmのバージョン確認でインストール確認
node -v
npm -v
npm、npxについて軽く知っておく
cowsayって牛がしゃべるだけのパッケージをインストール・実行して、
npx、npmについて軽く知っておきましょう
npx
マシンにインストール残さずにスクリプト実行する
npx cowsay aaa
カレントディレクトリにも、グローバルインストール先のディレクトリにも何もインストールされません
npm（ローカルインストール）
カレントディレクトリにインストールしてスクリプト実行
カレントディレクトリにインストール（オプションつけずデフォルトはローカルインストール）
npm install cowsay
カレントディレクトリに、cowsayがインストールされます
cowsayを実行
.\node_modules\.bin\cowsay "aaa"
実行エラーでたら、PowerShellの権限の問題かも
https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750
npxはローカルにパッケージがあれば、インストールせずに、スクリプト実行するので、
ローカルインストール済の状態でcowsay実行すると、インストール走りません
アンインストール
npm uninstall cowsay
npm（グローバルインストール）
グローバルのインストール先
Unixベースのシステム：/usr/local/lib/node_modules/
Windows：C:¥Users¥%USERNAME%¥AppData¥Roaming¥npm¥node_modules
グローバルにインストール（-gオプションつける）
npm install cowsay -g
グローバルに、cowsayがインストールされます
カレントディレクトリには何もインストールされません
cowsayを実行（パスも通っている）
cowsay "aaa"
アンインストール
npm uninstall cowsay -g
Reactプロジェクト作成
create-react-appでプロジェクト作成
npxでcreate-react-appをスクリプト実行すると、
React開発用のプロジェクトが作成されます
作成されたプロジェクトをみてみる
- node_modules
ローカルインストールパッケージが保存される - public
htmlなどのWeb公開する資産が入っている
index.html - package.json
プロジェクトの設定ファイル
依存するパッケージやnpm実行するスクリプトなどが記載されている - .gitignore
- src
Reactのプログラム等が入ってます
起動しアクセスしてみる
create-react-appにはローカル実行の機能もついています
npm startでローカルの3000番portで実行されます
http://localhost:3000/ にアクセスしてみてください
npm startで実施される内容は、
package.jsonのscriptsに記載されています
react-scriptsってモジュールのstartを実行しています
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Edit src/App.js and save to reload.って書いてあるので、
App.jsを修正したりしてみてください
buildし、成果物を作成してみる
create-react-appはwebpackを使用してbuild処理をしています
隠れているので意識する必要はありません
npm run buildを実行します
Reactで書かれたApp.js等がbuildされWeb公開用の成果物が作成されます
buildって何しているの？は↓が参考になりました（webpackの話だけど）
https://www.slideshare.net/ssuser46977e/webpack-why-cant-you-understand-the-webpack
buildフォルダが作成され、buildフォルダ下に成果物が作成されます
この成果物をWebサーバに配置して、作成したページがWeb公開できます