react-lego

by peter-mouland

peter-mouland / react-lego

React-lego : incrementally add more cool stuff to your react app

416 Stars 37 Forks Last release: Not found MIT License 136 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 CircleCI

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 :

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


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.