##概要
Reactを使ってとりあえずHelloWorldをするための手順です。
環境構築を兼ねますので、さくっと環境構築として使えます。
この記事は「ReactでHelloWorldをしてみよう！」をすごくすごく参考にしています。Naoya Abeさんに感謝。
##ざっくり手順
1.Node.jsをインストールする
2.Yarnをインストールする
3.create-react-appをインストールする
4.create-react-appコマンドを実行する
5.yarn run start
##詳細手順
###1.Node.jsをインストールする
- Node.jsにアクセスしましょう。(2021年8月時点)
- 推奨版でOKです。
- ダウンロードして手順に従ってインストールしましょう。
####Node.jsとnpmがインストールされているか確認する
- Windowsキー＋R を押して「ファイル名を指定して実行」を開く。
- 「powershell」と入力しエンターを押して、PowerShellを開く。
- 「node -v」を入力してENT。
- 「npm -v」を入力してENT。
- バージョン情報が表示されればOK。
###2.Yarnをインストールする
- Windowsキー＋R を押して「ファイル名を指定して実行」を開く。
- 「powershell」と入力しエンターを押して、PowerShellを開く。
- 「npm install -g yarn」を入力してENT。
- インストールが完了した旨のメッセージが表示されればOK。
####yarn がインストールされているか確認する
- powershellに「yarn -v」を入力してENT。
- バージョン情報が表示されればOK。
####Pathを通す
- スタートメニューを押して、「kan」と入力し、「環境変数を編集」を押す。
- 「C:\Users\UserName\AppData\Local\Yarn\bin」をPathに追加する。
###3.create-react-appをインストールする
- Windowsキー＋R を押して「ファイル名を指定して実行」を開く。
- 「powershell」と入力しエンターを押して、PowerShellを開く。
- 「yarn global add create-react-app」と入力する。
###4.create-react-appコマンドを実行する
- 任意のディレクトリに移動する。「cd C:\reactProject」
- 「create-react-app test」を実行する。
###yarn run startコマンドを実行する
- 「cd test」で作成したプロジェクトに移動する。
- 「yarn run start」を実行する。
このコマンドを入力すると自動的にブラウザが表示されReactの画面が表示されます。