React at CodePen

index.html

<div id="app"></app>

react-at-codepen.markdown

React at CodePen

An easy way to get started at CodePen with React 0.13 and ES6.

A Pen by Lucy Bain on CodePen.

License.

script.babel

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

React.render(<Button />, document.getElementById('app'));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>

style.sass

html, body
  height: 100%
  
body
  background: #333
  display: flex
  justify-content: center
  align-items: center
  font-family: Helvetica Neue
  
h1
  font-size: 2em
  color: #eee
  display: inline-block

a
  color: white
p
  margin-top: 1em
  text-align: center
  color: #aaa