Tutorial de React

O que vai construir

Um pequeno formulário de contacto — campo com etiqueta, botão de envio, estado controlado, comportamento real de teclado e leitor de ecrã — primeiro simples, depois estilizado, em cerca de 10 minutos.

Antes de começar

Precisa de git, Node 22 ou posterior e pnpm 10 ou posterior. Qualquer projeto React 18+ serve — Next.js, Vite ou React simples.

Passo 1 — Obter o código

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install
pnpm test        # vitest + @testing-library/react
pnpm run storybook   # browse all 571 components

Os componentes são ficheiros planos em components/ — Button.tsx, TextInput.tsx — cada um com o seu teste, a sua story e a sua documentação ao lado. Copie os ficheiros de que precisa para a sua aplicação, ou traga o repositório e importe a partir dele.

Passo 2 — O seu primeiro componente

import Button from "lily-design-system-react-headless/components/Button";

export function SaveBar() {
  return <Button onClick={save}>Save</Button>;
}

Renderiza <button class="button" type="button">. Props: type, disabled, pressed (renderiza aria-pressed), label (um aria-label para substituir), className, e qualquer atributo adicional é espalhado no elemento raiz.

Passo 3 — Componha um pequeno formulário

import { useState } from "react";
import Form from ".../components/Form";
import Field from ".../components/Field";
import TextInput from ".../components/TextInput";
import Button from ".../components/Button";

export function ContactForm() {
  const [name, setName] = useState("");
  return (
    <Form label="Contact form" onSubmit={handleSubmit}>
      <Field label="Full name" required>
        <TextInput id="name" label="Full name" value={name} onChange={setName} required />
      </Field>
      <Button type="submit">Save</Button>
    </Form>
  );
}

Field recebe o label como a sua própria prop em vez de um componente de etiqueta aninhado — passe-a uma vez, em Fielde TextInputcorrespondente de label fornece o nome acessível.

Passo 4 — Estilize-o

Tudo o que está acima é renderizado como estrutura pura, pronta para os seus estilos. Estilize os ganchos — .button, .text-input, .label, .field — na sua folha de estilos, sobreponha utilitários Tailwind através de className, ou ligue um tema pronto:

<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />

Passo 5 — Veja tudo a funcionar

A aplicação de exemplo Next.js é o catálogo completo estilizado e demonstrado, com Playwright e2e e uma linha de base axe-core:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-next-examples
pnpm install && pnpm run dev

Passos seguintes

• Temas — alternância em tempo de execução com o auxiliar theme-picker do React.
• Auxiliares de preferências — idioma e tamanho do texto.
• Catálogo de componentes — propriedades, ARIA e teclado por componente.

Dúvidas pelo caminho? A página de ajuda está cheia de respostas — e se algum passo puder ser mais claro, diga-nos e melhoraremos o tutorial com todo o gosto.