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.

The default branch (universal) is a Universal React App, each other branch then adds one more technology, with the smallest possible changes. This master branch, and therefore all branches, have been setup with continuous deployment.

>> More about the concept

• Client-side app (React)
  • Universal React App (master)
    • Hot-reloading
    • Redux
      • Redux with Promise middleware (async on the server)
      • Redux Dev Tools
    • Importing SVGs
    • Webpack v2
      • Webpack v2 with React-Hot-loader v3
    • React-Router v4
    • CSS
      • CSS Imports
      • CSS Modules
      • [-] CSS in JS
• Client-side app (Preact)

All branches are written using es6 and babel with webpack.

The aim of the master branch was to be as close to production ready as possible (minus universal rendering).

• Routing (react-router)
• 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

These have been chosen as base technologies because (Apart from them being relatively easy to distinguish between), they are essential when building/deploying to make sure I don't break anything!

Changed from the master branch. compare branches

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.

Based on the master branch. compare branches

The Universal branch is production ready and All other branches are also production ready.

Based on the universal branch. compare branches

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.

>> More about adding react-hot-loader

Based on the universal branch. compare branches

Redux was added with data being hydrated on the server.

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

>> More about adding Redux

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

Based on the redux branch. compare branches

Add Redux-DevTools to the app to help debugging.

>> More about adding redux-dev-tools

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

Based on the universal branch compare branches

This was added out of pure interest and I haven't used it in anger yet. Please take a look at the comparison branch to see how to upgrade from webpack v1 to v2.

>> More about Webpack v2

Based on the webpack2 branch. compare branches

Just added as a quick demo to help out and show the 2 working together. no changes required to either branch to get them to work together.

Based on the universal branch compare branches

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.

>> More about React-Router v4

In master, 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

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.

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.

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.