Documentation

Getting Started

template

loading...

npm (with TypeScript)

loading...
loading...
loading...

deno

Get it from deno.land/x/nano_jsx and have a look at the deno example.

bundle (with Tagged Templates)

loading...

Component Lifecycle

Mounting

These methods are called in the following order when a class Component is created and rendered:

Updating

When calling this.update() on a class Component, these methods are called in the following order:

Unmounting

This method is called when a class Component has unmounted (detached from the DOM):

Server Side (SSR)

In SSR, non of the lifecycle hook are called.

Update/Re-render class Components

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 elements.

Update child Components

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.

Update parent Components from childs

You can call update() from child Components, to update() its parent Components. For more info, check the update Components example.

Provide/Render dynamic content on update

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.

Update Components example

loading...

Component Props

You can simply pass props to children as you are used to in other JSX libraries.

loading...

State and Store

State

loading...

Store

loading...

Context API

loading...

Fragment

loading...

dangerouslySetInnerHTML

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 <script />, <style />, <noscript />, and also all content in <Helmet /> for usability.

loading...

A more readable alternative style:

loading...

withStyles()

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):

Info:

For an example configuration using Webpack and withStyles(). with Sass/SCSS, have a look at the Nano JSX Template

Render Components using withStyles

This example demonstrates how to render a functional Component with pre-defined styles using withStyles(). For a more in depth example, check out the withStyles example.

loading...

CustomElementsMode

You can easily convert your Components to WebComponents via defineAsCustomElements().

loading...
loading...