Skip to content

Instantly share code, notes, and snippets.

@grommetux

grommetux/grommet_hello_world.html

Last active June 21, 2018 19:33
Show Gist options
  • Save grommetux/fb257dcd546a58070db9 to your computer and use it in GitHub Desktop.
Save grommetux/fb257dcd546a58070db9 to your computer and use it in GitHub Desktop.
Download ZIP
Grommet Hello World app
Raw
grommet_hello_world.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700' rel='stylesheet' type='text/css'>
<link href='http://grommet.io/assets/latest/css/grommet.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="http://grommet.io/assets/latest/grommet.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
class HelloWorldApp extends React.Component {
render () {
return (
<Grommet.App>
<Grommet.Title>Hello World</Grommet.Title>
<p>Hello from a Grommet page!</p>
<p>Now, head back to the <a href="https://grommet.github.io/docs/hello-world/">Hello World</a> guide to continue your Grommet exploration.</p>
</Grommet.App>
);
}
};
var element = document.getElementById('content');
ReactDOM.render(React.createElement(HelloWorldApp), element);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment