React: Getting Started

Prerequisites

• - Node.js 20+ and npm/pnpm/yarn.
• - A project scaffold for your framework (Vite, Next.js, Angular CLI, or Vue tooling).
• - Basic familiarity with custom-element event handling.

Step 1: Install Packages

Install the required package set for this framework integration.

npm install @diwacopilot/components @diwacopilot/components-react

Step 2: Register and Initialize

Register components once at app startup so every page can render Diwa elements correctly.

import React from 'react';
import { DButton } from '@diwacopilot/components-react';

export function App() {
  return <DButton variant="primary">Save</DButton>;
}

Step 3: Render Your First Component

Start with a simple action component to verify styling, registration, and framework rendering.

import { DButton } from '@diwacopilot/components-react';

export function SaveAction() {
  return <DButton variant="primary">Save</DButton>;
}

Step 4: Handle Events

Wire event handling early to validate data flow and interaction behavior in your app.

import { DSelect } from '@diwacopilot/components-react';

export function RegionSelect() {
  return (
    <DSelect
      label="Region"
      onUpdate={(event: CustomEvent<{ value: string }>) => {
        console.log(event.detail.value);
      }}
    />
  );
}

SSR and Testing Notes

• - React wrapper components handle custom-element registration for browser rendering.
• - For SSR apps, follow the Next.js integration route when hydration constraints apply.
• - In tests, wait for custom element upgrades before asserting behavior that depends on internal DOM.

Troubleshooting

• - If TypeScript cannot find wrapper symbols, verify @diwacopilot/components-react is installed in the app.
• - If event handlers do not fire, validate the exact event name from the component API page.
• - If styling appears inconsistent, confirm Diwa token variables are available in global styles.

Next Actions