John Vincent

JSBin

Getting started with JSBin

JSBin

by John Vincent

Posted on May 2, 2017

Putting all of this stuff here so it doesn't end up sprayed everywhere.

General

JSBin

React

Start with a blank JSBin.

Enter the following Html

<!DOCTYPE html>
<html>

<head>
	<title>My App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head>

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

</html>

Add Library

  • React and React DOM 15.1.0

Change JavaScript to ES6 / Babel

Enter the following JavaScript

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('app')
);

Add a Component

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

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