peter-mouland / react-lego

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

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!**

---