Tutorial React

Ce vei construi

Un mic formular de contact — câmp cu etichetă, buton de trimitere, stare controlată, comportament real al tastaturii și al cititorului de ecran — mai întâi simplu, apoi stilizat, în aproximativ 10 minute.

Înainte să începi

Ai nevoie de git, Node 22 sau mai nou și pnpm 10 sau mai nou. Orice proiect React 18+ merge — Next.js, Vite sau React simplu.

Pasul 1 — Obține codul

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

Componentele sunt fișiere plate în components/ — Button.tsx, TextInput.tsx — fiecare cu testul, story-ul și documentația alături. Copiază fișierele de care ai nevoie în aplicația ta sau adu depozitul și importă din el.

Pasul 2 — Prima ta componentă

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

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

Randează <button class="button" type="button">. Props: type, disabled, pressed (randează aria-pressed), label (un aria-label pentru suprascriere), className, iar orice atribut suplimentar este distribuit pe elementul rădăcină.

Pasul 3 — Compune un formular mic

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 primește label ca propriul prop, în loc de o componentă etichetă imbricată — transmite-o o singură dată, pe Fieldși TextInputcorespunzător din label oferă numele accesibil.

Pasul 4 — Stilizează-l

Tot ce e mai sus se randează ca structură pură, gata pentru stilurile tale. Stilizează cârligele — .button, .text-input, .label, .field — în foaia ta de stil, stratifică utilitare Tailwind prin classNamesau leagă o temă gata făcută:

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

Pasul 5 — Vezi totul funcționând

Aplicația-exemplu Next.js este catalogul complet stilizat și demonstrat, cu Playwright e2e și o linie de bază 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

Pașii următori

• Teme — comutare în timpul rulării cu ajutorul theme-picker pentru React.
• Ajutoare pentru preferințe — limbă și dimensiunea textului.
• Catalogul de componente — proprietăți, ARIA și tastatură pentru fiecare componentă.

Întrebări pe parcurs? Pagina de ajutor este plină de răspunsuri — iar dacă un pas poate fi mai clar, spune-ne și vom îmbunătăți cu plăcere tutorialul.