These methods are called in the following order when a class Component is created and rendered:
this.update() on a class Component, these methods are called in the
This method is called when a class Component has unmounted (detached from the DOM):
In SSR, non of the lifecycle hook are called.
Nano JSX does never update a class Component automatically. You have to call
update() manually. On every component you call
update(), the root element needs to be a DOM element or a Fragment of DOM
You can call
update() from parent Components to
update() its child Components through Callback Refs or directly. Since the parent
Component updates, it will then re-mount the child Components.
You can call
update() from child Components, to
update() its parent Components. For more info, check the
update Components example.
The class Component
update(update?: any) method can receive an optional first
argument, which can be typeof any. When provided it will be passed as parameter to the Components
render(param) function and can be accessed inside it.
You can simply pass props to children as you are used to in other JSX libraries.
Nano JSX escapes text as a default behavior, this behavior protects your application from crises such as XSS attacks, but sometimes you want not to escape text. Nano JSX provides API for that time as well as React.
dangerouslySetInnerHTML, this naming is same as React, allows you to set HTML directly.
Nano JSX does not escape a text node in
<noscript />, and also all
<Helmet /> for usability.
A more readable alternative style:
Nano JSX offers an optional
withStyles() HOC (Higher Order Component) to style your Components.
You can simply pass your css as a string, or use an appropriate loader, for Webpack or similar, to import css or sass/scss files.
You can pass to
withStyles() an array of (or separated by a comma):
For an example configuration using Webpack and
withStyles(). with Sass/SCSS, have a look at the
Nano JSX Template
This example demonstrates how to render a functional Component with pre-defined styles using
withStyles(). For a more in depth example, check out the
You can easily convert your Components to WebComponents via defineAsCustomElements().