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 がインストールされている必要があります。
目次
環境
- 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 の開発環境を作成できるため、積極的に利用してみてください。