martijnvermaat/app.jsx

## app.jsx
'use strict';

var React = require('react');
var Form = require('plexus-form');

var Example = React.createClass({
    getInitialState: function() {
        return {values: {name: 'Pierre'}};
    },
    onSubmit: function(output, value, errors) {
        this.setState({values: output});
    },
    render: function() {
        var schema = {
            type: 'object',
            properties: {
                name: {
                    type: 'string'
                }
            }
        };
        return <Form
            schema={schema}
            values={this.state.values}
            onSubmit={this.onSubmit}
            submitOnChange={true}
            validate={() => true}
        />;
    }
});

React.render(<Example />, document.getElementById('content'));

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>plexus-form #31</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <!--[if lt IE 8]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div id="content">
    <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
  </div>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

## package.json
{
  "scripts": {
    "dev": "webpack-dev-server --progress --colors --port 8000 --config webpack.config.js"
  },
  "dependencies": {
    "plexus-form": "0.1.2",
    "react": "~0.13.1"
  },
  "devDependencies": {
    "babel-loader": "~4.2.0",
    "react-hot-loader": "~1.2.4",
    "webpack": "~1.4.13",
    "webpack-dev-server": "~1.6.6"
  }
}

## webpack.config.js
'use strict';

var webpack = require('webpack');

module.exports = {
  plugins: [new webpack.HotModuleReplacementPlugin()],
  entry: [
    'webpack/hot/only-dev-server',
    './app.jsx'
  ],
  output: {
    filename: 'main.js',
    publicPath: '/'
  },
  devServer: {
    contentBase: './',
    hot: true
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel-loader?optional=runtime'
    }]
  },
  cache: true,
  debug: true,
  devtool: 'eval'
};
	'use strict';

	var React = require('react');
	var Form = require('plexus-form');

	var Example = React.createClass({
	getInitialState: function() {
	return {values: {name: 'Pierre'}};
	},
	onSubmit: function(output, value, errors) {
	this.setState({values: output});
	},
	render: function() {
	var schema = {
	type: 'object',
	properties: {
	name: {
	type: 'string'
	}
	}
	};
	return <Form
	schema={schema}
	values={this.state.values}
	onSubmit={this.onSubmit}
	submitOnChange={true}
	validate={() => true}
	/>;
	}
	});

	React.render(<Example />, document.getElementById('content'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>plexus-form #31</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
	<div id="content">
	<h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
	</div>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>
	{
	"scripts": {
	"dev": "webpack-dev-server --progress --colors --port 8000 --config webpack.config.js"
	},
	"dependencies": {
	"plexus-form": "0.1.2",
	"react": "~0.13.1"
	},
	"devDependencies": {
	"babel-loader": "~4.2.0",
	"react-hot-loader": "~1.2.4",
	"webpack": "~1.4.13",
	"webpack-dev-server": "~1.6.6"
	}
	}
	'use strict';

	var webpack = require('webpack');

	module.exports = {
	plugins: [new webpack.HotModuleReplacementPlugin()],
	entry: [
	'webpack/hot/only-dev-server',
	'./app.jsx'
	],
	output: {
	filename: 'main.js',
	publicPath: '/'
	},
	devServer: {
	contentBase: './',
	hot: true
	},
	resolve: {
	extensions: ['', '.js', '.jsx']
	},
	module: {
	loaders: [{
	test: /\.jsx?$/,
	exclude: /node_modules/,
	loader: 'react-hot!babel-loader?optional=runtime'
	}]
	},
	cache: true,
	debug: true,
	devtool: 'eval'
	};