const element = <h1 className="title">Привіт, світ!</h1>;

// src/App.jsx — це те, що ви пишете
const element = <h1 className="title">Привіт, світ!</h1>;

// Класичний трансформ (React 16 і раніше)
const element = React.createElement(
  "h1",                    // type: тип елемента (рядок для HTML-тегів)
  { className: "title" },  // props: об'єкт властивостей
  "Привіт, світ!"          // children: дочірні елементи
);

// Результат виконання React.createElement
const element = {
  type: "h1",
  props: {
    className: "title",
    children: "Привіт, світ!"
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element')
};

// Приблизно те, що робить React (спрощено)
const domNode = document.createElement("h1");
domNode.className = "title";
domNode.textContent = "Привіт, світ!";
parentElement.appendChild(domNode);

// До React 17 — обов'язковий імпорт!
import React from 'react';

function App() {
  return <div>Привіт!</div>;
}

ReferenceError: React is not defined

// React 17+ — імпорт React не потрібен!
function App() {
  return <div>Привіт!</div>;
}

// Автоматичний імпорт (додається компілятором, ви його не бачите)
import { jsx as _jsx } from 'react/jsx-runtime';

function App() {
  return _jsx("div", { children: "Привіт!" });
}

<div class="container">Контент</div>

<div className="container">Контент</div>

<label for="username">Ім'я користувача:</label>
<input id="username" type="text" />

<label htmlFor="username">Ім'я користувача:</label>
<input id="username" type="text" />

<button onclick="handleClick()">Натисни</button>
<div tabindex="0">Фокусований елемент</div>

<button onClick={handleClick}>Натисни</button>
<div tabIndex={0}>Фокусований елемент</div>

element.onclick = handleClick;      // HTML атрибут
element.addEventListener('click');  // Але обробник у camelCase
element.tabIndex = 0;               // DOM-властивість

<div style="color: red; font-size: 16px;">Текст</div>

<div style={{ color: 'red', fontSize: '16px' }}>Текст</div>
//           ↑ Подвійні фігурні дужки!

// Покроково
const styleObject = { color: 'red', fontSize: '16px' };
<div style={styleObject}>Текст</div>

// Інлайн (найпоширеніший спосіб)
<div style={{ color: 'red', fontSize: '16px' }}>Текст</div>

<div style={{ width: 200, height: 100 }}>
  // Перетвориться на: width: 200px; height: 100px;
</div>

<div style={{ width: '50%', height: '10rem', marginTop: '2em' }}>
  Контент
</div>

<!-- HTML — допускається -->
<img src="logo.png">
<input type="text">
<br>
<hr>

{/* JSX — обов'язковий слеш або закриваючий тег */}
<img src="logo.png" />
<input type="text" />
<br />
<hr />

<!-- Це HTML-коментар -->
<div>Контент</div>

{/* Це JSX-коментар */}
<div>Контент</div>

{/* 
  Багаторядковий
  коментар у JSX
*/}
<div>Інший контент</div>

const name = "Олександр";
const element = <h1>Привіт, {name}!</h1>;

function getGreeting(name) {
  return `Вітаємо, ${name}`;
}

const element = <h1>{getGreeting("Марія")}</h1>;

const a = 5;
const b = 10;
const element = <p>Сума: {a + b}</p>;  // Виведе: Сума: 15

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <p>Ласкаво просимо!</p> : <p>Будь ласка, увійдіть.</p>}
  </div>
);

const hasNewMessages = true;
const messageCount = 5;

const element = (
  <div>
    {hasNewMessages && <span>У вас {messageCount} нових повідомлень</span>}
  </div>
);

const items = ['Яблуко', 'Банан', 'Апельсин'];
const element = (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

// ❌ НЕПРАВИЛЬНО — if є інструкцією, а не виразом
<div>
  {if (isLoggedIn) { return <p>Привіт!</p>; }}
</div>

// ✅ ПРАВИЛЬНО — тернарний оператор є виразом
<div>
  {isLoggedIn ? <p>Привіт!</p> : null}
</div>

// ❌ НЕПРАВИЛЬНО
<ul>
  {for (let i = 0; i < 5; i++) { <li>{i}</li> }}
</ul>

// ✅ ПРАВИЛЬНО — використовуйте .map()
<ul>
  {[0, 1, 2, 3, 4].map(i => <li key={i}>{i}</li>)}
</ul>

// ❌ НЕПРАВИЛЬНО — два кореневі елементи
function App() {
  return (
    <h1>Заголовок</h1>
    <p>Параграф</p>
  );
}

Adjacent JSX elements must be wrapped in an enclosing tag.

// ✅ Працює, але додає зайвий DOM-елемент
function App() {
  return (
    <div>
      <h1>Заголовок</h1>
      <p>Параграф</p>
    </div>
  );
}

// ✅ ПРАВИЛЬНО — Fragment не створює DOM-елемент
import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <h1>Заголовок</h1>
      <p>Параграф</p>
    </Fragment>
  );
}

// ✅ Найпоширеніший спосіб
function App() {
  return (
    <>
      <h1>Заголовок</h1>
      <p>Параграф</p>
    </>
  );
}

<!-- У DOM немає обгортки, лише самі елементи -->
<h1>Заголовок</h1>
<p>Параграф</p>

{items.map(item => (
  <Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </Fragment>
))}

