【Ubuntu22.04】React開発環境構築手順【React】

はじめに

以下にUbuntu22.04環境におけるReact開発環境構築手順を纏める。
Ubuntu22.04では2022年5月9現在、aptリポジトリのnodejsバージョンは12.22.9である。
本記事では最新版のnode.jsをインストールするための手順を含む。

「4. node.jsの最新版のリポジトリをインポート」 を実施しない場合は最新版のnodejsがインストールされないので注意する。

インストール手順

1. パッケージ一覧の更新

   $ sudo apt update -y
   

2. パッケージ更新

   $ sudo apt upgrade -y
   

3. curlのインストール

   $ sudo apt install curl -y
   

4. node.jsの最新版のリポジトリをインポート

   $ curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
   

5. nodejsのインストール (nodeとnpmを同時にインストールする)

   $ sudo apt install nodejs -y
   

6. yarnのインストール

   $ sudo npm install --global yarn
   

7. creat-react-appのインストール

   $ yarn global add create-react-app
   

8. 正常にインストールされていることを確認する。

   # node のバージョンを確認する
   $ node -v
   v18.1.0
   
   # npm のバージョンを確認する
   $ npm -v
   8.8.0
   
   # yarn のバージョンを確認する
   $ yarn -v
   1.22.18
   

新規プロジェクトの開始

1. アプリケーションの作成
   任意のディレクトリで下記コマンドを実行

   $ yarn create react-app ${アプリケーション名}
   

2. 作成したアプリケーションディレクトリ直下へ移動する

   $ cd ${アプリケーション名}
   

3. 下記コマンドを実行する。

   $ yarn start
   

4. ブラウザが起動し下記のReactのデモページが表示されれば成功。