React eğitimi — Lily Design System

Ne oluşturacaksınız

Küçük bir iletişim formu — etiketli girdi, gönder düğmesi, denetimli durum, gerçek klavye ve ekran okuyucu davranışı — önce çıplak, sonra biçimlendirilmiş olarak, yaklaşık 10 dakikada.

Başlamadan önce

git, Node 22 veya üstü ve pnpm 10 veya üstü gerekir. Herhangi bir React 18+ projesi olur — Next.js, Vite veya düz React.

Adım 1 — Kodu edinin

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

Bileşenler şurada düz dosyalar olarak durur: components/ — Button.tsx, TextInput.tsx — her birinin testi, story'si ve belgeleri yanındadır. İhtiyacınız olan dosyaları uygulamanıza kopyalayın ya da depoyu getirip oradan içe aktarın.

Adım 2 — İlk bileşeniniz

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

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

Şunu işler: <button class="button" type="button">. Prop'lar: type, disabled, pressed (şunu işler: aria-pressed), label ( aria-label geçersiz kılmak), classNameve fazladan her öznitelik kök öğeye yayılır.

Adım 3 — Küçük bir form oluşturun

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 görünür label kendi prop'u olarak alır, iç içe bir etiket bileşeni olarak değil — bir kez geçirin, Fieldve TextInputile eşleşen label erişilebilir adı sağlar.

2026-08-29'da doğrulandı: önceki bir taslak Label içinde Fieldbileşeni yerleştirmişti; bu da iki etiket (biri boş) işlenmesine yol açtı, çünkü Field kendi etiketini zaten label prop'u — tam kod parçası derlenerek yakalandı. Şu rota: Bileşik iletişim formu rotası aynı kalıptır ve gerçek e2e ve axe testleriyle sınanır.

Adım 4 — Biçimlendirin

Yukarıdaki her şey saf yapı olarak işlenir, stillerinize hazırdır. Kancaları biçimlendirin — .button, .text-input, .label, .field — stil sayfanızda, Tailwind yardımcılarını şunun üzerinden katmanlayın: classNameveya hazır bir temayı bağlayın:

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

Adım 5 — Hepsinin çalıştığını görün

Next.js örnek uygulaması tüm kataloğu biçimli ve demolu olarak, Playwright e2e ve axe-core taban çizgisiyle sunar:

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

Sonraki adımlar

Temalar — React theme-picker yardımcısıyla çalışma anında geçiş.
Tercih yardımcıları — dil ve metin boyutu.
Bileşen kataloğu — bileşen başına özellikler, ARIA ve klavye.

Yol boyunca sorunuz mu var? Yardım sayfası yanıtlarla dolu — ve bir adım daha açık olabilirse, bize söyleyin ve eğitimi memnuniyetle iyileştirelim.