React + Redux + Saga + Material-UI + Webpack + Babel example with hot reloading and routing

The purpose of this example is to show how to set up a concise React app aimed at rapid development and sophisticated asynchronic processing. The actual application code under ./src is written using ECMAScript 6, JSX, and not-yet-standardized JavaScript syntax. As of 10/2016, modern browsers (excluding IE11 and older, naturally) implement more than 90% of ES6 specification, and therefore it is no more absolutely necessary to transpile ES6 into ES5, unless support for obsolete browsers is required. In such case, Babel preset for ES6->ES5 transpilation can be used.

Main dependencies

• babel for transpiling next-generation JavaScript and JSX into JavaScript supported by current browsers
• react-hot-loader for hot-reloading a React app
• react-router for routing
• redux for managing application state predictably
• react-redux for integrating Redux into React
• react-router-redux for managing router state via Redux
• redux-saga for sophisticated asynchronic processing
• webpack for bundling the code and providing a development server supporting HMR (hot module replacement, a.k.a. hot module reloading, hot loading, and hot reloading)

In development mode, the code is automatically transpiled by Babel and hot-loaded to the browser by react-hot-loader plugin utilizing Webpack's HMR feature. With HMR, the changes made to the source files are reflected automatically on the browser without page reload. Page reload resets application state whereas hot reload preserves the state and only updates the changed part of the application. For further information on HMR, see Webpack’s HMR & React-Hot-Loader — The Missing Manual.

Requirements

• Node.js

Usage

Setup

• npm install: install the dependencies

Development

• npm start: run Webpack development server
• Point your browser to the server (e.g. http://localhost:7000) and begin development at ./src
• There are also browser extensions, such as React Developer Tools and Redux DevTools, which can significantly boost React app development

Production

• npm run build: create minified bundle
• Serve ./public with your production server of choice, or use http-server
  • npm start
• npm run build:docker: build Docker container image
• npm run start:docker: launch Docker container using the image