React in the Real World

README.md

Slides

You can find the slides to my talk here, the links to Anton Sport have been removed as the site isn't quite ready for the public yet.

Libraries

• React
• React Router
• Jest
• Flux
• Reflux - Stores and Actions
• Webpack
• React Hot Loader
• Superagent - Isomorphic HTTP library, do check out httpinvoke and axios as well.

Webpack

Creating a comfortable development enviroment with Webpack took me a long time to get right so I thought I'd share an example config, which is attached to this Gist.

To start a local development server:

$ npm install -g webpack-dev-server
$ webpack-dev-server --hot

Now simply access http://localhost:8080/webpack-dev-server/client

webpack.config.js

var config = {
  entry: {
    client: ['./src/styles/index.styl', './src/scripts/index.js']
  },

  output: {
    path: __dirname + '/build/public',
    filename: '[name].js',
    publicPath: '/'
  },

  module: {
    loaders: [
      {test: /\.jsx$/, loader: 'react-hot!jsx'},
      {test: /\.styl$/, loader: 'style!css?disableStructuralMinification!autoprefixer!stylus'},
      {test: /\.(eot|ttf|woff)$/, loader: 'file?name=fonts/[name]-[hash:6].[ext]'},
      {test: /\.png$/, loader: 'file?name=images/[name]-[hash:6].[ext]'},
      {test: /\.svg$/, loader: 'raw'} // Embed SVG icons
    ]
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    unsafeCache: true
  }
}

module.exports = config