Reactive Development

by Andrey Okonetchnikov, @okonetchnikov

Reactive Development

Andrey Okonetchnikov

Conventional development

Reactive development


  1. BrowserSync ( — reloads the page when the file changes (OK)
  2. LiveReload ( — injects CSS without reloading (Better)
  3. ...

What if...

we could update the page without full refresh (Best)

React + webpack + react-hot-loader

React.js principles

  1. Just the UI
  2. Virtual DOM
  3. Data Flow

webpack Hot Module Replacement

Hot Module Replacement (HMR) is a way of exchanging modules in a running application (and adding/removing modules). You basically can update changed modules without a full page reload.

Simple setup

> npm install --save webpack webpack-dev-server react jsx-loader react-hot-loader
> webpack-dev-server -d --colors --hot --inline

Configure webpack

// webpack.config.js
module.exports = {
	module: {
		loaders: [
				test: /\.jsx?$/,
				loaders: ["react-hot", "jsx-loader?harmony"],
				exclude: /(node_modules|bower_components)/


How it is better than...

Difference between...

How it works?


No, seriously!

How react-hot-loader works

Where do I learn more?


Andrey Okonetchnikov,