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

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

概要

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

インストール編とプロジェクト作成編の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

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

cra-template-* - npm search

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

npm run eject

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

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

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

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

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

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