#Render dalam Container

Gunakan ctx.render() untuk merender konten ke container saat ini (ctx.element), mendukung tiga bentuk berikut:

#ctx.render()

#Render JSX

ctx.render(<button>Button</button>);

#Render Node DOM

const div = document.createElement('div');
div.innerHTML = 'Hello World';
ctx.render(div);

#Render String HTML

ctx.render('<h1>Hello World</h1>');

#Catatan JSX

RunJS dapat langsung merender JSX, baik menggunakan React/library komponen bawaan maupun memuat dependensi eksternal sesuai kebutuhan.

#Menggunakan React dan Library Komponen Bawaan

const { Button } = ctx.libs.antd;

ctx.render(<Button>Click</Button>);

#Menggunakan React dan Library Komponen Eksternal

Memuat versi tertentu sesuai kebutuhan melalui ctx.importAsync():

const React = await ctx.importAsync('react@19.2.4');
const { Button } = await ctx.importAsync('antd@6.2.2?bundle');

ctx.render(<Button>Click</Button>);

Cocok untuk skenario yang membutuhkan versi tertentu atau komponen pihak ketiga.

#ctx.element

Penggunaan yang tidak direkomendasikan (sudah deprecated):

ctx.element.innerHTML = '<h1>Hello World</h1>';

Cara yang direkomendasikan:

ctx.render(<h1>Hello World</h1>);