Legit CSS Frameworks
An evergreen list of free and open source CSS frameworks worthy of your time.
React Redux boilerplate with isomorphic rendering, async react-router routes, async redux reducers, async data fetching, and code-splitting. Sports feature-first organization, JS standard for simplified linting, built-in example site with collection and item views, sample navigation both internally and sample unit tests. Integrates easily with React Flexbox Grid and Material UI. Functional stateless (pure) components. HMR that works! Also includes a
Dockerfile to get the app up and running in a flash. Yowza!
Here’s an example photo sharing application starter I spiked on using this kit.
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. That’s wild!
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!
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.
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.
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
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.
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.
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 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.
script tags) and, therefore, is not as SEO friendly as isomorphic boilerplates.
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 application boilerplate based on react, react-router, webpack, react-hot-loader for rapid application development
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.
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!
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.
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!
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.
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.
Boilerplate I extracted from building the Lumpen Radio app early in the RN lifecycle, enabling RN development using bundles dynamically generated with Webpack.
nofollow links indicate the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques. ↩