Create React Appを利用してプロジェクトを作ってみた

動機

Reactを勉強する機会ができたため、何から始めようか会社の先輩に尋ねたところ、最強のReact開発環境を作成できるCreate React Appを教えていただいたので、手始めに利用してみた。

Create React Appとは

新規シングルページアプリケーションを作成する際に、Reactが公式で推奨している開発環境のこと。

Reactのアプリ開発に必要なwebpackやBabelなどのツールを自前で準備する必要はなく、即座にReact開発環境を構築することができる。

実際にプロジェクトを作成してみた

環境

MacBook Pro(2016)
macOS Monterey(version: 12.5)

手順

1. インストール

sudo npm i -g create-react-app

2. プロジェクト作成コマンドの実行

create-react-app {プロジェクト名}

****@******* ****** % create-react-app sample_app

Creating a new React app in /***/sample_app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1394 packages in 2m

209 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 55 packages in 11s

209 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1449 packages in 4s

209 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created sample_app at /***/sample_app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd sample_app
  npm start

Happy hacking!

Happy hacking!まで出力されれば、プロジェクト作成成功

3. プロジェクトに移動し、npm startを実行

Compiled successfully!

You can now view sample_app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.11.9:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

アプリが起動し、localhostに下記ページが表示されれば成功。

最後に

Reactで開発環境を構築するにはwebpackやBabelなどのツールを導入する手順が必要かと思っていたが、Create React Appを利用することで簡単に作成することができた。

Reactの勉強をしたいのにその前の手順で詰むことがなかったため、今後も利用していこうと思う。

参照（公式ドキュメント）