Hello World

The easiest way to learn a framework is by writing a simple application. In this section you will access the Grommet source from our server and you will be able to experiment with Grommet using just an HTML file and your browser. You'll use hosted JavaScript files in this exercise which is not meant to be used in production.

To get started, create a new HTML file on your computer and copy and paste the following code:


<!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.usa.hp.com/assets/__GROMMET_VERSION__/grommet.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="http://grommet.usa.hp.com/assets/__GROMMET_VERSION__/grommet.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">

var HelloWorldDashboard = React.createClass({"{"}
render: function () {"{"}
return (
<Grommet.Section>
<p>Hello from a Grommet page!</p>
<p>Now, come back to the <a href="http://grommet.usa.hp.com/docs/hpe/documentation#understanding-grommet">Hello World</a> guide to continue your Grommet exploration.</p>
</Grommet.Section>
);
{"}"}
{"}"});

var App = React.createClass({"{"}
render: function() {"{"}
return (
<Grommet.App>
<Grommet.Header primary={"{"}true{"}"}>
<Grommet.Title>Hello World</Grommet.Title>
</Grommet.Header>
<HelloWorldDashboard />
</Grommet.App>
);
{"}"}
{"}"});

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

If you open this HTML in your browser you should see the following:

Understanding Grommet

In the example above you used 4 Grommet components: App, Header, Title, and Section. All of these are implemented using a mobile-first design approach. To test the responsiveness of your sample application, let's add a couple of Tiles inside the section:


<Grommet.Tiles>
<Grommet.Tile>
<Grommet.Header>
<h3>I'm First</h3>
</Grommet.Header>
<p>Do I win a prize?</p>
</Grommet.Tile>
<Grommet.Tile>
<Grommet.Header>
<h3>I'm Second</h3>
</Grommet.Header>
<p>So close.</p>
</Grommet.Tile>
<Grommet.Tile>
<Grommet.Header>
<h3>I'm Third</h3>
</Grommet.Header>
<p>I'm just glad to be here.</p>
</Grommet.Tile>
</Grommet.Tiles>

The updated application in a mobile browser should look like this:

Next Steps

Now that you've already played with Grommet, we recommend that you check out the Get Started page and learn how to install Grommet in your local environment.