環境構築

速攻環境構築　-Create-React-App-

Create-React-Appって？
Create-React-AppはReactを学習するのに快適な環境であり、ReactでSPAを作成するのに最適な方法です。

React ツールチェイン

ツールチェインって？
Reactを環境構築するツールとなります。環境構築はツールチェインを使う方法か使わない方法の2通りがあります。

仮に、使わない方法を選択した場合、以下を設定する工程が発生します...

ツールチェインは始めるにあたって設定が不要です。

非常にありがたいです😎

React 公式ドキュメント

(解説)
node.js...サーバー環境で動くJavascript
npm...Node Package Manager の略
JavaScript 系のパッケージを管理するツール

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

(解説)

Homebrew
macOSのターミナルまたはLinuxのシェルプロンプトに貼り付けて下さい。

インストール後、バージョンを確認します。

brew -v

ポイント☝️　nodebrewをインストールするのにHomebrewが必要になる

brew install nodebrew

インストール終了後

nodebrew -v

そうすると、nodeのバージョンが表示されます。

nodebrew ls remote

バージョンが沢山出てきましたが、安定板のバージョンをインストールしましょう！

nodebrew install stable

インストール終了後、Installed seccessfullyが表示されれば成功です🥰

nodebrew ls

現在インストールされているnodeのバージョン一覧

nodebrew ls

インストールしたバージョンを使うには

nodebrew use 16.1.0 //あくまでも一例です。使いたいバージョンに合わせてインストールしてください。

ポイント☝️　使うSHELLによってコマンドが異なる

echo $SHELL

zsh

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

bash

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

node -V
npm -V

要件を満たしたら、開発環境に移動してCreate-React-Appを構築していきましょう！

raised_hand

npx create-react-app フォルダ名

見事に環境を構築することが出来ました

以上がCreate-React-Appを使った環境構築でした。
大変だと感じた方は環境構築なしでWeb 上で試せるオンラインエディタあるみたいので試してみて下さい

React オンラインエディタ