【React】create-react-appを使って簡単にReactのプロジェクトを作る

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

【React】create-react-appを使って簡単にReactのプロジェクトを作る

2024-6-24 | ,

create-react-appを使って簡単にReactのプロジェクトを作りたい!

概要

今回の記事では、create-react-appを使って簡単にReactのプロジェクトを作る手順を掲載する。

仕様書

環境

  • node v21.1.0
  • npm 10.8.1
  • create-react-app 5.0.1

手順書

インストール編とプロジェクト作成編の2部構成です。

インストール編

create-react-appをグローバルにインストールする。

npm install -g create-react-app

インストールしたcreate-react-appのバージョンを確認するにはオプション--versionを設定して実行する。

create-react-app --version

create-react-appを更新するには一旦グローバルから削除してから再インストールする。(再インストールのみでも良いっぽい?)

npm uninstall -g create-react-app
npm install -g create-react-app

プロジェクト作成編

下記のような感じでコマンドを実行するとReactのプロジェクトが作られる。

npx create-react-app <project_name> --template typescript

コマンドを実行した場所に<project_name>でディレクトリーが作られ、その中にpackage.jsonなどのファイルが作られてる。

webpackなどのコードも生成されてて大抵の場合は自分で書く必要がない!簡単だ!

プロジェクトを作る際にテンプレートを使用して、例えばTypeScriptが導入済みのプロジェクトを作れる。

npx create-react-app react-electron-test --template typescript

TypeScriptとreduxが導入済みのテンプレートもある。

npx create-react-app react-electron-test --template redux-typescript

他にも公式や有志が作った様々なテンプレートがある。

設定ファイルの展開

create-react-appで作られたプロジェクトはwebpackの設定ファイルなどの各種設定ファイルが隠蔽(カプセル化?)される。そこら辺の設定ファイルを弄りたい場合は設定ファイルを展開するコマンドを実行する。ejectするとejectする前の状態に戻せなくなるので注意!

npm run eject

コマンドを実行すると設定ファイルが入ってるscriptsconfigというディレクトリーが出力される。

webpackの設定ファイルconfig/webpack.config.jsなどを直接編集することが出来るようになる。

例えばビルドの出力先を変更したい場合は、config/path.js39行目あたりのappBuildの値を編集する。

appBuild: resolveApp('output/app/'),

react-app-rewiredというパッケージを使うとejectしなくても設定を変更できたりするらしい。

まとめ(感想文)

webpackを自分で設定しなくて済むのはかなり楽!