Reactの環境構築まとめ

Reactの環境構築まとめ

Clock Icon2022.09.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

データアナリティクス事業本部 荒木です。 前々から興味のあった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です! img1

ちなみにこの画面はプロジェクトの中の/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を実行すると変更が反映されます。 img2

最後に

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

参考

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

この記事をシェアする

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.