create-react-app

create-react-appシリーズ

このブログポストはシリーズで作成しております。次はcreate-react-appのシリーズのリストです。

概要

Reactプロジェクトを開発して実行するためにはBabel、Webpackなどたくさんの設定をする必要があります。このようにたくさんの設定はReactプロジェクトを簡単に始めれないようにします。

Reactを開発して管理してるふFacebookもこのような問題を把握して、たくさんの人がもっと簡単にReactを始めるようにするため、create-react-appと言うツールを提供してます。

create-react-app: https://github.com/facebook/create-react-app

このブログポストではcreate-react-appを使ってReactプロジェクトを始める方法について説明します。

ここに紹介してるソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-create-react-app/tree/main/1.create-react-app

Nodeのインストール

create-react-appを使ってReactプロジェクトを開発するためにはNodeのインストールが必要です。各OSに合わせてNodeをインストールします。

macOS

Homebrewはマックにパッケージをインストールしたり、管理するマック専用のパッケージ管理者です。Homebrewを使ってマックに必要なパッケージを簡単にインストールすることができます。次のコマンドを実行してHomebrewをインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールしたら、次のコマンドを実行してうまくインストールされたか確認します。

brew --version

もし、バージョンが見えない場合、ターミナルを終了して、再び起動して実行してみます。すでにHomebrewがインストールされた方は下記のコマンドを実行してNodeをインストールします。

brew install node

Windows

ウィンドウズではChocolateyと言うパッケージマネージャーを使います。管理者権限でCMDまたはPowershellを開いて、下記のコマンドを実行してChocolateyをインストールします。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

インストールが完了されたら、次のコマンドを実行してインストールができたか確認します。

choco –version

Chocolateyのバージョンが表示されない場合は、CMDまたはPowershellを終了して再び実行します。Chocolateyがインストールされたら下記のコマンドを実行してNodeをインストールします。

choco install -y nodejs.install

create-react-appのインストール

Facebookが提供したcreate-react-appを使ってReactプロジェクトを始めるためにはcreate-react-appをインストールする必要があります。次のコマンドを実行してcreate-react-appをインストールします。

npm install -g create-react-app

インストールが終わったら、下記のコマンドを実行してcreate-react-appがうまくインストールされたか確認します。

create-react-app --version

問題なくインストールされたら、次のようにcreate-react-appのバージョンが表示されます。

4.0.0

Reactプロジェクト生成

インストールしたcreate-react-appを使ってReactプロジェクトを作って見ましょう。

npx create-react-app my-app

上のコマンドを実行すると次のようにReactプロジェクトが生成されることが確認できます。

|-- public
|-- src
|-- package-lock.json
|-- package.json

このようにcreate-react-appを使って生成したReactプロジェクトのフォルダとファイルを説明すると下記のようです。

public: create-react-appで開発するReactプロジェクトのStaticファイル(index.htmlなど)が入ってるフォルダ
public/index.html: 開発したReactプロジェクトが表示されるファリル
src: 実際Reactを使って開発するコードが入ってるフォルダ
src/index.js: 開発したReactプロジェクトをindex.htmlファイルへ表示するためのファリル
src/App.js: 基本的提供されるReactコンポーネントの例
src/App.css: Appコンポーネントが使うCSSファイル
src/App.test.js: Appコンポーネントをテストするためのファイル
src/reportWebVitals.js: Reactの性能をを測定するためのファイル
src/setupTests.js: Reactでテストを実行するための設定ファリル
package.json: 開発に必要なファイルを管理するファイル

プロジェクト実行

create-react-appで生成したReactプロジェクトのpackage.jsonファイルを開くと下記の内容が確認できます。

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

下記はcreate-react-appで生成したReactプロジェクトで使えるスクリプトです。

start: Reactプロジェクトを開発するとき使います。
build: 開発したReactプロジェクトをデプロイするため使います。
test: Reactプロジェクトをテストするとき使います。
eject: create-react-appで管理してるReactプロジェクトを一般プロジェクトに変更します。

新しく生成したReactプロジェクトを実行するため次のコマンドを実行してみます。

npm start

上のコマンドが問題なく実行されたらブラウザでhttp://localhost:3000が自動でき開いて下記のような画面が表示されます。

Rendering

create-react-appで生成したReactプロジェクトで私たちが開発したReactが画面にどうやって表示されるか説明します。

まず、public/index.htmlファイルを開いてみると下記のような部分を探すことができます。

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
    <div id="root"></div>
    ...
  </body>
</html>

Reactはウェブアプリケーションなので画面に表示されるためにはHTMLファイルが必要です。public/index.htmlファイルがこの役割をして、私たちが開発するReactがこのindex.htmlファイルへ表示されます。

そしたら、Reactファイルがあるsrcフォルダでindex.jsファイルを開いてみると下記のような部分を探すことができます。

import React from 'react';
import ReactDOM from 'react-dom';
...
import App from './App';
...
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
...

このファイルでReactはReactDOMを使ってidがrootであるHTML elementへ<App />コンポーネントを表示することが確認できます。ここで表示されるAppコンポーネントはsrc/App.jsでimportを使ってコンポーネントを呼び出して画面に表示してることが分かります。

このように生成されたReactプロジェクトを次のコマンドを使って実行してみます。