React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Mayank Shukla

HTML

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="app"></div>

Babel + JSX

const Timer = ({currentValue}) => {
  return(
    <div className="Time">
      {currentValue}
    </div>
  );
};

class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {currentValue: 150};

    setInterval(
      () => {
        this.setState({currentValue: this.state.currentValue - 1});
      }, 1000
    );
  }
  resetTimer=()=>{
      this.setState({currentValue:150});
  };

  render() {
    return (
      <div className="App">
        <Timer currentValue={this.state.currentValue} />
        <button onClick={this.resetTimer}>Reset</button>
      </div>
    );
  }
}



ReactDOM.render(
  <App />,
  document.getElementById('app')
);