✈️
cra-template-* 探訪
概要
Create React Appって良いですよね。
前回の記事でサードパーティ製のカスタムテンプレートを初めて使ってみたんですが、
良い感じだったので、他にもどんなのがあるか調べてみました。
カスタムテンプレートとは
公式見ましょう。
要するに
- create-react-appする時に、
--template [template-name]って入れるとCRA+αのテンプレートでプロジェクト作れるよ。 - 公式は
cra-templateとcra-template-typescriptだけだよ。 - サードパーティ製もいっぱいあるよ。npmで
cra-template-*で探してみてね。 - もちろん、自分で作って公開もできるよ。どしどし応募待ってるぜ。
という感じです。
調べてみよう
というわけで、npmでcra-template-*を検索してみました。
1539件がヒットする（2021/4/1現在）ので、個人的に気になったやつを見ていきます。
基本、TypeScript対応してるものに限定します。
cra-template-typescript
- 説明不要、みんな大好きTypeScriptのテンプレート。
cra-template-redux-typescript
- こちらの記事で使用した
Redux Toolkit + TypeScriptなテンプレート。 - Reduxに必要なStoreも設定済みなので、良い感じ。
- JavaScript版もあるよ。
cra-template-rb
-
Redux Toolkit + styled-components + i18n + react-router的な感じで、結構モリモリのテンプレート。 - ダークテーマにも対応してます。
- ドキュメントもあります。
@chakra-ui/cra-template-typescript
- Chakra UIの公式テンプレート。
- こちらの記事が詳しかったです。ありがたや。
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も良さそう。
また、依存モジュールのせいなのか、インストールできないテンプレートもいくつかありました。
ご利用は計画的に。
Discussion