The JavaScript ecosystem evolves at incredible speed: staying current can feel overwhelming. So, instead of you having to stay on top of every new tool, feature and technique to hit the headlines, this project aims to lighten the load by providing a curated baseline of the most valuable ones.
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
- Tool Configuration
- Server Configurations
- Deployment (currently Heroku specific)
- FAQ
- Gotchas
Automate the creation of components, containers, routes, selectors and sagas - and their tests - right from the CLI!
Run 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
internals/generators.
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!
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 env, stage-0
and react presets!
Write composable CSS that's co-located with your components using styled-components
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 react-router-redux,
that's as easy as pie and the url is auto-synced to your application state!
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
offline-plugin
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's webpack-pwa-manifest plugin. Configure the name, colors, and icons
in webpack.prod.babel.js and try it!
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.
FontFaceObserver adds a class
to the body when the fonts have loaded. (see app.js
and App/styles.css)
-
Either add the
@font-facedeclaration toApp/styles.cssor add a<link>tag to theindex.html. (Don't forget to remove the<link>for Open Sans from theindex.html!) -
In
App/styles.css, specify your initialfont-familyin thebodytag with only web-save fonts. In thebody.jsFontLoadedtag, specify yourfont-familystack with your web font. -
In
app.jsadd a<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
is optimized.
See image-loader to customize optimizations options.