CRA React SPA Quick Start

A Create React App template to quickly focus on your business without need to setup a development environment.

Ingredients

Here is the list of ingredients:

• Language

  • Typescript @4.5.5
  • SASS @1.49.9 & CSS Modules

• Component Library

  • Material UI @5.4.1
  • Material Icons

• Routing

  • React Router Dom @6.2.1

• Translation

  • i18next @21.6.15
  • react-i18next @11.16.4
  • i18next-http-backend @1.4.0

• Store

  • React Redux @7.2.6
  • Redux Toolkit @1.8.0
  • Redux Persist @6.0.0

• Form & Validator

  • formik @2.2.9
  • yup @0.32.11

• Utility

  • RxJS @7.5.4
  • React Use @17.3.2
  • axios @0.26.0
  • classnames @2.3.1
  • date-fns @2.28.0

• Linter

  • ESLint
  • Stylelint
  • Prettier

Features

• Routing
  • Automatically generate sidebar from router definition with icon and text configuration
  • Match current root with the sidebar items and make the correct item as "active" automatically
• Store
  • Persist the store with Redux
  • Temporary/in-memory storage with RxJS Subjects
• Form
  • Ready to use form elements with formik (works with both react hooks and formik components)
  • Integration with YUP validator
• HTTP
  • Display loading spinner as overlay during request-response flow
  • Ready to integrate basic authentication

Usage

To use the template, clone the repo and use it locally

git clone https://github.com/yigityuce/cra-template-react-spa-quick-start.git

npx create-react-app my-app --template file:./cra-template-react-spa-quick-start