Skip to content

Instantly share code, notes, and snippets.

@bkeating

bkeating/index.html

Created September 6, 2018 17:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bkeating/5c5132607debbf8a0df933b7ba998cff to your computer and use it in GitHub Desktop.
Save bkeating/5c5132607debbf8a0df933b7ba998cff to your computer and use it in GitHub Desktop.
Download ZIP
React + JSX + LESSCSS in a single HTML file. No precompiling or bundler necessary. A poor man's JSBin.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React + JSX + LESSCSS</title>
<!-- LESS style must come before the actual loading of less.js -->
<style type="text/less">
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// A pure function React component
const Grid = (props) => (
<div className="container">
{props.children}
</div>
);
ReactDOM.render(
<Grid>
<h1>
React + JSX + LESSCSS
</h1>
<p>
Page loaded at:
{' '}
{Date()}
</p>
</Grid>,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment