Setup the latest React in JSBin

#JavaScript #React #ES6 #JSBin

This article will demonstrate how to set up the latest version of React in JSBin. This is particularly useful if you want to test something out and share it quickly.

TL;DR

If you are only interested in the code, go to https://jsbin.com/vixuyu/25/edit?html,css,js,output.

(Disable your Ad Blocks).

A bit of background

React

To make this work you are obviously going to need React. You are also going to need ReactDOM to render HTML.

Get these 2 scripts from

<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>

I got these URLs from https://jsfiddle.net/reactjs/69z2wepo/ which seems to be the official React Fiddle.

Babel

This is where it get trickier. To be able to write JSX/ES6 directly in JSBin, you need to be able to transpile the code with Babel directly in the browser.

Unfortunately, babel-browser has been discontinued. Well guess what; just use babel-standalone instead. It is a non official build of Babel for use in non-Node environments, mainly browsers.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.15.0/babel.min.js"></script>

JSX and ES6

That is it, you are ready to start writting your React app.

In JSBin, change the type of the JS tab from JavaScript to ES6 / Babel and you are ready to go.

index.html

<div id="app">
    <!-- This element's contents will be replaced with your component. -->
</div>

index.js

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('app')
);

Hope that helps !