Create React Appを利用すればReactアプリケーションの開発環境を1コマンドで作成できます。
また、Create React Appには様々なカスタムテンプレートが作成されており、Redux+TypeScriptなテンプレートも存在します。
それを利用することで、React+Redux+TypeScriptなアプリケーションをすぐに作成できます。
環境
以下のものをインストールしてください。
- Node.js（LTS推奨）
- yarn（利用するなら）
create-react-app
create-react-app コマンドでReactアプリケーションを作成します。
その際、--template redux-typescript を付け加えて、React+Redux+TypeScriptなテンプレートを利用します。
npx create-react-app my-app --template redux-typescript
もしくは
yarn create react-app my-app --template redux-typescript
コマンドを実行します。
以上でReact+Redux+TypeScriptアプリが作成できました。
ちなみに、カスタムテンプレートのリポジトリはこちら。
GitHub - reduxjs/cra-template-redux-typescript: The official Redux+TS template for Create React App
Redux公式のカスタムテンプレートなので安心ですね。
実行
試しに実行してみましょう。
cd my-app
作成したアプリのディレクトリに移動し、
npm start
もしくは
yarn start
コマンドを実行します。
画像のようなページが表示されていれば成功です。
構成
このコマンドで作成されたアプリの構成について説明しておきます。
以下の内容は全て、作成した開発環境に含まれています。
React
Reactとは、ユーザーインターフェースのためのJavaScriptフレームワークです。
Reactの公式ページは日本語化されており、読みやすく最新の情報が得られるので、学習にオススメです。
react-scripts
create-react-app コマンドで作成されたアプリは、デバッグ実行やビルドなど、全てreact-scriptsというパッケージが管理しています。
Create React Appの公式ページには、この開発環境が持つ機能や設定について記載されています。
本格的に開発を始める前に環境や設定を整備しておくことをオススメします。
Redux
Reduxとは、JavaScriptが扱う状態フレームワークです。
Reduxの公式ページではReduxの基本概念が詳しく説明されており、FAQなども充実しています。
Redux Toolkit
Redux Toolkitは、Redux公式のツールセットです。
これを利用することで、Reduxに関わる開発がかなり楽になります。
Redux Toolkitの公式ページで使い方を学んでください。
React Redux
ReactとReduxをうまく連携して利用するための機能がまとめられているライブラリです。
React Reduxの公式ページに書かれている内容は古いものが多いです。（2020年10月現在）
今から開発を始めるなら、関数コンポーネントでuseSelector()とuseDispatch()のフックを使うのが基本になります。
TypeScript
JavaScriptに静的型付け機能を付け加えたプログラミング言語です。
2020年10月現在、TypeScript4.0がリリースされていますが、react-scriptsはTypeScript3.8までしか対応していません。
create-react-app コマンドでインストールされたTypeScriptのバージョンを上げてしまうと、ビルドに失敗するなどの不具合が発生します。（経験済み）
TypeScriptについては、以下のようなページが参考になります。