Create React Appにテンプレートを適用させる

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。これは、単一ページのアプリケーションを構築するための 最も人気のあるライブラリの1つです。 Create React Appは、Reactプロジェクトを簡単に作成する方法です。

でも毎回、あの味気ないのから始めたり TypeScriptに変えたりするはめんどくさいので テンプレートを適用することで短縮できます

npx create-react-app my-app --template [template-name]
npm init react-app my-app --template [template-name]
yarn create react-app my-app --template [template-name]

ちなみにデフォルトのテンプレートはcra-templateです。

Redux template

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

Reduxの勉強にいいかも

TypeScript template

npx create-react-app my-app --template typescript

公式なのでたぶん今後も更新されていきます

Reactフックにも対応したtemplate

npx create-react-app my-app --template dmontee

• VSコードのサポート
• axiosによる非同期データフェッチ
• Eslint構成
• ReduxおよびRedux Thunk
• Reactフックのリンティングとテスト
• tailwindcssを使用したスタイリング
• 追い風と互換性のあるStylelint構成
• 基本的なダークテーマのサポート

ReactフックやEslint構成が魅力的です

全部入りのテンプレート

npx create-react-app my-app --template rmuif

• Create React Appでブートストラップ
• Material-UIによるGoogleのマテリアルデザイン
• Web用のほとんどの製品が含まれているFirebaseバックエンド（AuthenticationやCloud Firestoreなど）
• 保護されたルートとエラー処理を含む、React Routerによるルーティング
• フルスクリーンダイアログとスワイプ可能なタブを備えた、十分にテストされた広範なモバイルサポート
• Sentryによるクロスプラットフォームアプリケーションの監視

デモは以下のURLで確認できます
https://demo.rmuif.com/

Material-UIをもともと適用してくれているのはありがたい

rmuifのデモ画面

sign up画面

環境変数にFirebaseやsentry.io（アプリの監視）の設定をすると自分のアプリになります

環境変数

自分で探したい場合は下記のURLからできます

https://www.npmjs.com/search?q=cra-template-*