Tiny and simple React clone
APACHE-2.0 License
h()
and render()
API with the support of functional components.useState
, useReducer
and useEffect
hooks, just like real React.import { h, x, render, useState } from 'o.mjs';
const Counter = ({ initialValue = 0 }) => {
const [value, setValue] = useState(initialValue);
return x`
<div className="counter">
<div>${value}</div>
<div className="row">
<button onclick=${() => setValue(value + 1)}>+</button>
<button onclick=${() => setValue(value - 1)}>-</button>
</div>
</div>
`;
};
render(h(Counter, { initialValue: 10 }), document.body);
See it live
Hey, it might be quicker to read the sources than this text. Anyway,
render(component, containerNode)
- renders component
into containerNode
. In other words, it patches the containerNode
to reflect the component
virtual node. Beware, diffing algorithm is very dumb and inefficient. Does not return anything.h(nodeName|Function, properties, ...children)
- returns a virtual node. nodeName
can be a HTML tag name (string) to a functional component (JS function). Properties must be an object. Property names closely reflect DOM Node properties, so use className
instead of class
, also style
is a CSS string, not an object. The only artificial property is k
which is a key used to keep component state between the updates if the position of the component in the DOM tree has changed. Finally, children
is a variadic argument containing other h()
nodes or raw JS strings if you want a text node.x`<div>...</div>`
- syntax sugar to replace multiple h()
calls. Accepts regular HTML code and converts it into virtual node tree. Template placeholders can only be used as tag names, attribute value or text between the tags. Constant attribute values must be double-quoted (even if they are numbers). Tags can be self-closing. Only one top-level tag is allowed. And yes, there must be at least one top-level tag.useState(initialValue)
- returns an array [value, setValue]
of the current state and a setter for the state, that would also trigger an update for the current component.useReducer(reducer, initialValue)
- returns an array [state, dispatch]
of the current state and a function to dispatch an action to the reducer. reducer
is a (state, action) => newState
function that returns a new state based on the current state and the given action. Use this as an alternative to useState
is you need a more complex logic in your states.useEffect(callback, deps)
- tries to fire a callback when component is rendered, but only if the deps
array has changed since the last call. An efficient way to add side effects to your functional components.Finally, what is a functional component? In our case it is a regular JS function that takes two arguments - an object of component properties and a forceUpdate
callback, that will trigger component update once called. Functional components must return a tree of virtual nodes constructed with h()
calls or x` `
syntax.
The library is called "O!". It's a sound of realisation, once you understood how simple it is. Or despair, if you caught a fatal bug after you decided to use this in production. It also resembles a zero, which is a metaphor for both, library footprint and usefulness. More details on how this library originated at https://zserge.com/posts/worst-react-ever/
Code is distributed under Apache 2.0 license, feel free to use it in your proprietary projects as well.