Create React Appを使用してreact.jsを試す

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

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

環境

• node : v14.15.3
• create-react-app : 4.0.3

Create React Appとは

一からreact.jsの開発環境を作成する場合、多くのライブラリのインストールと設定ファイルが必要になります。
Create React Appはそのような煩わしい作業を自動でやってくれるため、自分で設定ファイルを作成する必要なくすぐにreactの開発に取り掛かることができます。

• Create React App

環境を作成してくれるだけなので、SSRやSSGを考えているならNext.jsなどのフレームワークを使用したほうがいいです。

• Next.js

Create React Appのインストール

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

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

1npm init -y

create-react-appパッケージをローカルにインストールします。インストールが完了したら、npx create-react-app --versionコマンドを実行し、正常にインストールができていることを確認します。

ローカルにインストールしたパッケージを実行するためにnpxを使用していますが、インストールされていない場合はnode node_modules/create-react-app --versionコマンドでも確認できます。

1npm i -D create-react-app
2npx create-react-app --version
34.0.3

プロジェクトの作成

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

1npx create-react-app hello-world

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

1hello-world
2  ┣ .git
3  ┣ mode_modules/
4  ┣ public/
5  ┣ src/
6  ┣ .gitignore
7  ┣ package.json
8  ┣ README.md
9  ┗ yarn.lock

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

1cd hello-world
2npm start

実行を終了するには、ターミナルでCtrl+cを入力します。

npm startについて

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

package.json
1  "scripts": {
2    "start": "react-scripts start",
3    "build": "react-scripts build",
4    "test": "react-scripts test",
5    "eject": "react-scripts eject"
6  }

• npm-scripts を実行するには、通常はnpm runコマンドを使用しますが、startはrunを省略できるため、npm startで処理が実行されます
• react-scripts startと記述されている部分は、./node_modules/react-scripts/内の start.js を実行しています

Hello worldを表示する

画面にHello Worldと表示するためにsrcフォルダ内のApp.jsファイルを変更していきます。ファイルの内容をすべて削除し、以下のように書き換えます。

App.js
1function App() {
2  return <div>Hello World</div>;
3}
4
5export default App;

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

Typescriptを利用する場合

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

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

作成されたフォルダの構成は、以下のようになります。typescrpt用の設定ファイル(tsonfig.json)が追加され、作成されたソース内のファイルの拡張子も.tsまたは.tsxになっています。

1my-app
2  ┣ mode_modules/
3  ┣ public/
4  ┣ src/
5  ┃   ┣ App.css
6  ┃   ┣ App.test.tsx
7  ┃   ┣ App.tsx
8  ┃   ┣ index.css
9  ┃   ┣ index.tsx
10  ┃   ┣ logo.svg
11  ┃   ┣ react-app-env.d.ts
12  ┃   ┣ reportWebVitals.ts
13  ┃   ┗ setupTests.ts
14  ┣ .gitignore
15  ┣ package.json
16  ┣ README.md
17  ┣ tsconfig.json
18  ┗ yarn.lock

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

おわりに

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