This content originally appeared on DEV Community and was authored by Nikita Grechino
JSX is the starting point
React uses JSX to make things easier for the developers. So when you write something like this.
<div id="foo">
Hello!
</div>
Babel with a react preset transforms it to this.
React.createElement("div", {
id: "foo"
}, "Hello!");
Check out this example in Babel REPL.
React.createElement is a function that creates a virtual node.
It's a well-known fact, and you probably already know it. So what's the point?
Preact way
If you've used Preact before, you may notice it has an unobvious export in its source code.
export {
createElement,
createElement as h,
} from './create-element';
To make things clear, the createElement function from Preact serves the same needs as React.createElement. So the question is, why is it exported as h as well?
The reason is dead simple. It's exported as h because it's a hypescript function.
So what exactly is hypescript?
Hyperscript is the key
Hypescript is a kind of language to create HyperText with JavaScript and was started by Dominic Tarr in 2012. He was inspired by markaby, the "short bit of code" to write HTML in pure Ruby.
Markaby allows doing things like that.
require 'markaby'
mab = Markaby::Builder.new
mab.html do
head { title "Boats.com" }
body do
h1 "Boats.com has great deals"
ul do
li "$49 for a canoe"
li "$39 for a raft"
li "$29 for a huge boot that floats and can fit 5 people"
end
end
end
puts mab.to_s
And the h function allows doing essentially the same thing, but with different syntax.
h = require("hyperscript")
h("div#foo", "Hello!")
It also supports nesting and CSS properties.
h = require("hyperscript")
h("div#foo",
h("h1", "Hello from H1!", { style: { 'color': 'coral' } })
)
Check out an interactive demo to see how it works.
Get your hands dirty
Now when we know what the h function does and why we need it, let's write our own version of it. Complete example can be found on codesanbox.
First, let's make up a render function, that creates real DOM elements from our virtual nodes.
const render = ({type, children, props}) => {
const element = document.createElement(type);
if (props) {
for (const prop in props) {
element.setAttribute(prop, props[prop]);
}
}
if (children) {
if (Array.isArray(children)) {
children.forEach(child => {
if (typeof child === 'string') {
element.innerText = child;
} else {
element.appendChild(render(child));
}
})
} else if (typeof children === 'string') {
element.innerText = children;
} else {
element.appendChild(render(children));
}
}
return element;
}
Than, let's create the h function.
const h = (type, children, props) => {
let handledType = typeof type === 'string' ? type : 'div';
return {
type: handledType,
props,
children
}
}
Finally, let's create an actual content with our h function, render it with our render function and mount the result to the DOM.
const div = render(
h('div',
[
h('h1', 'Hello!', { id: 'foo' }),
h('h2', 'World!', { class: 'bar' })
],
)
);
document.querySelector('#app').appendChild(div);
This content originally appeared on DEV Community and was authored by Nikita Grechino
Nikita Grechino | Sciencx (2021-12-29T18:38:31+00:00) Hyperscript – the hidden language of React. Retrieved from https://www.scien.cx/2021/12/29/hyperscript-the-hidden-language-of-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.