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

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

I'm excited to announce that:

🔥🔥The official Redux template for Create-React-App is now available! 🔥🔥

To use it:

npx create-react-app my-app --template redux

Thanks to @BenLorantfy for putting the template together!

Release notes:https://t.co/gdRbgZGAPS

— Mark Erikson (@acemarke) 2020年2月18日

使い方は簡単
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

の２つでした

ディレクトリ構造

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.jsのProviderに既に登録されています

src/index.js

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

カウンターアプリも含め基本的に全てHooksとFunctional 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