Skip to content

Instantly share code, notes, and snippets.

@bkeating bkeating/index.html
Last active Sep 6, 2018

Embed
What would you like to do?
React + JSX + LESSCSS in a single HTML file. No precompiling or bundler necessary.
<!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
You can’t perform that action at this time.