Create React App で react.js を試す

※この記事は、過去の内容を最近の環境に合わせて書き直したものです。

はじめに

Create React App を使用した、react の開発環境作成を試します。今回は、作成した環境でファイルを変更し、Hello World の文字を表示してみます。

Create React App

Create React App を使用すると、自分で設定ファイルを作成する必要なく、react で開発するための環境を作成してくれます。

You don’t need to install or configure tools like webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

あくまで環境を作成してくれるだけなので、SSR や SSG を考えているなら Next.js などのフレームワークを利用してみてください。

注意事項

コマンドプロンプトから npm を実行するためには、node.js がインストールされている必要があります。

目次

• 環境
• Create React App のインストール
• Hello world を表示する
• Typescript を利用する場合

環境

• OS : Windows 10 Pro 64bit
• エディタ : Visual Studio Code
• その他 : node v14.15.3, npm 6.14.10, create-react-app 4.0.1

Create React App のインストール

react のひな形を作成するため、Create React App をインストールします。

まず、package.json ファイルをカレントフォルダに作成します。中身は適当でいいので、全て Enter を押すか、-y を指定して作成します。

npm init
or
npm init -y

入力した内容にもよりますが、作成された package.json ファイルは以下のようなカタチになります。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

create-react-app パッケージをグローバル、またはローカルにインストールします。今回はグローバルにインストールする必要がないため、ローカルにインストールします。
ローカルにインストールしたパッケージを実行するには、npx コマンドを使用します。

npm i -D create-react-app
npx create-react-app --version
4.0.1

プロジェクトの作成

create-react-app コマンドを使用してプロジェクトを作成します。ここでは、hello-world という名のプロジェクトを作成します。

npx create-react-app hello-world

hello-world という名前のフォルダが作成され、以下のようなフォルダの構成のファイルが作成されます。
create-react-app コマンドで作成されたプロジェクトには、webpack, Babel, ESLint などのモジュールも含まれています。

hello-world
  ┣ .git
  ┣ mode_modules
  ┣ public
  ┣ src
  ┣ .gitignore
  ┣ package.json
  ┣ README.md
  ┗ yarn.lock

作成された hello-world フォルダに移動し、以下のコマンドを実行すると、ブラウザが起動し画面にロゴと、 "Edit src/App.js and save to reload." という文字が表示されます。

cd hello-world
npm start

実行を終了するには、コマンドプロンプトで Ctrl+c を入力します。

npm start について

プロジェクト内の package.json の scripts に書かれている npm-scripts を実行するためのコマンドで、以下のような内容が書かれています。

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

npm-scripts を実行するには、通常は npm run コマンドを使用しますが、start は run を省略できるため、npm start で処理が実行されます。

react-scripts start と記述されている部分は、./node_modules/react-scripts/ 内の start.js を実行しています。start.js が何をしているかはファイルの中身を見てください。

Hello worldを表示する

画面に Hello World と表示するために src フォルダ内の App.js ファイルを変更します。

hello-world
  ┗ src
     ┣ App.css
     ┣ App.js
     ┣ index.css
     ┣ index.js
     ┣ logo.svg
     ┣ reportWebVitals.js
     ┗ setupTests.js

必要のないコードを削除し、以下のように書き換えます。

function App() {
    return <div>Hello World</div>;
}

export default App;

npm start を実行している場合、自動的にファイルがコンパイルされ、ブラウザに Hello World が表示されます。これは、webpack-dev-server がフォルダを常に監視し、変更された場合にファイルをコンパイルしてブラウザをリロードするように設定されているからです。

Typescript を利用する場合

Typescript を利用する場合は、プロジェクトの作成時に --template typescript 引数を付けてコマンドを入力します。

npx create-react-app my-app --template typescript

作成されたフォルダの構成は、以下のようになります。

my-app
  ┣ mode_modules
  ┣ public
  ┣ src
  ┃   ┣ App.css
  ┃   ┣ App.test.tsx
  ┃   ┣ App.tsx
  ┃   ┣ index.css
  ┃   ┣ index.tsx
  ┃   ┣ logo.svg
  ┃   ┣ react-app-env.d.ts
  ┃   ┣ reportWebVitals.ts
  ┃   ┗ setupTests.ts
  ┣ .gitignore
  ┣ package.json
  ┣ README.md
  ┣ tsconfig.json
  ┗ yarn.lock

同じように npm start を実行すれば、"Edit src/App.tsx and save to reload." と表示されます。

おわりに

react の開発環境を一から作成しようとすると、パッケージのインストールや各種設定などが必要となり、かなり大変な作業になります。
Create React App を利用することによって、そういった煩わしい作業をする必要なく react の開発環境を作成できるため、積極的に利用してみてください。