create-react-appが公式にreduxテンプレートを公開した件


Reactを触ったことがあるみなさんならご存知のcreate-react-appですが、公式にReduxのテンプレートを公開したようです

使い方は簡単
npx create-react-app {app_name} --template redux
templateにreduxをしてあげるだけで使えちゃいます

通常のcreate-react-appとの差分

普通のcreate-react-appコマンドで作成したときと何が違うのか一部抜粋してみました

まずは起動してみると...

redux templateトップページ

カウンターアプリのサンプルが表示されていますね

package.json

通常のcreate-react-appから追加でインストールされているモジュールは

  • @reduxjs/toolkit
  • react-redux

の2つでした

ディレクトリ構造

src以下のディレクトリ構造は以下のようになっています

src
├── App.css
├── App.js
├── App.test.js
├── features
│   └── counter
│       ├── Counter.js
│       ├── Counter.module.css
│       └── counterSlice.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
├── setupTests.js
└── store.js

大きな違いとしては、カウンターのサンプルがfeatures以下に作成されています

また、storeが始めから作成してあり、index.jsProviderに既に登録されています

src/index.js
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

カウンターアプリも含め基本的に全てHooksFunctional Componentで書かれていました

typescript対応

現在はまだ公式からtypescriptに対応したものは公開してないようです
でも近いうちに公開されるはず...

補足ですが、
npx create-react-app {app_name} --typescript
は廃止予定らしいので
npx create-react-app {app_name} --template typescript
を利用しましょう

リンク

github release note
https://github.com/reduxjs/cra-template-redux/releases/tag/v1.0.0