natew

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

natew

  view SayHi  {
    let size = 10

    <h1>hello</h1>
    <button onClick={() => size += 20}>up</button>

    $h1 = { fontSize: size, color: 'blue' }
  }

natew

            if (t.isArrayExpression(node.right)) {
              let staticProps = []

              node.right.elements = node.right.elements.map(el => {
                if (!t.isObjectExpression(el)) return el
                let { statics, dynamics } = extractStatics(el)
                if (statics.length) staticProps.push(statics)
                if (dynamics.length) return t.objectExpression(dynamics)
                else return null

natew

store Farm {
  @animals = ['cow', 'chicken', 'turkey']
}

view Main {
  @name = 'Horse'

  setAnimal = animal => @name = animal

  <h1>Select your favorite animal</h1>

natew

    return (
      <ListItem.item
        key={key || index}
        onTap={this.handleTap.bind(this)}
        title={article.get('title')}
        after={articleRight}
        index={index}
        noicon
        {...props}>
        {stats}

natew

store Tasks {
  @tasks = []
  @undone <- @tasks.filter(task => !task.done)

  makeTask(task) { return { title: title, done: false } }

  addTask() { @tasks.push(makeTask(task)) }
  clear() { @tasks = @undone }
}

natew

type Todo {
  completed : bool
  text : string
}

state Todos { number: Todo } {
  completed < filter('completed')
  uncompleted < intersect(completed)

  add(data) {

natew

<ViewList animator> // passes context: { step: 0.555 }
  <View /> // extends context with { index: 0 }
  <View /> // ...
  <View>  // extends context with { index: 2 }
  
    // here's the tricky part: you can nest ViewLists, and they should pass their "new" context down to their children
    <ViewList> // reset context { step: 0 }
      <View /> // reset context { index: 0 }
    </ViewList>
  </View>

natew

Book
  author <- #authors(data.authorId).name

  <div.book>
    <img src={data.source}>
    <div.title>{data.title}</div>
    {showAuthor? <div.author>by {author}</div>}
  </div>
 
Main

natew

/* WEBPACK VAR INJECTION */(function(module) {/* REACT HOT LOADER */ if (true) { (function () { var ReactHotAPI = __webpack_require__(/*! /Users/nw/projects/reapp/reapp-pack/~/react-hot-loader/~/react-hot-api/modules/index.js */ 236), RootInstanceProvider = __webpack_require__(/*! /Users/nw/projects/reapp/reapp-pack/~/react-hot-loader/RootInstanceProvider.js */ 230), ReactMount = __webpack_require__(/*! react/lib/ReactMount */ 7), React = __webpack_require__(/*! react */ 2); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } (function () {

'use strict';

var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumer