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.
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
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.
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:
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||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