HTML-like — komponen semantik NexaJS

NexaJS menyediakan primitif yang menyerupai tag HTML (Div, P, Span, Section, Article, H1, H2) serta HtmlButton untuk tombol yang dapat berisi anak. Fungsi createHTMLElement("tag") menghasilkan komponen tambahan (mis. div, ul, li) agar pola markup terasa familiar di atas React Native.

Alur penggunaan di aplikasi

Pendaftaran route — Default export layar terdaftar sebagai "Html" di MenuComponents (judul header: "Html Dom").
Navigasi — navigation.navigate("Html"). Konfigurasi route · MenuComponents.
Render — Satu pohon: Div root → Section header → Article berisi kartu counter (HtmlButton + teks) dan daftar fitur (List / ListItem hasil createHTMLElement).

Cuplikan cepat

Tag siap pakai + createHTMLElement

import {
  useState,
  StyleSheet,
  Div, P, Span, HtmlButton, H1, H2, Section, Article,
  createHTMLElement,
} from "NexaJS";

const Card = createHTMLElement("div");
const List = createHTMLElement("ul");
const ListItem = createHTMLElement("li");

export default function Screen() {
  const [count, setCount] = useState(0);
  return (
    <Div style={{ padding: 20 }}>
      <H1>Judul</H1>
      <Card>
        <P>Nilai: <Span>{count}</Span></P>
        <HtmlButton onPress={() => setCount(count + 1)}>
          <P>+1</P>
        </HtmlButton>
      </Card>
      <List>
        <ListItem><P>Item</P></ListItem>
      </List>
    </Div>
  );
}

Komponen yang dipakai di demo

Simbol	Peran pada layar
`Div`	Kontainer root dan baris tombol (`buttonContainer`).
`Section`	Blok header dengan judul dan paragraf pembuka.
`Article`	Isi utama: counter + daftar.
`H1` / `H2`	Judul halaman dan subjudul section.
`P` / `Span`	Teks paragraf; `Span` untuk angka counter yang ditebalkan berwarna.
`HtmlButton`	Tombol dengan `onPress`; anak berisi `P` berlabel.
`Card` / `List` / `ListItem`	Alias dari `createHTMLElement("div" \| "ul" \| "li")`.

Interaksi counter

State count diubah lewat dua HtmlButton: satu memanggil setCount(count - 1), satu setCount(count + 1). Pola sama dengan TouchableOpacity biasa, hanya pembungkusnya berbeda.

Gaya

Semua node memakai StyleSheet.create standar React Native (warna, radius, bayangan, flex row pada kontainer tombol). Tidak ada gaya bawaan “browser”; yang Anda set di style yang menentukan tampilan.

Import

Pada referensi, useState diimpor dari NexaJS (bukan react). Samakan dengan konvensi proyek Anda jika bundler mengharuskan sumber tertentu.

Praktik yang disarankan

Gunakan nama tag yang didukung implementasi createHTMLElement; tag tidak dikenal bisa gagal di runtime.
Tetap anggap ini komponen RN: aksesibilitas, fokus, dan perilaku sentuh mengikuti lapisan NexaJS di bawahnya.
Untuk daftar data dinamis, ganti daftar statis dengan map ke ListItem seperti pola RN umum.
Selaraskan tipografi dengan fs atau FontFamily bila ingin konsisten dengan layar lain.

Nxdom Framework