Mafunzo ya React — Lily Design System

Utakachojenga

Fomu ndogo ya mawasiliano — pembejeo yenye lebo, kitufe cha kutuma, hali inayodhibitiwa, tabia halisi ya kibodi na kisomaji skrini — kwanza bila mapambo, kisha ikiwa na mapambo, kwa takriban dakika 10.

Kabla ya kuanza

Unahitaji git, Node 22 au zaidi, na pnpm 10 au zaidi. Mradi wowote wa React 18+ unafaa — Next.js, Vite, au React ya kawaida.

Hatua ya 1 — Pata msimbo

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

Vipengele ni faili tambarare katika components/ — Button.tsx, TextInput.tsx — kila kimoja kikiwa na jaribio, hadithi, na nyaraka zake kando yake. Nakili faili unazohitaji kwenye programu yako, au chukua hifadhi na uingize kutoka kwake.

Hatua ya 2 — Kipengele chako cha kwanza

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

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

Huonyesha <button class="button" type="button">. Sifa: type, disabled, pressed (huonyesha aria-pressed), label ( aria-label kubatilisha), className, na sifa yoyote ya ziada husambaa kwenye kipengele cha mzizi.

Hatua ya 3 — Unda fomu ndogo

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 huchukua label kama sifa yake yenyewe badala ya kipengele cha lebo kilichowekwa ndani — ipitishe mara moja, kwenye Field, na TextInputinayolingana label hutoa jina linalofikika.

Imethibitishwa 2026-08-29: rasimu ya awali iliweka kipengele tofauti cha Label ndani ya Field, ambacho kilionyesha mbili lebo (moja tupu) kwa sababu Field tayari huonyesha lebo yake yenyewe kutoka kwenye label sifa — ilibainika kwa kukusanya kijisehemu halisi. Njia ya Njia ya fomu ya mawasiliano iliyounganishwa ni mchoro uleule, uliojaribiwa kwa majaribio halisi ya e2e na axe.

Hatua ya 4 — Ipambe

Kila kitu hapo juu huonyeshwa kama muundo safi, tayari kwa mitindo yako. Pamba vishikio — .button, .text-input, .label, .field — katika karatasi yako ya mitindo, ongeza huduma za Tailwind kupitia className, au unganisha mandhari yaliyo tayari:

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

Hatua ya 5 — Ona kila kitu kikifanya kazi

Programu ya mifano ya Next.js ni orodha kamili yenye mapambo na maonyesho, pamoja na Playwright e2e na msingi wa 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

Hatua zinazofuata

Mandhari — kubadili wakati wa utekelezaji kwa kisaidizi cha theme-picker cha React.
Visaidizi vya mapendeleo — lugha na ukubwa wa maandishi.
Orodha ya vipengele — sifa, ARIA, na kibodi kwa kila kipengele.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.