React-lego : incrementally add more cool stuff to your react app
JavaScript CSS HTML
Clone or download

This version is currently being update for 2018. The previous react-lego, with older version of tech and upgrade paths, can be found react-lego-2017

React Lego 2018 CircleCI

The building blocks of a react app

This repo demonstrates how to plug in other technologies, one block at a time, into React.

Hear me out!

The concept is to use GitHub's branch-comparison screens to quickly demo the code changes that are needed for only the technology you are interested in.

A client-side React app which is fully tested and production ready on the master branch.
From Master, Server-side Rendering (SSR) has been added with Koa v2 (for Express see react-lego-2016).
Every other branch then adds one more technology, with the smallest possible changes.

All branches, have been setup with continuous deployment.

>> More about the react-lego concept

What else the Base React app have?

It is production ready and fully tested :

All other branches include the above and build on this base.

Technology to Add:

All branches use babel v7, React v16.2, react-router v4, Webpack v4 unless otherwise stated

The Code changes column is where you go if you want to see how the code changed from the previous branch. This is a great place to see how to do it yourself.

Category Code changes App size (node_modules) Comparator kb
Client-side Rendering React 23kb (+152kb)
Server-side Rendering add Koa v2 22kb (+153kb)
CSS add CSS Imports 22kb (+153kb ) CSS Modules >> More about adding CSS
State Management add Redux 22kb (+188kb) >> More about adding Redux

Previous branches still to be updated

These branches are from React Lego 2017 and are on my 'todo' list to update!

Category New Tech Code changes Client-side App (kb) Comparator kb
Client-side Rendering Preact > Preact code vs React tbc >> More about adding Preact
State Management Async routes add async routes tbc >> More about adding Promise middleware
Assets Importing SVGs
Assets Responsive Images with PNGs
Data API GraphQL add GraphQL tbc Apollo tbc

What else ?

I have a few articles that may be interesting to read covering all the branches in this repo: >> wiki

** Something missing? Please see react-lego-2017 or react-lego-2016 or submit a feature request!**