មេរៀន React

អ្វីដែលអ្នកនឹងសាងសង់

ទម្រង់ទំនាក់ទំនងតូចមួយ — វាលបញ្ចូលដែលមានស្លាក ប៊ូតុងដាក់ស្នើ ស្ថានភាពដែលគ្រប់គ្រង អាកប្បកិរិយាក្តារចុច និងកម្មវិធីអានអេក្រង់ពិតប្រាកដ — ដំបូងទទេស្អាត បន្ទាប់មកមានរចនាប័ទ្ម ក្នុងរយៈពេលប្រហែល ១០ នាទី។

មុនពេលអ្នកចាប់ផ្តើម

អ្នកត្រូវការ git, Node 22 ឬថ្មីជាងនេះ និង pnpm 10 ឬថ្មីជាងនេះ។ គម្រោង React 18+ ណាក៏បាន — Next.js, Vite ឬ React ធម្មតា។

ជំហាន ១ — យកកូដ

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 ឃ្លាំង ហើយនាំចូលពីវា។

ជំហាន ២ — សមាសភាគដំបូងរបស់អ្នក

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ហើយគុណលក្ខណៈបន្ថែមណាមួយរាលដាលលើធាតុឫស។

ជំហាន ៣ — ផ្សំទម្រង់តូចមួយ

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 ផ្តល់ឈ្មោះដែលអាចចូលប្រើបាន។

ជំហាន ៤ — ដាក់រចនាប័ទ្ម

អ្វីៗខាងលើបង្ហាញជារចនាសម្ព័ន្ធសុទ្ធ រួចជាស្រេចសម្រាប់រចនាប័ទ្មរបស់អ្នក។ ដាក់រចនាប័ទ្ម hook — .button, .text-input, .label, .field — ក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នក ដាក់ស្រទាប់ឧបករណ៍ប្រើប្រាស់ Tailwind តាមរយៈ classNameឬភ្ជាប់ស្បែករួចជាស្រេច៖

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

ជំហាន ៥ — មើលអ្វីៗទាំងអស់ដំណើរការ

កម្មវិធីគំរូ 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 និងក្តារចុចសម្រាប់សមាសភាគនីមួយៗ។

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។