basic JSX transpilation example


// this
const jsx = (
<div id="test">
<Component key={"value"} />
// becomes this
const jsx = callback(
// tag name or component
// all properties (attributes)
{id: "test"},
// zero, one, or more children
callback(Component, {
key: "value"

Photo by Umanoide on Unsplash

Strictly guarded by default

// ES5
function Test() { "use strict"; }{}); // it's OK
// ES6+
class Test {}{}); // it throws

Some Background

The Pattern

Photo by ALAN DE LA CRUZ on Unsplash

A wild uhtml-intents helper appears

import {define, intent}…

Photo by JJ Ying on Unsplash


Photo by vaun0815 on Unsplash

A Home Made Registry

Photo by Alexander Sinn on Unsplash

A quick recap

What does Object.assign do?

const data = {};
Object.assign(data, {other: "data"}, {and: "more"});
// {other: "data", and: "more"}
const data = Object.assign({nough: 1}, {moar: "data"});
// {nough: 1, moar: "data"}

How else can we use Object.assign?

Photo by Vishal Jadhav on Unsplash

What are hooks?

Photo by Sonja Langford on Unsplash


As Independent Libraries Author

Andrea Giammarchi

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store