ບົດສອນ 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 ໃຫ້ຊື່ທີ່ເຂົ້າເຖິງໄດ້.

ຂັ້ນຕອນ 4 — ໃສ່ຮູບແບບ

ທຸກຢ່າງຂ້າງເທິງສະແດງເປັນໂຄງສ້າງລ້ວນ, ພ້ອມສຳລັບຮູບແບບຂອງທ່ານ. ໃສ່ຮູບແບບ hook — .button, .text-input, .label, .field — ໃນ stylesheet ຂອງທ່ານ, ວາງຊັ້ນຢູທິລິຕີ Tailwind ຜ່ານ className, ຫຼືເຊື່ອມຕໍ່ຮູບແບບສີສັນສຳເລັດຮູບ:

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

ຂັ້ນຕອນ 5 — ເບິ່ງທຸກຢ່າງເຮັດວຽກ

ແອັບຕົວຢ່າງ Next.js ແມ່ນແຄັດຕາລັອກເຕັມທີ່ມີຮູບແບບ ແລະສາທິດ, ພ້ອມ Playwright e2e ແລະ axe-core baseline:

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

ຂັ້ນຕອນຕໍ່ໄປ

• ຮູບແບບສີສັນ — ການສະຫຼັບຕອນແລ່ນດ້ວຍຕົວຊ່ວຍ React theme-picker.
• ຕົວຊ່ວຍການຕັ້ງຄ່າ — ພາສາ ແລະຂະໜາດຕົວອັກສອນ.
• ແຄັດຕາລັອກອົງປະກອບ — ຄຸນສົມບັດ, ARIA ແລະແປ້ນພິມຕໍ່ອົງປະກອບ.

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.