Jet.js
A JavaScript library for building web applications
A React alternative, 4Kb size with native in-browser JSX support
Component-Based
Components are independent and reusable elements of the web application.
Components allow us to break up the user interface into separate pieces that take care of their own logic and functionality and are easy to maintain.
Built-in JSX Support
JSX is a superset of JavaScript that includes HTML tags into the JavaScript files.
JSX provides an easy declarative markup. HTML tags are located inside JavaScript components, making it possible to separate concerns when each component owns its UI presentation.
State and Lifecycle Hooks
Hooks are special functions that hook into components and manage their state and lifecycle events.
Hooks make pure JavaScript functions actual stateful components.
Add Jet.js to a Website
Start using Jet.js in three steps:
- Include Jet.js engine and JSX interpreter into the HTML
<head>tag. - Add a DOM container. It will be a root node for the application.
- Add the code into the script tag with the type “application/jet“. This can be an inline code fragment or a separate file.
It is important to specify a script type. JSX interpreter translates only scripts with the type “application/jet“.
<html>
<head>
<script src="https://unpkg.com/jete@0.9.3/index.js" crossorigin></script>
<script src="https://unpkg.com/jeti@0.7.2/index.js" crossorigin></script>
<script type="application/jet">
import {render} from 'jete';
render(
<span>Hello!</span>,
document.getElementById('app')
);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>Simple Component
A component is a function which accepts parameters as a props object and returns an HTML-like result.
Use HTML tags in the component’s return statement. The interpreter will translate them into plain and simple JavaScript that browsers can easily understand.
function Greeting(props) {
return (
<div>
Hello {props.name}!
</div>
);
}Component with State
Hooks store local state and guarantee it will be the same during different stages of the component’s lifecycle.
useState hook provides access to a variable in the local state and a function to update it.
This allows the component to manage its own state in addition to props received from the parent component.
import {useState} from 'jete';
function Counter() {
const [counter, setCounter] = useState(0);
return (
<>
<button onClick={() => setCounter(counter + 1)}>Increment</button>
<button onClick={() => setCounter(counter - 1)}>Decrement</button>
Counter: {counter}
</>
);
}