Найбільший страх дизайнера що хоче навчитися кодити — "я не знаю з чого почати". Хороша новина: щоб написати перший реальний React-компонент, не потрібно знати JavaScript досконало. Потрібно розуміти три поняття: компонент, пропси, JSX.

Цей гайд — від відкритого Figma-файлу до компонента в браузері. За один вечір.

Крок 1: Підготовка середовища (15 хвилин)

Найшвидший спосіб почати — не налаштовувати webpack і babel вручну, а використати Vite:

  1. Встановіть Node.js якщо немає (nodejs.org)
  2. У терміналі: npm create vite@latest my-component -- --template react
  3. cd my-component
  4. npm install
  5. npm run dev

Відкрийте localhost:5173 — у вас є живий React-додаток. Все. Не потрібно більше нічого налаштовувати.

Крок 2: Подивіться на Figma компонент як на код

Відкрийте свій компонент у Figma. Наприклад — Card з заголовком, текстом і кнопкою. Подивіться на його структуру через ліву панель (шари).

Кожен фрейм у Figma — це <div> в HTML. Кожен текстовий елемент — <p> або <h2>. Auto Layout = flexbox. Padding і gap — CSS властивості з такими ж назвами.

Структура Figma-шарів і DOM-дерево React — одне й те саме з різних точок зору.

Крок 3: Напишіть JSX

Створіть файл src/components/Card.jsx. JSX — це HTML всередині JavaScript. Виглядає незвично перші 10 хвилин, далі — природно.

Базова структура компонента:

function Card({'{'} title, description, buttonText {'}'}) {'{'}
  return (
    <div className="card">
      <h2>{'{'}title{'}'}</h2>
      <p>{'{'}description{'}'}</p>
      <button>{'{'}buttonText{'}'}</button>
    </div>
  );
{'}'}

Крок 4: Стилізуйте через CSS або Tailwind

Найпростіший варіант — Tailwind CSS. Він вже є у шаблоні якщо ви обрали --template react або можна встановити окремо. Tailwind = utility-класи. Замість писати CSS-файл, ви пишете класи прямо в JSX.

Padding у Figma 16px → p-4 в Tailwind. Gap 8px → gap-2. Background #080B10 → bg-[#080B10]. Якщо є design tokens — вони можуть бути налаштовані у tailwind.config.js.

Крок 5: Використайте компонент

У файлі src/App.jsx заімпортуйте і використайте компонент:

import Card from './components/Card';

function App() {'{'}
  return <Card title="Заголовок" description="Текст" buttonText="Дізнатись більше" />;
{'}'}

Збережіть — браузер автоматично оновиться і ви побачите свій компонент живим.

Що далі після першого компонента

  • Додайте другий варіант через проп variant="dark" і умовний рендеринг
  • Винесіть стилі у CSS-модуль або конфіг Tailwind
  • Підключіть Storybook щоб документувати компонент
  • Запустіть на Vercel щоб поділитися з командою

Перший компонент — найважчий. Другий — вже набагато легший. А далі ви починаєте думати про Figma і про код одночасно — і це змінює все.