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