React

Facebook-React and Art-React

CaffeineScript is ideal for React-style programming.

Facebook React

# Actually import the libraries
# and create Factories instead of using JSX.
import &react, &reactdom, &ArtStandardLib.createObjectTreeFactories
  [] :div
  React.createElement

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

  componentDidMount: ->
    @interval = setInterval 
      -> 
        @setState (prevState) -> 
          secondsElapsed: prevState.secondsElapsed + 1      
      1000

  componentWillUnmount: ->
    clearInterval @interval

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

render Timer, mountNode

// JSX
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);

Art React

It should come as no surprize that if you are using my ArtSuite with ArtReact, this same component is even leaner. Note that this a standard Facebook-React example chosen at random, not one that is especially great in ArtReact.

This is a complete, runnable example. I don't know where the 'mountNode' is defined in the Facebook-react example, so I assume there is more boilerplate code to get to first base.

import &ArtSuite

class Timer extends ArtReact.Component
  @stateFields secondsElapsed: 0

  componentDidMount: ->
    @interval = setInterval 
      -> @secondsElapsed += 1
      1000

  componentWillUnmount: ->
    clearInterval @interval

  render: ->
    CanvasElement
      RectangleElement color: #eee
      TextElement text: "" Seconds Elapsed: #{@secondsElapsed}

initArtSuiteApp MainComponent: Time