Skip to content

Instantly share code, notes, and snippets.

@Badestrand
Last active January 28, 2024 12:01
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Badestrand/3609e7c3c88ba47bb9682a4746e513db to your computer and use it in GitHub Desktop.
Save Badestrand/3609e7c3c88ba47bb9682a4746e513db to your computer and use it in GitHub Desktop.
Simple React in browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style rel="stylesheet" type="text/less">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 800px;
margin: 50px auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<main>
<h1>Hello!</h1>
</main>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment