React の環境構築

#目的
macOS上に React の開発環境を構築する

#環境情報
##OSバージョン
macOS Catalina(10.15.4)

#node.js & npm を install
以下にアクセスして ダウンロード & インストールを行う
※catalinaでは v12 は使用できないため v13 以上を使用すること
https://nodejs.org/ja/

npm install 時に permisson denied となってしまうため npm のデフォルトのディレクトリの権限を変更する

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

#[デモ]雛形を生成して起動確認をする
雛形を生成

npx create-react-app my-app

my-app を起動

cd ./my_app
npm start

以下の画面が表示されれば成功

#Chrome に React Devtools を追加する
ブラウザで React のコンポーネントツリーを調べることができる、 React Devtools を、以下のサイトから Chrome に追加する
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

「file://」のURLにも対応させるため chrome の 「設定」 => 「拡張機能」 => 「React Developer Tools の 詳細」 を選択し
「ファイルの URL へのアクセスを許可する」 を有効にする

Chrome の Devtools に 「Component」, 「Profiler」 タブが追加される