データアナリティクス事業本部 荒木です。 前々から興味のあったReactとJavaScriptに触れる機会があったので、環境構築の手順をまとめます。
環境
- Windows
- WSL2(Ubuntu 20.04.4 LTS)
- Node.js 16.17.0
作業内容
Node.jsインストール
- cURLをインストール
$ sudo apt-get install curl
-
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 プロジェクト ページを参照してください。
- Node.js(LTSリリース)をインストール(実稼働アプリケーション用に推奨)
$ nvm install --lts
-
最新バージョンの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から学んでいきたいと思います。