はじめに
Reactの開発環境の構築手順について解説します。
- Node.jsのインストール
- パッケージマネージャーyarnのインストール
- creat-react-appのインストール
- 構築した環境でHello Worldを表示させてみる
1. Node.jsのインストール
まず、Node.jsをインストールするために、Node.jsの公式サイトを開きします（下記のURLをクリックしてください）。
https://nodejs.org/ja/
URLを開くとLTS版とCURRENT版（最新版）の２つがあります。
- LTS版
LTSとは、Long-term Supportの略で、長期の保守運用が約束されたバージョンのことです。- CURRENT版
CURRENTとは、最新版だけど安定性を約束しないことで機能追加を盛り込んだバージョンのことです。
LTS版が推奨となっているので、今回はLTS版をダウンロードします。
node.jsをダウンロードして、インストールが完了したら、ターミナルで下記のコマンドを実行します。そして、Nodeがインストールしているかを確認します。下記のようにNodeのバージョンが表示されていればよいです。
$ node -v
v18.14.2
2. yarnをインストール
nodeのパッケージマネージャであるyarnをインストールしていきます。
npmというパッケージマネージャが、Nodeをインストールしたときにありますが、npmよりもyarnの方がより高速で信頼度の高いものになっているので、yarnをインストールしていきます。
yarnをインストールする場合は、ターミナルで下記のコマンドを実行してください。
$ npm install --global yarn
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.10
updated 1 package in 1.698s
yarnがインストールされているかは、下記のコマンドを実行して、バージョンが表示されていればOKです。
$ yarn --version
1.22.19
3. creat-react-appのインストール
従来のreactを用いた開発では、Babelやwebpackなど様々なパッケージをマニュアルでインストールする必要があったため、ものすごく手間がかかっていました。
しかし、creat-react-appをインストールすることで、これらの問題が解消でき、簡単に必要なパッケージをインストールすることができます。
下記のコマンドを実行することでインストールできます。
$ yarn global add create-react-app
4. 構築した環境でHello Worldを表示させてみる
ターミナルから下記のコマンドを実行して、アプリケーションを作成します。
作成する場所は任意で構いません。
React.jsの場合はこちら↓
$ yarn create react-app helloworld
React + TypeScriptの場合はこちら↓
$ yarn create react-app helloworld --template typescript
もし、既にディレクトリを作成していて、そのディレクトリに展開したかったら下記のように実行する。
$ cd helloworld $ yarn create react-app --template typescript .
下記のようなメッセージが表示されていればOKです。
success Uninstalled packages.
✨ Done in 46.14s.
Created git commit.
Success! Created amplifyapp at /Users/*******/helloworld
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd helloworld
yarn start
Happy hacking!
作成したプロジェクト配下に移動し、下記のstartコマンドを実行します。
$ cd helloworld
$ yarn start
実行後、ブラウザが起動し、以下の画面が表示されていればOKです。
ここまでできたら、helloworld/src配下にあるApp.jsを開きましょう。
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;
App.jsの内容を全て消して、以下のようにソースを書いてみましょう。
import React from 'react';
const App = () => {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
export default App;
修正してブラウザに以下のように表示されていればOKです。
次回Reactを用いてカウントアプリを作ってみたいと思います。
Reactでカウントアプリを作る