Get started with React & Babel

Get started with React & Babel.markdown

Get started with React & Babel

A Pen by Surinder pal Singh on CodePen.

License.

index.html

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

script.babel

/*
 * A simple React component
 */
class Application extends React.Component {
  render() {
    return <div>
      <h1>Hello, ES6 and React 0.13!</h1>
      <p>
        More info <a href="https://github.com/bradleyboy/codepen-react" target="_blank">here</a>.
      </p>
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, 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