React 教學
有型別嘅函式元件,每個一個檔案,以標準嘅
value + onChange 模式受控 — 一切都照 React 本來嘅方式運作。
你會建立啲乜
一個細細個嘅聯絡表單 — 有標籤嘅輸入欄、提交按鈕、受控狀態、真實嘅鍵盤同螢幕閱讀器行為 — 先裸奔,再加樣式,大約 10 分鐘。
開始之前
你需要 git、Node 22 或以上,同 pnpm 10 或以上。任何 React 18+ 項目都得 — Next.js、Vite 或者純 React。
步驟 1 — 攞到程式碼
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
元件係平放嘅檔案,位於 components/ —
Button.tsx, TextInput.tsx — 每個旁邊都有佢嘅測試、story 同文件。將你需要嘅檔案複製入你嘅應用程式,或者 vendor 倉庫然後由佢匯入。
步驟 2 — 你第一個元件
import Button from "lily-design-system-react-headless/components/Button";
export function SaveBar() {
return <Button onClick={save}>Save</Button>;
}
渲染成 <button class="button" type="button">。屬性:
type, disabled, pressed (渲染
aria-pressed), label (一個
aria-label 覆蓋), className,而任何額外屬性都會展開到根元素上。
步驟 3 — 組合一個細表單
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 將可見嘅 label 當作佢自己嘅屬性,而唔係嵌套嘅標籤元件 — 傳入一次,喺
Field,同 TextInput喺
label 提供無障礙名稱。
2026-08-29 已驗證: 較早嘅草稿喺 Label 入面嘅 Field元件,令佢渲染咗
兩個 標籤(其中一個係空嘅),因為 Field 已經由 label 屬性 — 編譯準確片段先發現。
組合聯絡表單路由
係同一個模式,由真實嘅 e2e 同 axe 測試驗證過。
步驟 4 — 加樣式
以上所有內容都渲染為純結構,準備好套用你嘅樣式。為掛鉤加樣式 — .button,
.text-input, .label, .field — 喺你嘅樣式表,透過 className疊加 Tailwind 工具類,或者連結現成主題:
<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />步驟 5 — 睇晒佢運作
Next.js 範例應用程式 係完整目錄嘅樣式同示範,附 Playwright e2e 同 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