react-cursor hello-world

by Dustin Getz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://rawgit.com/lodash/lodash/3.10.1/lodash.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://rawgit.com/dustingetz/react-cursor/b056b7e937ec903f32c3f42af33f00e4edbac31c/dist/react-cursor.js"></script>

<div id="root"/>

JavaScript 1.7

let {Cursor} = ReactCursor;

class App extends React.Component {
  shouldComponentUpdate (nextProps) { return this.props.cur !== nextProps.cur; }
  render () {
	  console.log('rendering app');
    return <div>
      <h1>App cursor:</h1>
      <p><code>{JSON.stringify(this.props.cur.value(), undefined, 2)}</code></p>
      <CounterList cur={this.props.cur.refine('counters')} />
		</div>;
  }
}

class CounterList extends React.Component {
  shouldComponentUpdate (nextProps) { return this.props.cur !== nextProps.cur; }
  render () {
    console.log('rendering counter list');
    let {cur} = this.props;
    let clickers =_.map(cur.value(), (count, ix) => {
      return <Clicker key={ix} cur={cur.refine(ix)} />;
    });
    return <div>
      <h2>CounterList cursor:</h2>
      <p><code>{JSON.stringify(this.props.cur.value(), undefined, 2)}</code></p>
      {clickers}
    </div>;
  }
}

class Clicker extends React.Component {
  shouldComponentUpdate (nextProps) { return this.props.cur !== nextProps.cur; }
  render () {
    console.log('rendering clicker');
    let {cur} = this.props;
    return (
      <div>
        <input type="text" value={cur.value()} readOnly/>   
        <button onClick={() => cur.swap(v => v+1)}>+1</button>
        &nbsp;
        <span>Clicker cursor: <code>{JSON.stringify(cur.value(), undefined, 2)}</code></span>
      </div>
    );
  }
}

class AppStateContainer extends React.Component {
  constructor (props) {
    super(props);
    this.state = { counters: _.range(10).map(v => 0) };
  }
  
  render () {
    let cur = Cursor.build(this);
    return <App cur={cur} />;
  }
}

ReactDOM.render(<AppStateContainer />, document.getElementById('root'));