Skip to content

Instantly share code, notes, and snippets.

@jtrussell

jtrussell/index.html

Last active March 25, 2020 14:11
Show Gist options
  • Save jtrussell/1d9b5dbb7a8a70583910456b5f67239b to your computer and use it in GitHub Desktop.
Save jtrussell/1d9b5dbb7a8a70583910456b5f67239b to your computer and use it in GitHub Desktop.
Download ZIP
React boilerplate for jsbin
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- uncomment for local dev -->
<!--
<link rel="stylesheet/less" type="text/css" href="main.less">
-->
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<!-- Uncomment for local dev -->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.15.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>
<script src="main.jsx" type="text/babel"></script>
-->
</body>
</html>
Raw
main.jsx
class Greeter extends React.Component {
render() {
return (
<p className="greeter">
Hello, {this.props.moniker}!
</p>
)
}
}
ReactDOM.render(
<Greeter moniker="World" />,
document.getElementById('app')
)
Raw
main.less
.greeter {
border: 1px solid red;
}
@jtrussell
Copy link
Author

jtrussell commented Oct 1, 2016 •
edited
Loading

A minimal template for working with React in jsbin:

If local development is more your speed:

  • Clone this gist or download and unpack the zip
  • Uncomment the commented out styles and scripts
  • Serve with your favorite static file server (or mine)
  • Enjoy

@mhackersu
Copy link

Thank you for sharing @jtrussell 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment