Awesome React Boilerplates

Awesome React starter kits to kick your app development into high gear.

6 minutes read

Not interested in reinventing the wheel? Neither am I. Here’s a short list of awesome boilerplates – sometimes known as starter kits or seeds – for getting React applications off the ground in a hurry. These application templates were not taken from any list, however awesome that list might be. Rather, they’ve gained enough mindshare to find me outside The Stream1. They’re open source and waiting for you to generate, clone, fork and build upon in your next React project.

Already settled on a boilerplate? Check out the list of Awesome React Components and start building without all the experimentation and research.

Contributions via comments welcome. The best React and React Native Boilerplates will be moved into the article body and the nofollow2 removed.

React

Application boilerplates for creating React apps, many of which contain their own starter kit tutorials. And wow are there’re a lot of good ones to choose from.

RazzleEditor’s choice
Create universal React, Preact, Inferno, and Rax applications with no build configuration.

Here’s an example photo sharing application starter I spiked on using an earlier version of this kit when it was still called react-production-starter.

And here’s another app using Razzle with MUI, Express and more shared in the comment thread: kireerik/razzle-material-ui-styled-example.

https://github.com/mikechabot/react-boilerplate
Brands itself as A slightly opinionated yet dead simple boilerplate for ReactJS and Webpack 2 and was submitted by its author in the comments section below. It’s being lifted near the top of this list because it’s fresh, it’s young and it needs your attention to help it flourish.

react-starter-kit
Everything you need to build a front-end for a SEO-friendly React website. Supports text-only browsing and focuses heavily on Node.js and the surrounding ecosystem of NPM libraries. For an example isomporhpic application I’ve built using this kit check out lumpenradio-com or my Isomporhpic Rendering with React talk.

ARc
One of the common things I hear from individuals getting started with React is that the ecosystem is so complicated it’s difficult to take everything in. That’s why I’m please to see Diego Haz’s ARc (Atomic React) project, which uses a progressive design methodology intended to help individuals start small and work their way forward by incorporating new features one by one. Great job Diego!

simple-static-react-aframe
It’s refreshing to see a new use case for a boilerplate. This boilerplate gets you set-up to build a VR website with React and Aframe. Check out the mobile demo and start building the next Pokémon Go. Be super slick to see something like this paired with Whitestorm.

express-react-redux-starter
I wanted to spike on a simple game of 5x5 Tic-Tac-Toe recently and was able to use this kit to build out the game board using functional stateless components, and without having to yank out tons of boilerplate. It had just the things I needed to start building, and nothing more.

scalable-react-boilerplate
Finally, a simple starter kit for scalable apps. Includes a Slush template generator, CLI code generators, a rig for use of CSS modules with SASS, and includes Airbnb linters and Mocha for testing (though I’ve been preferring standard these days over ESLint as there’s less to maintain). Also includes some GraphQL goodies, re-select for Redux state queries, server-side rendering, Webpack code chunking and lazy-loaded routes.

There’s a TS flavor of Ryan’s work now as well, and the previous repo is no longer being maintained.

react-redux-starter-kit
By former colleague (and one hell of a coder) this kit is designed to get you up and running with a bunch of awesome new front-end technologies. It can be a bit heavy for those new to React, and doesn’t have the benefits of isomorphic rendering, but there’s plenty of info to take away from studying David’s coding wizardry.

react-boilerplate
Very popular boilerplate from Max Stoiber considered by some to have the best organizational pattern. From the documentation, “A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.” I haven’t personally tried this seed yet but it’s got enough umph behind it to make it worth bringing to your attention.

react-slingshot
React Slingshot is a comprehensive starter kit for rapid application development using React. Includes React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app, all built in.

Este
A React/Flux dev stack and starter kit for Universal JavaScript apps. Renders pages SPA style (using script tags) and, therefore, is not as SEO friendly as isomorphic boilerplates.

re-base
Inspired by Relay, combines the benefits of React and Firebase by allowing each component to specify its own data dependency. Forget about your data persistence and focus on what really matters, your application’s state.

electron-react-boilerplate
Electron application boilerplate based on react, react-router, webpack, react-hot-loader for rapid application development

jspm-react
Configured starter repo to build web apps with React and ES6 modules using JSPM. Not actively maintained, though the author is still accepting pull requests.

React Native

Application boilerplates for creating React Native applications. If you’re just starting out, consider starting your app from scratch using react-native init and leveraging the following boilerplates for ideas until you get the hang of things. Otherwise, find your favorite and plunge right in!

ignite
The unfair starting CLI, Generator, and more for React Native cross-platform apps. I looked over this and, though I haven’t used it yet for a project, it has one of my favorite developer affordances: Generators and is easy to set-up. It also takes a different approach from most boilerplates in that you do not have to fork the repo. Just generate it from the base! Also, GantMan is receptive to feedback and publishing docs to help on the Web. That’s awesome.

pepperoni
A well-constructed open source starter for React Native iOS and Android projects jam packed with lots of tasty ingredients, inspired by Snowflake. Uses ImmutableJS like Snowflake, Redux and leverages the semi-official NavigationExperimental for routing. Also includes a bash script to help rename your application after your clone, fork or mirror.

Update 2016-12-07: Tab bar icons now supported!

snowflake
A React Native starter kit for iOS and Android given to us by the affable Barton Hammond. Includes all sorts of goodies, including Redux, Jest, Istanbul, Parse integration (planned to be replaced with Serverless) and more. Includes video tutorials for set-up with Bitrise and more. Uses react-native-router-flux for routing.

f8app
The official F8 app of 2016. Provides tutorials to help get started on makeitopen.com covering how they used React Native, Redux, Relay, GraphQL, and more. Also includes Microsoft CodePush for app updates without going through the app stores.

react-native-webpack-starter-kit
Boilerplate I extracted from building the Lumpen Radio app early in the RN lifecycle, enabling RN development using bundles dynamically generated with Webpack.

  1. “The Stream” is a kind of slot machine used to hijack your mind.

  2. nofollow links indicate the linked document is not endorsed by the author of the linking site. For example, if the author doesn’t trust it, does not wish to pass authority, or if there is commercial relationship between the two, a link is more likely to be nofollowed. nofollow links play a role in the passage of authority and page rank in Search engine algorithms.

Leave a Comment