React

Facebook-React and Art-React

CaffeineScript is ideal for React-style programming.

import &react, &reactdom, &ArtStandardLib.createObjectTreeFactories
  [] :div
  React.createElement

class Timer extends Component
  constructor: ->
    @state = secondsElapsed: 0

  tick: ->
    @setState (prevState) -> 
      secondsElapsed: prevState.secondsElapsed + 1

  componentDidMount: ->
    @interval = setInterval 
      -> @tick()
      1000

  componentWillUnmount: ->
    clearInterval @interval

  render: ->
    Div "" Seconds Elapsed: #{@state.secondsElapsed}

render Timer, mountNode

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}

ReactDOM.render(<Timer />, mountNode);