【React】「Create React App」を用いた「React」の環境構築手順について

React.js

2022.06.02

こんにちわ山崎です。今回は「React」の連載第二弾として、Facebook社が公式で出している「React」の環境構築ライブラリの「Create React App」を用いたReactの環境構築について書きたいと思います。

なお、「Create React App」の公式サイトは以下になります。
https://ja.reactjs.org/docs/create-a-new-react-app.html "https://ja.reactjs.org/docs/create-a-new-react-app.html

動作環境

OS: Mac OS Catalina 10.15.7
Node.js: v18.2.0
yarn: 1.22.18

※「Node.js」と「yarn」は動作確認時の最新バージョンを使用しています。

「Create React App」をインストールして利用する。

create-react-appをグローバルインストールします。

yarn add -g create-react-app

雛形を設置したいディレクトリに移動して、create-react-appコマンドを実行します。

mkdir ~/projects

cd ~/projects

create-react-appの後には作成したいディレクトリ名を指定します。

create-react-app react-project

typeScriptを使う場合は、--template typescriptというオプションを後ろにつけてください。

create-react-app react-project --template typescript

Facebook社が公式で開発している、最新のステート管理ライブラリの「recoil」を使用する場合は、create-react-appコマンドでまとめてインストールすることは執筆時点ではできないようなので、create-react-appコマンドの後に個別にインストールしてください。

cd react-project
yarn add recoil

すると、~/projects配下にreact-projectsという新しいディレクトリが作成されているのが分かります。そのディレクトリに移動してみましょう。

cd react-projects

すると、そのディレクトリ配下には以下のディレクトリとファイルが作成されていることが分かります。 create-react-appコマンドを使用すれば、gitの設定や開発に必要なモジュールのインストール、雛形ファイルの作成をまとめてやってくれることが分かります。

.git
node_modules
public
src
.gitignore
package.json
README.md
yarn.lock

ここでpackage.jsonを開いてみると、scriptsプロパティに以下の4つのコマンドが登録されていることが分かります。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

ローカルサーバーを起動してみる

以下のコマンドでローカルサーバーを立ち上げます。

yarn start

すると、localhost:3000が起動しブラウザで以下の画面が表示されます。

srcディレクトリの主要ファイルについて

srcが開発ディレクトリになる為、srcディレクトリの中を基本的には触って開発していくことになります。

index.js

react開発のベースとなるファイルです。 public/index.htmlの#rootのdivタグをReactのルートDOMとし、renderの引数にReact要素を渡してレンダリングします。この中でsrc/App.jsも読み込まれています。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

一番上の階層のコンポーネントファイルになります。現在ブラウザで表示されている内容を修正するにはこちらのファイルを修正していきます。また、CSSを修正する場合はコンポーネントファイル内にimportされているsrc/App.cssを修正します。試しにpタグとaタグの中のテキストを日本語に修正してみましょう。

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>
          <code>src/App.js</code>を編集してください。
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Reactを学ぶ。
        </a>
      </header>
    </div>
  );
}

export default App;

ファイルを保存するとブラウザが自動でリロードされ下記のキャプチャーのように日本語のテキストになっているのが分かります。