この記事の目的

現在Springを用いてポートフォリオを作成中なのですが、当初の予定ではフロントはThymeleafを用いて作成しようと考えていました。
しかし、モダンなフレームワークを使用したかったので、今回フロントはReactを用いて作成することにしました。
今回はその第一弾として、Reactを使用するために環境設定を行っていきたいと思います。

参考にした本

今回は以下の本を読みながら開発を進めます。

手順

Nodeのインストール
VS Codeのインストール
create-react-appのインストール

1. Nodeのインストール

NodeはJavaScriptの実行環境です。この環境があるとJavaScriptでバックエンドの開発を行えます。
Reactを始めとする近年のフロントエンド開発ではNodeが必須です。

LTSとCurrentの2つがありますが、LTSをダウンロードします。

インストールの細かな設定に関しては以下の記事を参考にしてください

設定が全て終了した後、一度再起動してコマンドプロントでNodeとnpmのバージョンを確認すると現在のバージョンが表示されます。
バージョンが表示されていれば、上手くインストールできています。
(確認するためのディレクトリはどこでも大丈夫です。下記コードではダウンロードフォルダでコマンドを入力してあります)

C:\Users\xxxxx\Downloads>node -v
v18.15.0

C:\Users\xxxxx\Downloads>npm -v
9.5.0

nmpとはNode Package Managerの略であり、パッケージやダウンロードの管理り使用されます。

2. VS Codeのインストール

エディターはVS Codeを使用します。
下記からインストールします。現時点で必要な拡張機能は特に必要ないようです。

3. create-react-appのインストール

Reactは開発元であるFacebookが基本的な設定を全て済ませたスターターキットを用意しており、それがcreate-react-appと言うものです。
これを使用すればReact開発を直ぐに進められます。
コマンドを入力し、インストールしたいディレクトリに移動します。今回はダウンロードフォルダに移動します

C:\Users\xxxxx>cd downloads

その後、npxから始まる以下のコマンドを入力します。

C:\Users\xxxxx\Downloads>npx create-react-app react-corona-tracker-app

最後にインストールが完了すると以下のようなコマンドが出力されます。

Success! Created react-corona-tracker-app at C:\Users\xxxxx\Downloads\react-corona-tracker-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-corona-tracker-app
  npm start

Happy hacking!
npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.1
npm notice Run npm install -g npm@9.6.1 to update!
npm notice

この後、YesかNoを選択するメッセージがでる場合があるのですが、その場合Yesを表す「y」を入力します。

ダウンロードフォルダ内に以下の画像のようなreact-corona-tracker-appフォルダが作成されます。

最後にVS Codeを開きファイル > ファルダを開くをクリックし、ダウンロードフォルダ内にあるreact-corona-tracker-appフォルダを選択します。
以下のようにVS Code内で開けていれば成功です。

追記（Macユーザー向け）

node.jsをインストールし、ファイルをVS　Code上で開いたと思いますが、新たにyarn(npmコマンドのFacebookによる改良版)と呼ばれるパッケージマネージャーのインストールを行います。

xxxxx@xxxxx ~ % sudo npm install -g yarn

ポイントは入力するコマンドの前にsudoと入力することで管理者状態で入力することができます。
こうすることでyarnをインストールすることができます。

Reactの環境設定を行う