Reactの環境構築まとめ

データアナリティクス事業本部　荒木です。 前々から興味のあったReactとJavaScriptに触れる機会があったので、環境構築の手順をまとめます。

環境

• Windows
• WSL2(Ubuntu 20.04.4 LTS)
• Node.js 16.17.0

作業内容

Node.jsインストール

1. cURLをインストール

   $ sudo apt-get install curl

2. nvmをインストール

   $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

   $ command -v nvm
   nvm

   command -v nvmを入力し、nvmが返ることを確認してください。

   cURL を使用してより新しいバージョンの NVM をインストールすると、古いものが置き換えられ、NVM を使用してインストールした Node のバージョンはそのまま残ります。 詳細については、NVM の最新リリース情報に関する GitHub プロジェクト ページを参照してください。

3. Node.js（LTSリリース）をインストール(実稼働アプリケーション用に推奨)

   $ nvm install --lts

4. 最新バージョンのNode.jsをインストール (最新の Node.js 機能と改善をテストするためですが、問題が発生する可能性が高くなります)

   $ nvm install node

   2つのバージョンのNode.jsがインストールされていることを確認します。

   $ nvm ls
   ->     v16.17.0
           v18.9.0
   default -> lts/* (-> v16.17.0)
   node -> stable (-> v18.9.0) (default)
   stable -> 18.9 (-> v18.9.0) (default)

プロジェクトに使用する Node.js のバージョンを変更したい場合、新しいプロジェクト ディレクトリを作成し、ディレクトリ内でnvm use nodeを入力して現在のバージョンに切り替えるか、nvm use --ltsを入力して LTS のバージョンに切り替えることができます。

yarnインストール

node.jsのデフォルトパッケージマネージャとしてnpmがありますが、今回はサードパーティのパッケージマネージャのyarnをインストールします。

$ sudo npm install -g yarn

-gオプションをつけることで、yarnがグローバルにインストールされるため、どこのパスにいてもyarnコマンドを使うことができます。

$ yarn --version
1.22.19

yarnがインストールされていることを確認します。

プロジェクトの作成

最後です。プロジェクトを作成し、Reactを動かしてみましょう。 任意のディレクトリを作成し、ディレクトリに移動し以下コマンドを実行します。

$ yarn create react-app [プロジェクト名]

プロジェクトに必要なパッケージやファイルが自動でインストールされます。インストールが完了したら、[プロジェクト名]ディレクトリに移動し、以下コマンドでサーバを動かします。

$ yarn start
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.31.33.24:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully

ブラウザで以下の画面が表示されればOKです！

ちなみにこの画面はプロジェクトの中の/src/App.jsを読み込んでいます。

/src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

上記の<p>Edit <code>src/App.js</code> and save to reload.</p>を<p>書き換えテスト</p>に変更し、再度yarn startを実行すると変更が反映されます。

最後に

以上がReactの環境構築でした。
環境構築しただけで、自分もまだコンポーネント？、JavaScript？、JSX？、はにゃ？って感じなので1から学んでいきたいと思います。

参考

Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする