Composants

Les composants EmberKit sont des fonctions simples qui retournent des éléments JSX. Ils suivent le même modèle mental que React, mais avec zéro overhead runtime par défaut.

Définir un composant

function Button({ children, variant = 'primary' }: { children: unknown; variant?: string }) {
  return (
    <button className={`btn btn-${variant}`}>
      {children}
    </button>
  );
}

Les composants reçoivent un seul objet props et retournent du JSX. Pas de composants classe, pas de méthodes de cycle de vie, pas de liaison this.

Utiliser des composants

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Button variant="secondary">Cancel</Button>
    </div>
  );
}

Children

Les composants peuvent accepter children pour servir de conteneurs :

function Card({ children, title }: { children: unknown; title: string }) {
  return (
    <div className="card">
      <h3 className="card-title">{title}</h3>
      <div className="card-body">{children}</div>
    </div>
  );
}

Rendu conditionnel

Utilisez des expressions JavaScript pour la sortie conditionnelle :

function Status({ online }: { online: boolean }) {
  return (
    <div>
      {online ? <span className="badge-green">Online</span> : <span className="badge-red">Offline</span>}
    </div>
  );
}

Listes

Utilisez map pour rendre des listes avec des props key :

function TodoList({ items }: { items: string[] }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

Statique vs interactif

function Title() {
  return <h1>Hello</h1>;
}

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <button type="button" onClick={() => setCount((c) => c + 1)}>+</button>
      <span data-ek-bind={count}>{count()}</span>
    </div>
  );
}

Détails : Hydratation. Props signal sur les composants : Signals.

Interface de props

Définissez les types de props avec des interfaces TypeScript :

interface ButtonProps {
  children: unknown;
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
}

function Button({ children, variant = 'primary', size = 'md', disabled, onClick }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Prochaines étapes