linkDOM Renderer

Render-JSX provides CommonDOMRenderer class for rendering DOM elements in the browser:

1linkimport { CommonDOMRenderer } from 'render-jsx/dom';

2link

3linkconst renderer = new CommonDOMRenderer();

4linkrenderer.render(

5link  <div>

6link    <b>Hellow</b> World!

7link  </div>

8link).on(document.body);

CommonDOMRenderer creates DOM elements and renders them directly to the document (or wherever you target them) without any layers in-between, making it as fast as browser's own DOM APIs.

info IMPORTANT

Even when you are not using .render() function, you need a renderer object (named renderer) in the context for creation of DOM elements.

So this is incorrect:

1linkfunction f() {

2link  return <div>~~~~~<b>~~~Hellow~~~~~~</b>~~~~ World!~~~~~~~</div>~~~~~~

3link}

And this is the correct version:

1linkfunction f(renderer) {

2link  return <div><b>Hellow</b> World!</div>

3link}

1linkconst renderer = new CommonDOMRenderer();

2linkrenderer.render(f(renderer)).on(document.body);

linkVariables and Expressions

You can render variables and expressions inside your elements using {} syntax:

1linkconst target = 'World';

2linkrenderer.render(

3link  <div>Hellow {target}!</div>

4link).on(document.body);

linkProperties

You can set properties (attributes) of elements to strings or custom expressions / variables:

1linkconst placeholder = 'enter something';

2link

3linkrenderer.render(

4link  <div class='ladida'>

5link    <input type='text' placeholder={placeholder}/>

6link  </div>

7link)

linkInner HTML

You can set inner html of an element using _content property:

1linkimport { CommonDOMRenderer } from 'render-jsx/dom';

2linkimport marked from 'marked';

3link

4linkconst renderer = new CommonDOMRenderer();

5linkconst markdown = marked('**Hellow** World!');

6link

7linkrenderer.render(

8link  <div _content={markdown}/>

9link).on(document.body);