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 
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 :
- CSS (Sass-loader, Autoprefixer)
- tests (unit, functional, end-to-end + smoke)
- Code linting with eslint (CSS + JS linting)
- CI integration with CircleCI
- Continuous deployment with Heroku
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!**