basic JSX transpilation example

Update

// this
const jsx = (
<div id="test">
<Component key={"value"} />
</div>
);
// becomes this
const jsx = callback(
// tag name or component
"div",
// 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"; }
Test.call({}); // it's OK
// ES6+
class Test {}
Test.call({}); // 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

Update


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"});
data;
// {other: "data", and: "more"}
const data = Object.assign({nough: 1}, {moar: "data"});
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

Update

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