【React】Voltaを使って、node.jsのインストール & Reactの環境構築をする方法
Reactを習い始めたので、
最近人気らしいバージョン管理ツール「Volta」を取り入れながら、
ゼロからReactの環境を構築、
画面を表示するまでの方法を備忘録としてメモしていきます。
Reactをはじめるまでの手順
- 1 Voltaのインストール
- 2 Node.jsのインストール
- 3 Reactファイルの作成と起動
- 4 Reactファイルの編集
Voltaのインストール
Volta(公式サイト)は、Javascriptのバージョン管理をするためのツールです。
OSも関係なく使えるようで、シンプルでわかりやすそうなので、
今回、Node.jsを管理するためのツールとして、先に導入します。
(使うに当たって、macに入れていたnodebrewなどの管理ツールは先に削除しました。)
1: Voltaをインストール
下記コマンドを、Terminal (Macの場合)に記入します。
// Voltaのインストール
curl https://get.volta.sh | bash
2: voltaのインストールを確認
ダウンロードされたら、ターミナルを再起動して、
確認のために下記コマンドいずれかを入れてみて、
インストールしたバージョンが出るか確認します。
//voltaのバージョンを確認
volta -v
//ツール一覧を表示して確認
//デフォルトに設定したvoltaのツール一覧を表示
volta list
//デフォルトに設定した以外のツールも含めて、voltaのツール一覧を表示
volta list all
Node.jsのインストール
1: Voltaから、Node.jsのインストール
Voltaの用意ができたので、そこから下記コマンドを入れて、Node.jsをインストールします。
//LTS(安定版)インストール
volta install node
//最新版インストール
volta install node@latest
//特定のverのインストール
volta install node@14.15.5
ちなみに、volta installを実行すると、インストールが行われるのと同時に、
自動的にそのバージョンが、
デフォルトで使うNode.jsのバージョンになります。
すでにインストール済みのバージョンの場合、
volta installを実行すると、インストールは行われず
デフォルトで使うバージョンがそのバージョンに切り替わります。
Node.jsがきちんと入っているか、下記のコマンドからバージョン確認ができます。
//node.jsのバージョンを確認
node -v
2: パッケージマネジャーのインストール
必要に応じて、パッケージマネジャーのツールをインストールします。
//yarnインストール
volta install yarn
//npmインストール
volta install npm
//特定のバージョンのインストール
volta install tool名@version
node.js インストール時に、デフォルトでnpmもインストールされるので、特にバージョンをこだわる必要がなければ、そのまま使えはするようです。
//npmのバージョンを確認
npm -v
Reactファイルの作成
1: Reactのプロジェクトを作成
今回、Reactを扱うためのフォルダを、デスクトップに作成することにします。
フォルダ名は任意ですが、大文字だとエラーがでるので、小文字にします。
//デスクトップに移動
cd desktop
//Reactのプロジェクトを開始
npx create-react-app my-app(任意の名前)
上記をTerminalで入れると、Reactプロジェクトの一式が入ったフォルダ「my-app」が
デスクトップにできます。(React公式サイトによると、このコマンドを使うためには、
Node が14.0.0以上、npmが5.6以上のバージョンが必要のようです)
2: Reactのプロジェクトを起動
やっと準備ができたので、Terminalにコマンドを入れて、プロジェクトを実行します！
//作ったフォルダに移動
cd my-app(先ほどのフォルダ名)
//ローカル環境でプロジェクトをスタート！
npm start
実行すると、下記のような表示がブラウザにでます。
また、ブラウザから、http://localhost:3000/ といれてもアクセスが可能です。
Reactファイルの編集
先ほどの「my-app」(もしくは任意のフォルダ名)のsrcフォルダを開いて、
フォルダの中身をすべて消し、index.jsとapp.jsを下記の内容で新しく作成します。
app.jsのファイル
import React from 'react';
//コンポーネントを用意
const App =()=>{
return(
<>
<h1>Hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt laoreet vulputate. </p>
</>
);
}
export default App;
index.jsのファイル(appの部品を、インポートして表示)
import React from 'react';
//createRootモジュールをインポート
import { createRoot } from 'react-dom/client';
//Appコンポーネントをインポート
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
コンポーネント<App/>は、関数名をHTMLタグのように使えて、最初は大文字で始めます。
また、注意点として、戻り値は一つのタグで囲われる必要があるため、
戻り値が複数行の場合、全体を<div>〜</div>で挟むか、上記のように<> 〜</>で囲います。
createRoot()について
以前まではReactDOM.render()という書き方を使っていたのが、
React 18からはサポートがなくなり(今の所警告つきで表示はされますが、、)
createRoot()という形式が導入されたとのことです。
その他のファイル調整
publicフォルダ内のindex.htmlには、下記を記入します。
<body>
<div id="root"></div>
</body>
更新されたブラウザでは、コンポーネントに書いた部分が、
htmlファイルの、id=”root”の箇所にレンダリングされているのが確認できます。
以上、Voltaのインストールから、Reactファイルの表示までの導入部分をご紹介しました。
最後までご覧いただき、ありがとうございました！
