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 — 각각 테스트, 스토리, 문서가 바로 옆에 있습니다. 필요한 파일을 앱에 복사하거나, 저장소를 가져와서 거기서 import하세요.

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 — 스타일시트에서, className를 통해 Tailwind 유틸리티를 겹쳐 쓰거나, 준비된 테마를 링크합니다:

<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 헬퍼로 하는 런타임 전환.
• 환경설정 헬퍼 — 언어와 텍스트 크기.
• 컴포넌트 카탈로그 — 컴포넌트별 props, ARIA, 키보드.

진행하다가 궁금한 점이 있다면 도움말 페이지 에 답이 많이 있습니다. 어떤 단계가 더 명확해질 수 있다면 알려 주세요 . 기꺼이 튜토리얼을 개선하겠습니다.