Playing with React 0.14 in CodePen

17 Nov 2015

What is CodePen anyway?

Taken from the website itself, here what they said > CodePen is a playground for the front end web.

While I’m not a front end developer (yet), but it’s nice to have a place to demo my learning on React.

• First create an account on CodePen (obviously), you can use free account.
• Create new Pen, on JavaScript settings, choose Babel as preprocessor
• Still on JavaScript settings, add external Javascript for https://fb.me/react-0.14.2.min.js (React) and https://fb.me/react-dom-0.14.2.min.js (ReactDom)

That’s it, now we can write some React.

The Code

Let’s put a div as placeholder for our React component.

<div id="hello"></div>

and here a classic HelloWorld in React, please note that I use ES6 syntax.

class HelloComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

ReactDOM.render(<HelloComponent />, document.getElementById('hello'));

Here my very first CodePen demo :

See the Pen Hello World from React 0.14 by Gilang Chandrasa (@gchandrasa) on CodePen.