cra-template-rb - npm explorer

React Boilerplate Meets CRA

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 the discontinued 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: Demonstrating the features

📂 Browse in VS Code: ![Open in Visual Studio Code](https://open.vscode.dev/react-boilerplate/react-boilerplate-cra-template)

📦 Package: npm

!version
!version

---

Install & Start

⚠️ Using Yarn Package Manager is recommended over npm.

Create React App with the template

``shell yarn create react-app --template cra-template-rb my-app`

Start and check our example app, if you want

`shell cd my-app yarn start`

Remove the example app to start your project!

`shell yarn cleanAndSetup`

---

`Features`

> This project is NOT a framework, UI component library or a design system. The only purpose of this template is to assist you starting your CRA app with a solid tool stack and development patterns. It's 100% customizable. After you start your journey and once you understand the concepts offered here you should personalize your code accordingly instead of being tied to the starter project. > > You can add or remove literally anything and use whichever library or tools you prefer.

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,}styled-components, redux-saga, FontFaceObserver

`Contributors`

_{Can Sahin}
💻 📖 🤔 👀 ⚠️

_{Recep Tiryaki}
💻 🤔 🎨

_{David Bingham}
📖

_{Lourens de Villiers}
📖

_{Rejo Chandran}
💻 📖 ⚠️

_{Caleb Hoff}
💻 📖 🤔 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

`License`

Features

> This project is NOT a framework, UI component library or a design system. The only purpose of this template is to assist you starting your CRA app with a solid tool stack and development patterns. It's 100% customizable. After you start your journey and once you understand the concepts offered here you should personalize your code accordingly instead of being tied to the starter project.
>
> You can add or remove literally anything and use whichever library or tools you prefer.

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,}

styled-components, redux-saga, FontFaceObserver