// MyButton.jsx — JavaScript + JSX
function MyButton(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

// MyButton.tsx — TypeScript + JSX
interface MyButtonProps {
  label: string;
  onClick: () => void;
}

function MyButton(props: MyButtonProps) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

interface GreetingProps {
  name: string;
  age?: number; // Опційна властивість
}

function Greeting(props: GreetingProps) {
  return (
    <div>
      <h1>Привіт, {props.name}!</h1>
      {props.age && <p>Вік: {props.age}</p>}
    </div>
  );
}

import { FC } from 'react';

interface GreetingProps {
  name: string;
  age?: number;
}

const Greeting: FC<GreetingProps> = (props) => {
  return (
    <div>
      <h1>Привіт, {props.name}!</h1>
      {props.age && <p>Вік: {props.age}</p>}
    </div>
  );
};

import { MouseEvent } from 'react';

function Button() {
  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    console.log('Натиснуто кнопку', event.currentTarget);
  };

  return <button onClick={handleClick}>Натисни мене</button>;
}

function Counter() {
  const [count, setCount] = useState(0);

  // Тип виводиться автоматично: () => void
  const increment = () => setCount(count + 1);

  return <button onClick={increment}>Лічильник: {count}</button>;
}

// Автоматичний вивід типу
const [count, setCount] = useState(0); // count: number

// Явна типізація для складних типів
interface User {
  id: number;
  name: string;
}

const [user, setUser] = useState<User | null>(null);
//                                ↑ Явно вказуємо, що може бути null

// ❌ НЕПРАВИЛЬНО — відсутній key
{items.map(item => <div>{item.name}</div>)}

// ✅ ПРАВИЛЬНО
{items.map(item => <div key={item.id}>{item.name}</div>)}

// ❌ НЕПРАВИЛЬНО — props є read-only
function Button(props: { label: string }) {
  props.label = "Змінено"; // Помилка!
  return <button>{props.label}</button>;
}

// ✅ ПРАВИЛЬНО — створюємо локальний стан
function EditableLabel(props: { initialValue: string }) {
  const [value, setValue] = useState(props.initialValue);

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// ❌ НЕПРАВИЛЬНО — JavaScript вставить крапку з комою після return
function App() {
  return
    <div>Контент</div>;
}
// Результат: return; <div>Контент</div>; — JSX не виконується!

// ✅ Варіант 1: JSX на одному рядку з return
function App() {
  return <div>Контент</div>;
}

// ✅ Варіант 2: Обгорнути у дужки
function App() {
  return (
    <div>
      <h1>Заголовок</h1>
      <p>Параграф</p>
    </div>
  );
}

// ❌ НЕПРАВИЛЬНО
<label for="username">Ім'я</label>
<div class="container">Контент</div>

// ✅ ПРАВИЛЬНО
<label htmlFor="username">Ім'я</label>
<div className="container">Контент</div>

// ❌ НЕПРАВИЛЬНО
<img src="logo.png">
<input type="text">

// ✅ ПРАВИЛЬНО
<img src="logo.png" />
<input type="text" />

// Вхід
<div className="container">
  <h1>Привіт</h1>
</div>

// Вихід (react-jsx трансформ)
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
_jsxs("div", {
  className: "container",
  children: [
    _jsx("h1", { children: "Привіт" })
  ]
});

pnpm add -D eslint-plugin-react eslint-plugin-react-hooks

{
  plugins: ['react', 'react-hooks'],
  rules: {
    'react/jsx-key': 'error',              // Помилка, якщо немає key у списках
    'react/jsx-no-duplicate-props': 'error', // Заборона дублікатів пропсів
    'react-hooks/rules-of-hooks': 'error',   // Правила хуків
  }
}

pnpm add -D prettier

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "printWidth": 80
}

function createElement(
  type: string | ComponentType,
  props: object | null,
  ...children: ReactNode[]
): ReactElement

// JSX
<div id="root">
  <h1>Привіт</h1>
  <p>Параграф</p>
</div>

// Трансформація
React.createElement(
  "div",
  { id: "root" },
  React.createElement("h1", null, "Привіт"),
  React.createElement("p", null, "Параграф")
)

// Для елементів без дочірніх або з одним дочірнім
function jsx(
  type: string | ComponentType,
  props: object,
  key?: string | number
): ReactElement

// Для елементів з кількома дочірніми
function jsxs(
  type: string | ComponentType,
  props: object,
  key?: string | number
): ReactElement

// JSX
<div id="root">
  <h1>Привіт</h1>
  <p>Параграф</p>
</div>

// Трансформація (react-jsx)
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

_jsxs("div", {
  id: "root",
  children: [
    _jsx("h1", { children: "Привіт" }),
    _jsx("p", { children: "Параграф" })
  ]
})

function TodoList({ items }: { items: Array<{ id: string; text: string }> }) {
  return (
    <ul>
      {items.map(item => (
        <TodoItem key={item.id} text={item.text} />
        //        ↑ key не доступний всередині TodoItem
      ))}
    </ul>
  );
}

function TodoItem({ text }: { text: string }) {
  // Тут НЕМАЄ доступу до key через props
  return <li>{text}</li>;
}

<TodoItem key={item.id} id={item.id} text={item.text} />
//        ↑ key для React  ↑ id для компонента

import { useRef } from 'react';

function InputWithFocus() {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Фокус на input</button>
    </>
  );
}