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 اور دستاویزات۔ جو فائلیں چاہیے اپنی ایپ میں کاپی کریں، یا ریپو لے آئیں اور اس سے درآمد کریں۔

مرحلہ 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">۔ Props: 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 اپنے prop کے طور پر، اندر رکھے لیبل جزو کے طور پر نہیں — اسے ایک بار دیں، پر Fieldاور TextInputکا label قابلِ رسائی نام فراہم کرتا ہے۔

مرحلہ 4 — اسے اسلوب دیں

اوپر کا سب کچھ خالص ڈھانچے کے طور پر رینڈر ہوتا ہے، آپ کے اسلوب کے لیے تیار۔ ہُکس کو اسلوب دیں — .button, .text-input, .label, .field — اپنی اسٹائل شیٹ میں، اس کے ذریعے Tailwind یوٹیلیٹی کی تہہ چڑھائیں className، یا کوئی تیار تھیم لنک کریں:

<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

اگلے مراحل

• تھیمز — React theme-picker معاون کے ساتھ چلتے وقت تبدیلی۔
• ترجیحی معاونین — زبان اور متن کا سائز۔
• جزو کیٹلاگ — ہر جزو کے لیے خصوصیات، ARIA اور کی بورڈ۔

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