Using React Boilerplate, you get to start your app with our community's current ideas on what represents optimal developer experience, best practice, most efficient tooling and cleanest project structure.
- CLI Commands
- Setting up your editor
- Tool Configuration
- Server Configurations
- Deployment (currently Heroku & AWS specific)
Automate the creation of components, containers, routes, selectors and sagas - and their tests - right from the CLI!
npm run generate in your terminal and choose one of the parts you want
to generate. They'll automatically be imported in the correct places and have
everything set up correctly.
We use plop to generate new components, you can find all the logic and templates for the generation in
Enjoy the best DX 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!
Predictable state management
We use Redux to manage our applications state. We have also added optional support for the Chrome Redux DevTools Extension – if you have it installed, you can see, play back and change your action history!
Use ESNext template strings, object destructuring, arrow functions, JSX syntax
and more, today. This is possible thanks to Babel with the
Next generation CSS
Write composable CSS that's co-located with your components using
for complete modularity. Unique generated class names keep the specificity low
while eliminating style clashes. Ship only the styles that are used on the
visible page for the best performance.
It's natural to want to add pages (e.g.
/about) to your application, and
routing makes this possible. Thanks to react-router with connected-react-router,
that's as easy as pie and the url is auto-synced to your application state!
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.
Don't like any of these features? Click here
The next frontier in performant web apps: availability without a network connection from the instant your users load the app. This is done with a ServiceWorker and a fallback to AppCache, so this feature even works on older browsers!
All your files are included automatically. No manual intervention needed thanks to Webpack's
Add To Homescreen
After repeat visits to your site, users will get a prompt to add your application to their homescreen. Combined with offline caching, this means your web app can be used exactly like a native application (without the limitations of an app store).
The name and icon to be displayed are set in the
manifest.json generated by
webpack-pwa-manifest plugin. Configure the name, colors, and icons
webpack.prod.babel.js and try it!
Performant Web Font Loading
If you simply use web fonts in your project, the page will stay blank until these fonts are downloaded. That means a lot of waiting time in which users could already read the content.
Adding a new font
App/styles.css, specify your initial
bodytag with only web-save fonts. In the
body.jsFontLoadedtag, specify your
font-familystack with your web font.
<fontName>Observerfor your font.
Images often represent the majority of bytes downloaded on a web page, so image
optimization can often be a notable performance improvement. Thanks to Webpack's
image-loader, every PNG, JPEG, GIF and SVG images
image-loader to customize optimizations options.