SCRATCH.md
Start from Scratch
==================
Build your own fluxex application from scratch!
Prepare the project
-------------------
```
npm init
npm install --save fluxex react babel express routr request body-parser
npm install --save-dev browser-request aliasify browserify watchify babelify envify eslint eslint-plugin-react babel-eslint nodemon browser-sync gulp gulp-babel gulp-cached gulp-jsx-coverage gulp-eslint gulp-util gulp-uglify vinyl-source-stream vinyl-buffer babel-polyfill babel-preset-es2015 babel-preset-react babel-plugin-transform-runtime tcp-port-used
mkdir actions
mkdir components
mkdir stores
```
Create Action
-------------
edit `actions/page.js` - Define an action.
```javascript
module.exports = function () {
return this.dispatch('UPDATE_PRODUCT', {
title: 'sample product',
price: 12345,
sold: 0
});
};
```
Create Store
------------
edit `stores/product.js` - Define your store interface and handle the action.
```javascript
module.exports = {
handle_UPDATE_PRODUCT: function (payload) {
this._set('data', payload);
this.emitChange();
},
getData: function () {
return this._get('data');
}
};
```
Create HTML
-----------
edit `components/Html.jsx` - Define your page as react component.
```jsx
var React = require('react');
var Fluxex = require('fluxex');
var Html = React.createClass({
mixins: [
Fluxex.mixin,
require('fluxex/extra/storechange'),
{listenStores: ['product']}
],
getStateFromStores: function () {
return this.getStore('product').getData();
},
handleClick: function () {
var product = this.state;
product.sold++;
this.executeAction(function () {
return this.dispatch('UPDATE_PRODUCT', product);
});
},
render: function () {
return (
<html>
<head>
<meta charSet="utf-8" />
</head>
<body onClick={this.handleClick}>
<ul>
<li>Product: {this.state.title}</li>
<li>Price: {this.state.price}</li>
<li>Sold: {this.state.sold}</li>
</ul>
<Fluxex.InitScript />
</body>
</html>
);
}
});
module.exports = Html;
```
Create Your App
---------------
edit `fluxexapp.js` - Provide store `{name: implementation}` pairs and Html.jsx.
```javascript
require('babel-polyfill');
module.exports = require('fluxex').createApp({
product: require('./stores/product')
}, require('./components/Html.jsx'));
```
The Server
----------
edit `index.js` - Create an express server.
```javascript
// Init ES2015 + .jsx environments for .require()
require('babel-register');
var express = require('express');
var fluxexapp = require('./fluxexapp');
var pageAction = require('./actions/page');
var fluxexServerExtra = require('fluxex/extra/server');
var app = express();
// Provide /static/js/main.js
fluxexServerExtra.initStatic(app);
// Mount test page at /test
app.use('/test', fluxexServerExtra.createMiddlewareByAction(fluxexapp, pageAction));
// Start server
app.listen(3000);
console.log('Fluxex started on port 3000');
```
Create gulp task
----------------
edit `gulpfile.js` - Use the fluxex gulpfile extra.
```javascript
require('fluxex/extra/gulpfile');
```
copy a default eslint configs from fluxex.
```sh
cp node_modules/fluxex/.eslintrc .
```
**Start the server**
`gulp develop` then browse http://localhost:3001/test , click on the page to see React rendering!