【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

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