Rewrite example in ES6

example/package.json

@@ -19,6 +19,9 @@
     "react": ">=0.13"
   },
   "devDependencies": {
+    "babel-core": "^5.8.23",
+    "babel-loader": "^5.3.2",
+    "babel-runtime": "^5.8.20",
     "coffee-jsx-loader": "^0.1.2",
     "css-loader": "^0.15.1",
     "extract-text-webpack-plugin": "^0.8.2",

example/src/app.cjsx

@@ -1,32 +0,0 @@
-"use strict"
-
-# React-Toolbox full dependency way:
-# Toolbox = require 'react-toolbox'
-# Button  = Toolbox.Button
-# Form    = Toolbox.Form
-
-# Standalone dependencies way:
-Button  = require 'react-toolbox/components/button'
-Form    = require 'react-toolbox/components/form'
-
-App = React.createClass
-
-  # --
-  getInitialState: ->
-    fields: [
-      ref: "username", label: "Your username", required: true
-    ,
-      ref: "password", type: "password", label: "Your password", required: true
-    ,
-      type: "submit", caption: "Login", disabled: true
-    ]
-
-  render: ->
-    <app data-toolbox={true}>
-      <h1>Hello React-Toolbox</h1>
-      <Form attributes={@state.fields} />
-      <Button caption="Hello world!" type="square" style="primary"/>
-      <Button icon="adb" type="circle" style="accent" />
-    </app>
-
-React.render <App/>, document.body

example/src/app.jsx

@@ -0,0 +1,33 @@
+/* global React */
+
+// React-Toolbox full dependency way:
+// import {Button, Form} from 'react-toolbox'
+
+// Standalone dependencies way:
+import Button from 'react-toolbox/components/button';
+import Form from 'react-toolbox/components/form';
+
+const App = React.createClass({
+  getInitialState () {
+    return {
+      fields: [
+        { ref: 'username', label: 'Your username', required: true},
+        { ref: 'password', type: 'password', label: 'Your password', required: true},
+        { type: 'submit', label: 'Login', disabled: true}
+      ]
+    };
+  },
+
+  render () {
+    return (
+      <app data-toolbox={true}>
+        <h1>Hello React-Toolbox</h1>
+        <Form attributes={this.state.fields} />
+        <Button label='Hello world!' type='square' style='primary'/>
+        <Button icon='adb' type='circle' style='accent' />
+      </app>
+    );
+  }
+});
+
+React.render(<App />, document.body);

example/webpack.config.coffee

@@ -1,38 +0,0 @@
-'use strict'
-
-pkg               = require './package.json'
-node_modules      = __dirname + '/node_modules'
-ExtractTextPlugin = require('extract-text-webpack-plugin')
-environment       = process.env.NODE_ENV
-
-module.exports =
-  cache         : true
-  resolve       : extensions: ['', '.cjsx', '.coffee', '.js', '.json', '.styl']
-  context       : __dirname
-
-  entry:
-    commons     : ['./node_modules/react-toolbox/components/commons.styl']
-    test        : ['webpack/hot/dev-server', './src/app.cjsx']
-
-  output:
-    path        : if environment is 'production' then './dist' else './build'
-    filename    : pkg.name + '.[name].js'
-    publicPath  : '/build/'
-
-  devServer:
-    host        : 'localhost'
-    port        : 8080
-    inline      : true
-
-  module:
-    loaders: [
-      test      : /\.cjsx$/,    loader: 'coffee-jsx-loader'
-    ,
-      test      : /\.coffee$/,  loader: 'coffee-jsx-loader'
-    ,
-      test      : /\.styl$/,    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader!')
-    ]
-
-  plugins: [
-    new ExtractTextPlugin pkg.name + '.[name].css', allChunks: false
-  ]

example/webpack.config.js

@@ -0,0 +1,36 @@
+var pkg = require('./package.json');
+var node_modules = __dirname + '/node_modules';
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var environment = process.env.NODE_ENV;
+
+module.exports = {
+  cache: true,
+  resolve: {
+    extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl']
+  },
+  context: __dirname,
+  entry: {
+    commons: ['./node_modules/react-toolbox/components/commons.styl'],
+    test: ['webpack/hot/dev-server', './src/app.jsx']
+  },
+  output: {
+    path: environment === 'production' ? './dist' : './build',
+    filename: pkg.name + '.[name].js',
+    publicPath: '/build/'
+  },
+  devServer: {
+    host: '0.0.0.0',
+    port: 8080,
+    inline: true
+  },
+  module: {
+    noParse: [node_modules + '/react/dist/*.js'],
+    loaders: [
+      { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel?optional=runtime'},
+      { test: /\.cjsx$/, loader: 'coffee-jsx-loader'},
+      { test: /\.coffee$/, loader: 'coffee-jsx-loader'},
+      { test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!')}
+    ]
+  },
+  plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
+};