Documentation
Getting Started
Template (Node.js/Browser)
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...Important Things
It is important to know that the beauty of Nano JSX is, that it is so close to the DOM, that you can easily mix Vanilla JS and Nano JSX however you want.
You can:
render()multiple Nano JSX application on the same page.-
Call
render()inside a Component to render another Nano JSX Component to another DOM Element. - Manipulate the DOM from inside a Component.
- and much more...
Please have a closer look at the code below. You would probably never do this in a framework like React, but in Nano JSX you have the freedom to use JSX however you like. All you see here is valid. If you use Nano JSX cleverly, you will love its flexibility and make fast apps.
loading...Component Lifecycle
Mounting
These methods are called in the following order when a class Component is created and rendered:
constructor()willMount()render()didMount()
Updating
When calling this.update() on a class Component, these methods are called in the
following order:
willUpdate()render()didUpdate()
Unmounting
This method is called when a class Component has unmounted (detached from the DOM):
didUnmount()
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.
Provide dynamic content on update
The update(update?: any) method can receive an optional argument. When provided
it will be passed as parameter to the Components render(param) function and can
be accessed inside it.
Component Props
You can simply pass props to children as you are used to in other JSX libraries.
loading...State and Store
- Store is reactive, State isn't.
- You can access every State and Store from any component (functional and class).
- Store can be persisted in localStorage and sessionStorage.
- Store needs to be unsubscribed in didUnmount().
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):
string- object that has
toString() - function that returns a
string
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...