Create Application

Jet.js applications have a modular design structure. One main file is connected to a webpage and serves as an entry point for the whole application.

Everything in the Jet.js application is either a component or a static resource (image, font). Components are usually located in separate JavaScript files and are imported as a module when required. Components can be imported and reused many times in your application.

Prepare index.html

The first step is to connect the JSX interpreter. Insert the interpreter using the script tag into a webpage. If whole project requires Jet.js, insert the script into index.html in the root folder.

<head>
  <script src="jeti/index.js"></script>
</head>

Add one more JavaScript file into a webpage. This will be a main file and an entry point for the application. To add a Jet.js application, it is required to specify its type by using type="text/jet".

<head>
  <script src="jeti/index.js"></script>
  <script type="application/jet" src="app.js"></script>
</head>

Now add an HTML node which will be a root node for the application. For example, a <div> with an id attribute. This id is used as a reference for a render function.

<body>
  <div id="app"></div>
</body>

Create App Component

Create a JavaScript file. This is the main file for the application and its entry point. The name of the file should match the name specified previously in the <script> tag.

Three important pieces must be present in the application’s main file.

1. Import a render function:

import {render} from 'jete';

2. Create a main component:

function App() {
  return <h1>Hello!</h1>;
}

3. Use render to mount an application to the DOM:

render(
  <App />,
  document.getElementById('app')
);

Below are full snippets of index.html and app.js ready to use as a basis for your first Jet.js application.

This and other examples are available at https://github.com/jetjs/examples

index.html

<html>
  <head>
    <script src="jeti/index.js"></script>
    <script type="application/jet" src="app.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

app.js

import {render} from 'jete';

function App() {
  return <h1>Hello!</h1>;
}

render(
  <App />,
  document.getElementById('app')
);

Installation

Start Application