【駆け出し】Reactの導入【create-react-app】

create-react-app とは

Reactの開発環境を簡単に構築できるツールでReact開発元のFacebookが公式に公開しているツールだそうです。

create-react-appを使えるように設定

必要な条件はnodeとnpmがインストールされていることなのでここから設定していきます。

• homebrewをインストール
  　→すでにインストール済 homebrew -vで確認
• nodebrewをインストール

ターミナル

brew install nodebrew
nodebrew -v

• nodeをインストール

ターミナル

nodebrew ls-remote　　　　　　 すべてのバージョンを一覧表示
nodebrew install stable　　　 安定版をインストール
mkdir -p ~/.nodebrew/src　　　エラーが出たので実行
nodebrew ls バージョン確認
v14.5.0

current: none
nodebrew use v14.5.0
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile  シェルがzshの場合

ターミナルを再起動する
node -v
v14.5.0                     バージョンが表示されれば完了

• npmをインストール　→　nodeと一緒にインストールされている

ターミナル

npm -v
6.14.5

これでcreate-react-appを利用する準備ができました。ここから実際に導入していきます。

create-react-appの導入

ターミナル

cd projects   各自の開発環境に移動
npx create-react-app アプリ名
ｃｄ　アプリ名
npm start     ローカルサーバーが立ち上がります

localhost:3000

書いてあるとおり、この画面はApp.jsを書き換えると編集出来ます！
これでReactを動かせるようになりました。

参考になればLGTM頂けると嬉しいです！！