How to use the cyclejs.createView function in cyclejs

},{"cyclejs":"cyclejs"}],5:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

var Footer = require("./footer");

// EXPORTS =========================================================================================
var View = Cycle.createView(function (Model) {
  var firstName$ = Model.get("firstName$");
  var lastName$ = Model.get("lastName$");
  return {
    vtree$: Rx.Observable.combineLatest(firstName$, lastName$, function (firstName, lastName) {
      return h("div", null, [h("div", { className: "form-group" }, [h("label", null, ["First Name:"]), h("input", { type: "text", className: "form-control", id: "firstName", placeholder: "First Name" })]), h("div", { className: "form-group" }, [h("label", null, ["Last Name:"]), h("input", { type: "text", className: "form-control", id: "lastName", placeholder: "Last Name" })]), h("h1", null, ["Hello ", firstName + " " + lastName, "!"]), h("Footer", { className: "xxx" }, ["content"])]);
    }) };
});

module.exports = View;

},{"./footer":2,"cyclejs":"cyclejs"}],6:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;
let Menu = require("./menu");

// APP =============================================================================================
let data = [
  "Home", "Services", "About", "Contact us"
];

let active = "Services";

let View = Cycle.createView(() => ({
  vtree$: Rx.Observable.return(
    <menu>
  ),
}));

Cycle.createDOMUser("main").inject(View);</menu>

"use strict";

// IMPORTS =========================================================================================
require("../../common/scripts/shims");
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

var Menu = require("./menu");

// APP =============================================================================================
var data = [{ name: "Web Development", price: 300 }, { name: "Design", price: 400 }, { name: "Integration", price: 250 }, { name: "Training", price: 220 }];

var active = ["Web Development", "Integration"];

var View = Cycle.createView(function () {
  return {
    vtree$: Rx.Observable["return"](h("div", null, [h("Menu", { items: data, active: active })])) };
});

Cycle.createDOMUser("main").inject(View);

},{"../../common/scripts/shims":3,"./menu":2,"cyclejs":"cyclejs"}],2:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
require("../../common/scripts/shims");
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;

// APP =============================================================================================
let Model = Cycle.createModel(() => {
  let started = Date.now();
  return {
    msSinceStart$: Rx.Observable.interval(100)
      .map(() => Date.now() - started)
  };
});

let View = Cycle.createView(Model => {
  return {
    vtree$: Model.get("msSinceStart$").map(msSinceStart => {
      let timeDelta = (msSinceStart / 1000).toFixed(1);
      return (
        <div>
          Started {timeDelta} seconds ago
        </div>
      );
    }),
  };
});

let User = Cycle.createDOMUser("main");

User.inject(View).inject(Model);

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;
let Slider = require("./slider");

// EXPORTS =========================================================================================
let View = Cycle.createView(Model => {
  let value$ = Model.get("value$");
  return {
    vtree$: value$.map(value => (
      <div class="everything">
        <div>
          
        </div>
      </div>
    )),
  };
});

module.exports = View;

Cycle.registerCustomElement("Slider", (DOM, Props) => {
  let Model = Cycle.createModel((Intent, Props) => ({
    id$: Props.get("id$").shareReplay(1),
    width$: Props.get("width$").merge(Intent.get("changeWidth$")),
  }));

  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let width$ = Model.get("width$");
    return {
      vtree$: width$.combineLatest(id$, (width, id) => (
        <div width="" style="{{width:" class="item">
          <div>
            <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
          </div>
          <button class="remove">Remove</button>
        </div>
      )),
    };
  });

  let Intent = Cycle.createIntent(DOM =&gt; {
    return {

Cycle.registerCustomElement("Slider", (DOM, Props) => {
  let Model = Cycle.createModel((Intent, Props) => ({
    id$: Props.get("id$").shareReplay(1),
    width$: Props.get("width$").merge(Intent.get("changeWidth$")),
    color$: Props.get("color$").merge(Intent.get("changeColor$")),
  }));

  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let width$ = Model.get("width$");
    let color$ = Model.get("color$");
    return {
      vtree$: id$.combineLatest(width$, color$, (id, width, color) => (
        <div width="" style="{{width:" class="item">
          <div>
            <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
          </div>
          <div>
            <input value="{color}/" type="text" class="color-input">
          </div>
          <button class="remove">Remove</button>
        </div>
      )),
    };

Cycle.registerCustomElement("Menu", (DOM, Props) => {
  let Model = Cycle.createModel((Intent, Props) => {
    let items$ = Props.get("items$");
    let active$ = Props.get("active$");
    let selectActive$ = Intent.get("selectActive$");
    return {
      items$: items$,
      active$: active$.merge(selectActive$),
    }
  });

  let View = Cycle.createView(Model => {
    let items$ = Model.get("items$");
    let active$ = Model.get("active$");
    return {
      vtree$: items$.combineLatest(active$, (items, active) => {
        return (
          <div>
            <nav>
              {items.map(item =&gt;
                <div class="{makeClass({&quot;item&quot;:">
                  {item}
                </div>
              )}
            </nav>
            <p>
              Selected: <b>{active}</b></p></div>

Cycle.registerCustomElement("Slider", (User, Props) => {
  let Model = Cycle.createModel((Intent, Props) => ({
    id$: Props.get("id$"),
    value$: Props.get("value$")
      .merge(Intent.get("changeValue$"))
      .startWith(0),
  }));

  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let value$ = Model.get("value$");
    return {
      vtree$: value$.combineLatest(id$, (value, id) => (
        <div class="form-group">
          <label>Amount</label>
          <div class="input-group">
            <input placeholder="Amount" value="{value}" type="range">
            <div class="input-group-addon">
              <input readonly="1" value="{value}" type="text">
            </div>
          </div>
        </div>
      )),
    };
  });

});
  var randomCount = randomInt(names.length - 1);
  var randomItems = range(randomCount).map(function () {
    return randomFrom(names);
  });
  return Array.from(new Set(randomItems));
}

var Model = Cycle.createModel(function () {
  return {
    active$: Rx.Observable.interval(2000).map(function () {
      return generateRandomActive(data);
    }) };
});

var View = Cycle.createView(function (Model) {
  return {
    vtree$: Model.get("active$").map(function (active) {
      return h("div", null, [h("Menu", { items: data, active: active })]);
    }) };
});

Cycle.createDOMUser("main").inject(View).inject(Model);

},{"../../common/scripts/shims":3,"./menu":2,"cyclejs":"cyclejs","lodash.range":4}],2:[function(require,module,exports){
"use strict";