„React“ vadovas

Ką sukursite

Nedidelė kontaktų forma — laukas su žyma, siuntimo mygtukas, valdoma būsena, tikras klaviatūros ir ekrano skaitytuvo elgesys — pirma plika, paskui apipavidalinta, per maždaug 10 minučių.

Prieš pradedant

Reikia git, Node 22 ar naujesnės ir pnpm 10 ar naujesnio. Tinka bet kuris „React 18+“ projektas — „Next.js“, „Vite“ arba paprastas „React“.

1 žingsnis — Gaukite kodą

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

Komponentai yra plokščios bylos aplanke components/ — Button.tsx, TextInput.tsx — kiekvienas su savo testu, story ir dokumentacija šalia. Nukopijuokite reikalingas bylas į savo programą arba pasiimkite saugyklą ir importuokite iš jos.

2 žingsnis — Jūsų pirmasis komponentas

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

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

Atvaizduoja <button class="button" type="button">. Propai: type, disabled, pressed (atvaizduoja aria-pressed), label ( aria-label norint pakeisti), className, o bet koks papildomas atributas paskleidžiamas ant šakninio elemento.

3 žingsnis — Sudėkite nedidelę formą

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 priima matomą label kaip savo prop vietoj įdėto žymos komponento — perduokite ją vieną kartą, prie Fieldir TextInputiš label suteikia prieinamą pavadinimą.

4 žingsnis — Apipavidalinkite

Viskas aukščiau atvaizduojama kaip gryna struktūra, paruošta jūsų stiliams. Apipavidalinkite kablius — .button, .text-input, .label, .field — savo stilių lentelėje, uždėkite „Tailwind“ pagalbines klases per classNamearba susiekite paruoštą temą:

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

5 žingsnis — Pažiūrėkite, kaip viskas veikia

„Next.js“ pavyzdinė programa yra visas katalogas apipavidalintas ir pademonstruotas, su „Playwright“ e2e ir axe-core pradine riba:

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

Tolesni žingsniai

• Temos — perjungimas vykdymo metu su „React“ pagalbininku theme-picker.
• Nuostatų pagalbininkai — kalba ir teksto dydis.
• Komponentų katalogas — savybės, ARIA ir klaviatūra kiekvienam komponentui.

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.