cra-template-* 探訪

2 min read読了の目安(約2000字

概要

Create React Appって良いですよね。

前回の記事でサードパーティ製のカスタムテンプレートを初めて使ってみたんですが、
良い感じだったので、他にもどんなのがあるか調べてみました。

カスタムテンプレートとは

公式見ましょう。

https://create-react-app.dev/docs/custom-templates/

要するに

  • create-react-appする時に、--template [template-name]って入れるとCRA+αのテンプレートでプロジェクト作れるよ。
  • 公式はcra-templatecra-template-typescriptだけだよ。
  • サードパーティ製もいっぱいあるよ。npmでcra-template-*で探してみてね。
  • もちろん、自分で作って公開もできるよ。どしどし応募待ってるぜ。

という感じです。

調べてみよう

というわけで、npmでcra-template-*を検索してみました。
1539件がヒットする(2021/4/1現在)ので、個人的に気になったやつを見ていきます。
基本、TypeScript対応してるものに限定します。

cra-template-typescript

  • 説明不要、みんな大好きTypeScriptのテンプレート。

cra-template-redux-typescript

https://zenn.dev/obuchi3/articles/4a719104cdba72
  • こちらの記事で使用したRedux Toolkit + TypeScriptなテンプレート。
  • Reduxに必要なStoreも設定済みなので、良い感じ。
  • JavaScript版もあるよ。

cra-template-rb

  • Redux Toolkit + styled-components + i18n + react-router的な感じで、結構モリモリのテンプレート。
  • ダークテーマにも対応してます。
  • ドキュメントもあります。

@chakra-ui/cra-template-typescript

  • Chakra UIの公式テンプレート。
  • こちらの記事が詳しかったです。ありがたや。

https://zenn.dev/knjname/articles/20210105tryoutchakraui

cra-template-royalnavy

  • Royal NavyというCSSフレームワークを組込んだテンプレート。
  • royal navy + graphql + react-routerという感じっぽいんですが、yarn startしてもHello, Worldって出るだけなので…。

cra-template-particles-typescript

  • Particlesを組込んだテンプレート。
  • 画面に幾何学模様を表示させたり、雪を降らせたりできる。

感想

色々と面白そうなテンプレートあったのですが、
個人的にはcra-template-redux-typescriptくらいで始めるのが良いかなと思いました。
CSSライブラリありなら、Chakra UIも良さそう。

また、依存モジュールのせいなのか、インストールできないテンプレートもいくつかありました。
ご利用は計画的に。