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 आणि दस्तऐवज. हव्या त्या फाइल्स तुमच्या अॅपमध्ये कॉपी करा, किंवा रेपो आणा आणि त्यातून आयात करा.

पायरी २ — तुमचा पहिला घटक

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, आणि कोणताही अतिरिक्त गुणधर्म मूळ घटकावर पसरतो.

पायरी ३ — एक छोटा फॉर्म बनवा

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 सुलभ नाव पुरवते.

पायरी ४ — त्याला शैली द्या

वरील सर्व काही शुद्ध रचना म्हणून रेंडर होते, तुमच्या शैलींसाठी तयार. हुकना शैली द्या — .button, .text-input, .label, .field — तुमच्या स्टाइलशीटमध्ये, याद्वारे Tailwind युटिलिटींचा थर लावा className, किंवा तयार थीम लिंक करा:

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

पायरी ५ — सगळे चालताना पहा

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 आणि कीबोर्ड.

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.