Вступ до React та JSX

Вступ до React — компоненти як конструктор для побудови інтерфейсів

Ласкаво просимо до React -- найпопулярнішої JavaScript-бібліотеки для побудови інтерфейсів! Усе, що ти вивчив раніше -- HTML, CSS, JavaScript, TypeScript -- тепер стане фундаментом для створення сучасних вебдодатків. У цьому уроці розберемось, що таке React, чому він такий популярний, та напишемо перший код.

Що таке React?

React -- це бібліотека (не фреймворк!) від Meta (Facebook) для побудови UI. Основна ідея -- розбити інтерфейс на маленькі, незалежні шматочки -- компоненти.

Уяви, що ти будуєш сторінку з LEGO: кожен блок -- це компонент (кнопка, картка, меню, форма). Ти можеш перевикористовувати їх, комбінувати, вкладати один в одного.

Чому React?

• Компонентний підхід -- розбиваєш UI на частини, кожна відповідає за себе
• Декларативний -- описуєш що має відображатись, а не як маніпулювати DOM
• Велика екосистема -- тисячі бібліотек, величезна спільнота
• Використовують Netflix, Instagram, Airbnb, Notion, Discord та інші

Virtual DOM -- коротко

Коли стан додатку змінюється, React не оновлює весь DOM напряму. Замість цього:

1. React створює Virtual DOM -- легку копію реального DOM у пам'яті
2. Порівнює нову версію зі старою (diffing)
3. Оновлює тільки те, що змінилось у реальному DOM

Це робить React швидким, навіть для складних інтерфейсів.

Створення проекту з Vite

Vite -- швидкий інструмент для створення та збирання React-проектів. Він набагато швидший за старий Create React App.

Створення React-проєкту з Vite та запуск dev-сервера

npm create vite@latest my-first-react -- --template react-ts
cd my-first-react
npm install
npm run dev

Зверни увагу: ми використовуємо шаблон react-ts -- React з TypeScript. Усі приклади в цьому блоці будуть на TypeScript.

Структура проекту

my-first-react/
├── node_modules/       # залежності
├── public/             # статичні файли
├── src/
│   ├── App.tsx         # головний компонент
│   ├── App.css         # стилі App
│   ├── main.tsx        # точка входу
│   ├── index.css       # глобальні стилі
│   └── vite-env.d.ts   # типи Vite
├── index.html          # єдиний HTML-файл
├── package.json
├── tsconfig.json       # конфігурація TypeScript
└── vite.config.ts      # конфігурація Vite

Точка входу -- main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

React бере елемент #root з index.html і рендерить у нього компонент <App />. Це єдине місце, де React "стикується" з реальним DOM.

JSX -- HTML всередині JavaScript

JSX (JavaScript XML) -- синтаксис, який дозволяє писати HTML-подібну розмітку прямо в JavaScript:

function App() {
  return (
    <div>
      <h1>Привіт, React!</h1>
      <p>Це мій перший компонент.</p>
    </div>
  )
}

JSX -- це не HTML. Це синтаксичний цукор, який компілюється в виклики JavaScript-функцій. Під капотом <h1>Привіт</h1> стає React.createElement('h1', null, 'Привіт').

JavaScript-вирази в JSX -- {}

Фігурні дужки {} дозволяють вставляти будь-який JavaScript-вираз:

function App() {
  const name = "Олексій"
  const year = new Date().getFullYear()

  return (
    <div>
      <h1>Привіт, {name}!</h1>
      <p>Зараз {year} рік.</p>
      <p>2 + 2 = {2 + 2}</p>
      <p>Ім'я великими: {name.toUpperCase()}</p>
    </div>
  )
}

Правила JSX

1. Один кореневий елемент

JSX повинен повертати один кореневий елемент:

// ПОМИЛКА -- два кореневі елементи
function Bad() {
  return (
    <h1>Заголовок</h1>
    <p>Текст</p>
  )
}

// Варіант 1: обгортка в div
function Good1() {
  return (
    <div>
      <h1>Заголовок</h1>
      <p>Текст</p>
    </div>
  )
}

// Варіант 2: Fragment (не створює зайвого DOM-елемента)
function Good2() {
  return (
    <>
      <h1>Заголовок</h1>
      <p>Текст</p>
    </>
  )
}

<>...</> -- це скорочений запис для <React.Fragment>. Він групує елементи без створення додаткового DOM-вузла.

2. className замість class

В JSX атрибут CSS-класу називається className (бо class -- зарезервоване слово в JavaScript):

<div className="container">
  <h1 className="title">Привіт!</h1>
</div>

3. htmlFor замість for

<label htmlFor="email">Email:</label>
<input id="email" type="email" />

4. Всі теги мають бути закриті

// HTML: <img src="photo.jpg"> <br> <input type="text">
// JSX:
<img src="photo.jpg" />
<br />
<input type="text" />

5. camelCase для атрибутів

// HTML: onclick, tabindex, readonly
// JSX:
<button onClick={handleClick}>Натисни</button>
<div tabIndex={0}>Focusable</div>
<input readOnly value="тільки читання" />

Стилі в JSX

Inline-стилі передаються як об'єкт з camelCase-властивостями:

function StyledComponent() {
  const headerStyle = {
    backgroundColor: '#61dafb',
    color: 'white',
    padding: '20px',
    borderRadius: '8px',
  }

  return (
    <div>
      <h1 style={headerStyle}>Стилізований заголовок</h1>
      <p style={{ fontSize: '18px', marginTop: '10px' }}>
        Inline стиль
      </p>
    </div>
  )
}

Перший компонент

Давай напишемо повноцінний перший компонент. Відкрий src/App.tsx та заміни вміст:

function App() {
  const title = "Мій перший React-додаток"
  const features = ["Компоненти", "JSX", "Virtual DOM", "Hooks"]

  return (
    <div className="app">
      <h1>{title}</h1>
      <p>React -- це бібліотека для побудови UI.</p>

      <h2>Що ми вивчимо:</h2>
      <ul>
        {features.map((feature) => (
          <li key={feature}>{feature}</li>
        ))}
      </ul>

      <footer>
        <p>Створено з React + TypeScript</p>
      </footer>
    </div>
  )
}

export default App

Не хвилюйся щодо .map() та key -- ми детально розберемо це в уроці 8.4. Поки просто зверни увагу, як JavaScript-логіка органічно вплітається у розмітку.

Підсумок

• React -- бібліотека для побудови UI з компонентів
• Virtual DOM -- React оновлює тільки те, що змінилось
• Vite -- швидкий інструмент для створення React-проектів (npm create vite@latest)
• JSX -- HTML-подібний синтаксис всередині JavaScript
• {} -- вставка JavaScript-виразів у JSX
• className замість class, htmlFor замість for
• Один кореневий елемент (або <>...</> Fragment)
• Всі теги мають бути закриті

Що далі?

У наступному уроці ми навчимось створювати власні компоненти та передавати їм дані через props -- це основа всього React.