React-lego : incrementally add more cool stuff to your react app
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
The building blocks of a react app
This repo demonstrates how to plug in other technologies, one block at a time, into React.
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
All branches, have been setup with continuous deployment.
It is production ready and fully tested :
All other branches include the above and build on this base.
Code changescolumn 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 |
I have a few articles that may be interesting to read covering all the branches in this repo: >> wiki