[FE] Hello Cycle.js

1. 安装

（1）全局安装webpack和babel

npm install -g webpack babel-cli

（2）安装babel-loader和babel-plugin

npm install babel-loader babel-plugin-syntax-jsx babel-plugin-transform-react-jsx babel-plugin-transform-es2015-arrow-functions babel-plugin-transform-es2015-template-literals babel-plugin-transform-object-assign

（3）安装babel-preset

npm install babel-preset-react babel-preset-es2015 babel-preset-stage-2

（4）安装cycle

npm install @cycle/xstream-run @cycle/dom xstream snabbdom-jsx

2. 配置

（1）配置.babelrc

{
  "presets": ["es2015", "react"],
  "plugins": [
    "syntax-jsx",
    ["transform-react-jsx", {"pragma": "html"}]
  ]
}

（2）配置webpack.config.js

module.exports = {
    entry: ['./src/main.jsx'],
    output: {
        path: './dist/',
        filename: 'main.js'
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: 'babel-loader'
            },
            {
                test: /.jsx$/,
                loader: 'babel-loader'
            }
        ]
    }
};

3. 编码

（1）./src/main.jsx

import Cycle from '@cycle/xstream-run';
import {makeDOMDriver} from '@cycle/dom';
import {html} from 'snabbdom-jsx';

function main(sources) {
    return {
        DOM: sources.DOM.select('.myinput').events('input')
            .map(ev => ev.target.value)
            .startWith('')
            .map(name =>
                <div>
                    <label>Name: </label>
                    <input className="myinput" type="text" />
                    <hr/>
                    <h1>hello {name}</h1>
                </div>
            )
    };
}

Cycle.run(main, {
    DOM: makeDOMDriver('#main-container')
});

（2）./index.html

<div id="main-container"></div>
<script src="./dist/main.js"></script>

4. 编译

webpack --watch

---

参考
Getting Started › Cycle.js