Crafted for highly scalable & performant and easily maintainable React.js applications
with a focus on best DX and best practices.

---

The official Create React App template of React Boilerplate

Start your create-react-app projects in seconds with the best, industry-standard tools and practices made ready for you.

📚Documentation: Gitbook

🎨 Check the example app: Boilerplate Example Application

🚑 Collection of 'HOW TO's: Examples & Tutorials for common patterns

📦 Package: npm

---

Install & Start

Create React App with the template

yarn

Start

yarn start

Structure

.
├── config                                # Webpack and env Configurations
├── src                                   # App source code
│   ├── api                               # All of restful API
│   ├── assets                            # Assets (e.g. images, etc.)
│   ├── components                        # Reusable components
│   │   ├── form                          # Reusable formik input components
│   │   │   ├── component                 #
│   │   │   │   ├── style                 # 
│   │   │   │   │   └── index.scss        # Component's main styling
│   │   │   │   ├── index.tsx             # Main component
│   │   │   │   └── Loadable.tsx          # Lazy load component
│   │   ├── component                     #
│   │   │   ├── style                     #
│   │   │   │   ├── index.scss            #
│   │   │   ├── index.tsx                 #
│   │   │   └── Loadable.tsx              #
│   ├── constants                         # App's static variables
│   ├── locales                           # I18next configuration, languages
│   ├── modules                           # App modules
│   │   └── module                        # App modules
│   │   │   ├── components                #
│   │   │   │   └── component             #
│   │   │   │   │   ├── style             #
│   │   │   │   │   │   └── index.scss    #
│   │   │   │   │   ├── index.tsx         #
│   │   │   │   │   └── Loadable.tsx      #
│   │   │   ├── containers                #
│   │   │   │   └── container             #
│   │   │   │   │   ├── style             #
│   │   │   │   │   │   └── index.scss    #
│   │   │   │   │   ├── index.tsx         #
│   │   │   │   │   └── Loadable.tsx      #
│   │   │   └── index.ts                  #
│   ├── store                             # Redux store configuration
│   │   ├── actions                       # All store actions
│   │   ├── reducers                      # All store reducers
│   │   ├── types                         # Reducer types (for typescript)
│   │   └── reducer.ts                    # Main reducer (combine reducers)
│   ├── styles                            #
│   │   └── main.scss                     # App main styling
│   ├── utils                             #
│   │   └── utils.ts                      # Common utilities function (helper)
├── .eslintrc.js                          # Eslint configuration
├── .tsconfig.json                        # Typescript configuration
├── .tailwind.config.js                   # Tailwind CSS configuration
├── .env                                  # Env for development
├── .env.local                            # Env for local development
└── .env.production                       # Env for production

Features

- React
- Redux
- Typescript
- i18n
- Tailwind CSS
- Path Resolver
- Formik
- Antd 4.0

Predictable state management

Unidirectional data flow allows for change logging and time travel debugging.

Instant feedback

Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!

Next generation CSS

Write composable CSS that's co-located with your components for complete modularity. Unique generated class names keep the specificity low while eliminating style clashes. Ship only the styles that are on the page for the best performance.

Industry-standard routing

It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.

Industry-standard i18n internationalization support

Scalable apps need to support multiple languages, easily add and support multiple languages.

Typescript

Typescript is the key to scalability. Build self-documented code, easy-to-debug code and create maintainable large applications and codebases with a highly productive development experience.

Quick scaffolding

Create components, containers, routes, selectors and sagas - and their tests - right from the CLI!

Static code analysis

Focus on writing new features without worrying about formatting or code quality. With the right editor setup, your code will automatically be formatted and linted as you work.

SEO

We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)

But wait... there's more!

• The best test setup: Automatically guarantee code quality and non-breaking changes. (Seen a react app with 100% test coverage before?)
• The fastest fonts: Say goodbye to vacant text.
• Stay fast: Profile your app's performance from the comfort of your command line!

_{Keywords: Create React App, React Boilerplate, Custom Template, Typescript, React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, styled-components, redux-saga, FontFaceObserver, Tailwind CSS, Formik, Path resolver}