xstep / react-lego

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

React Lego

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 in the Koa and Express branches.
Every other branch then adds one more technology, with the smallest possible changes.

All branches, have been setup with continuous deployment.

>> More about the concept

Technology to Compare:

All branches use babel v6, es2015, React v15.1, React-router v1, Webpack v1 unless otherwise stated

• Client-side
  • React
  • Preact (w/ preact-router)
• Server-side Rendering (SSR)
  • Koa
  • Koa v2
  • Express
• Importing CSS
  • CSS Imports
  • CSS Modules
  • CSS in JS

Technology to Add:

Each tech has its own branch, and in my experience, can be mixed and matched almost seamlessly!

• Redux
  • Redux with Promise middleware (async on the server)
  • Redux Dev Tools
• Importing SVGs
• Webpack v2
• React-hot-loader v3
• React-router v4

Client-side

The client-side apps are production ready and fully tested, they both use the following :

• CSS (Sass-loader, Autoprefixer)
• tests
• unit with Enzyme
• functional
• end-to-end with Nightwatch and BrowserStack
• smoke
• code coverage
• Code linting with eslint
• CI integration with CircleCI
• Continuous deployment with Heroku

All other branches include the above and are also production ready.

React

master branch

The react app uses react-router v2 for routing.

Preact

Compare Preact with React

Because of Ben Fletcher and this tweet I thought i'd give Preact a shot.

Turns out it was actually very easy! After removing a few dependencies we swapped routers for preact-router.

>> More about adding Preact

Server-side Rendering (SSR)

Koa

Adding Koa to React code comparison

Using Koa, the App now renders on the server, Compare Koa with Express.

Koa v2

With Async/Await around the corner and likely to be in Node v8, Koa 2 will soon come out of Alpha.

I've created a Koa v2 app to see how all the branches already mentioned come together in that setup.

koa-v2-app

Express

Adding Express to React code comparison

Using Express, the App now renders on the server, Compare Express with Koa.

Importing CSS

In the base branches, we have simply added the CSS into webpack entry array to get it to convert Scss into CSS. these are some other ways to achieve more modular components:

>> More about the different CSS methods

CSS Imports

Based on the universal branch compare branches

Import your css into your component and use the class names as they are written.
This method is the least obtrusive and feels most like traditional css. You must manually take care of css scope using things like BEM or Smaccs.

CSS Modules

Based on the universal branch compare branches

Import your css into your components and add the class names using js object notation. This method completely changes the css class names output. Scoping problems are gone, but you must specifically mark 'global' classes.

CSS in JS

Based on the universal branch compare branches

import your css into your components as Javascript Objects.
Class names are a thing of the past as are scoping problems.

Technologies to Add

Webpack v2

See how to upgrade from webpack v1 to v2

There are no code differences between Koa or Express when adding Webpack v2.

React-hot-loader v3

react-hot-loader allows you to see changes made to any part of your app without having to restart the server. We are currently using v3.

See the code changes needed to :

• add react-hot-loader v3 to express
• add react-hot-loader v3 to koa

>> More about adding react-hot-loader

React-Router v4

React Router v4 sees to be very close to being released so I was interested in how hard the upgrade would be. Easy, it seems - the new syntax includes a lot for JSX which is friendly and more flexible.

See the code changes needed to :

• Add React-router v4 to Express
• Add React-router v4 to Koa

>> More about React-Router v4

Redux

Redux was added with data being hydrated on the server.

With Redux, the example app now has an API which can be called to return the required data. This data is now formatted inside a reducer.

See the code changes needed to :

• Add Redux to Express
• Add Redux to Koa

>> More about adding Redux

Redux with Promise middleware

Based on the redux branch. compare branches

This branch allows you to make async requests on the server and hydrate your redux store before rendering the page. The massive win here is that each container dictates what data it needs while still on the server.

>> More about adding Promise middleware

Redux Dev Tools

Based on the redux branch. compare branches

Add Redux-DevTools to the app to help debugging.

>> More about adding redux-dev-tools

Importing SVG's

Based on the universal branch. compare branches

Using webpack-isomorphic-tools and svg-inline-loader we are able to directly import SVGs into our JavaScript. This has the added benefit of :

• Reusing SVG files (without code duplication)
• Keep SVGs inline and style them with CSS
• Serverside rendering of SVG's

>> More about importing SVGs