tzkmx
5/31/2016 - 11:05 PM

Grommet Hello World app

Grommet Hello World app

grommet_hello_world.html
content_copyfile_download
<!DOCTYPE html>
<html>
<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/0.14.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/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">

    var HelloWorldDashboard = React.createClass({
      render: function () {
        return (
          <Grommet.Tiles fill={true}>
            <Grommet.Tile align="start">
              <p>Hello from a Grommet page!</p>
              <p>Now, come back to the <a href="http://grommet.io/docs/documentation#understanding-grommet">Hello World</a> guide to continue your Grommet exploration.</p>
            </Grommet.Tile>
          </Grommet.Tiles>
        );
      }
    });

    var App = React.createClass({
      render: function() {
        return (
          <Grommet.App>
            <Grommet.Header direction="row" justify="between" large={true} pad={{horizontal: 'medium'}}>
              <Grommet.Title>Hello World</Grommet.Title>
            </Grommet.Header>
            <Grommet.Section pad={{horizontal: 'medium'}}>
              <HelloWorldDashboard />
            </Grommet.Section>
          </Grommet.App>
        );
      }
    });

    var element = document.getElementById('content');
    ReactDOM.render(React.createElement(App), element);
  </script>
</body>
</html>