Skip to content

Latest commit

 

History

History
149 lines (121 loc) · 3.45 KB

SCRATCH.md

File metadata and controls

149 lines (121 loc) · 3.45 KB
Raw

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.

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.

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.

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.

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.

// 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.

require('fluxex/extra/gulpfile');

copy a default eslint configs from fluxex.

cp node_modules/fluxex/.eslintrc .

Start the server

gulp develop then browse http://localhost:3001/test , click on the page to see React rendering!