Front End

[FE] Hello Cycle.js

2016-07-26  本文已影响60人  何幻

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

上一篇 下一篇

猜你喜欢

热点阅读