React для початківців

🤔 Що таке React?

React — це JavaScript бібліотека для створення користувацьких інтерфейсів. Розроблена Facebook (Meta) у 2013 році, сьогодні це найпопулярніший інструмент для frontend розробки!

🦉

Кудик пояснює:

Уяви, що ти будуєш будинок з LEGO. Кожна цеглинка — це компонент. В React ти створюєш маленькі компоненти (кнопка, картка, меню) і збираєш з них великий застосунок. Зламалась одна цеглинка? Заміни тільки її! 🧱

🔥 Чому React такий популярний?

🧩

Компоненти

Розбивай UI на незалежні частини

⚡

Virtual DOM

Швидке оновлення без перезавантаження

🔄

Реактивність

UI автоматично оновлюється при зміні даних

📦

Екосистема

Тисячі готових бібліотек та інструментів

💼

Затребуваність

Найбільше вакансій на ринку

🌐

Універсальність

Web, Mobile (React Native), Desktop

🏢 Хто використовує React?

Facebook, Instagram, Netflix, Airbnb, Uber, WhatsApp, Discord, Dropbox, та ще тисячі компаній по всьому світу!

🚀 Створюємо React проєкт

Найпростіший спосіб почати — використати Vite (швидкий збірник):

Terminal

$npm create vite@latest my-react-app -- --template react

$cd my-react-app

$npm install

$npm run dev

➜ Local: http://localhost:5173/

💡

Потрібен Node.js!

Переконайся, що у тебе встановлений Node.js (версія 18+). Перевір командою node -v

📁 Структура проєкту

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

1
2
3
4
5
6
7
8
9
10
my-react-app/
├── node_modules/     # залежності
├── public/           # статичні файли
├── src/              # твій код тут!
│   ├── App.jsx       # головний компонент
│   ├── App.css       # стилі
│   └── main.jsx      # точка входу
├── index.html        # HTML шаблон
├── package.json      # залежності та скрипти
└── vite.config.js    # налаштування Vite

📝 JSX — HTML в JavaScript

JSX — це синтаксис, який дозволяє писати HTML-подібний код прямо в JavaScript:

App.jsx — JSX приклад

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function App() {
    const name = 'Кудик';
    const isLoggedIn = true;

    return (
        <div className="app">
            <h1>Привіт, {name}!</h1>
            
            {/* JavaScript вирази в фігурних дужках */}
            <p>2 + 2 = {2 + 2}</p>
            
            {/* Умовний рендеринг */}
            {isLoggedIn && <p>Ти залогінений!</p>}
        </div>
    );
}

⚠️ Відмінності JSX від HTML

HTML	JSX
`class="btn"`	`className="btn"`
`for="email"`	`htmlFor="email"`
`style="color: red"`	`style={{ color: 'red' }}`
`onclick="func()"`	`onClick={func}`
`<!-- коментар -->`	`{/* коментар */}`

⚠️

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

JSX повинен повертати один елемент. Використовуй <div> або фрагмент <>...</> для обгортки.

🧩 Компоненти — цеглинки UI

Компонент — це функція, яка повертає JSX. Ім'я компонента завжди з великої літери!

Button.jsx — простий компонент

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Компонент Button
function Button() {
    return (
        <button className="btn">
            Натисни мене!
        </button>
    );
}

// Використання в іншому компоненті
function App() {
    return (
        <div>
            <h1>Мій застосунок</h1>
            <Button />  {/* використовуємо компонент */}
            <Button />  {/* можна багато разів! */}
        </div>
    );
}

📦 Props — передаємо дані в компонент

Props (properties) — це параметри, які ми передаємо компоненту:

Card.jsx — компонент з props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Компонент приймає props
function Card({ title, description, emoji }) {
    return (
        <div className="card">
            <span className="card-emoji">{emoji}</span>
            <h3>{title}</h3>
            <p>{description}</p>
        </div>
    );
}

// Передаємо props при використанні
function App() {
    return (
        <div>
            <Card 
                emoji="🦉"
                title="Кудик"
                description="Твій помічник у навчанні"
            />
            <Card 
                emoji="⚛️"
                title="React"
                description="Бібліотека для UI"
            />
        </div>
    );
}

🦉

Деструктуризація props

Замість function Card(props) і потім props.title, краще одразу деструктуризувати: function Card({ title, description })

🔄 useState — стан компонента

State — це дані, які можуть змінюватися і при зміні яких компонент перемальовується:

Counter.jsx — useState приклад

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useState } from 'react';

function Counter() {
    // [значення, функція_для_зміни] = useState(початкове_значення)
    const [count, setCount] = useState(0);

    return (
        <div className="counter">
            <h2>Лічильник: {count}</h2>
            
            <button onClick={() => setCount(count - 1)}>
                − Мінус
            </button>
            
            <button onClick={() => setCount(count + 1)}>
                + Плюс
            </button>
        </div>
    );
}

📝 Ще приклади useState

Різні типи стану

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Рядок
const [name, setName] = useState('');

// Булеве значення
const [isOpen, setIsOpen] = useState(false);

// Масив
const [items, setItems] = useState([]);

// Об'єкт
const [user, setUser] = useState({ name: '', age: 0 });

// Toggle (перемикач)
<button onClick={() => setIsOpen(!isOpen)}>
    {isOpen ? 'Закрити' : 'Відкрити'}
</button>

⚠️

Не змінюй стан напряму!

count = 5 — ❌ неправильно! setCount(5) — ✅ правильно! Завжди використовуй функцію-сеттер.

⚡ useEffect — побічні ефекти

useEffect — хук для виконання побічних ефектів: запити на сервер, підписки, зміна DOM тощо:

useEffect приклади

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useState, useEffect } from 'react';

function App() {
    const [data, setData] = useState(null);

    // Виконується один раз при монтуванні ([] — пустий масив)
    useEffect(() => {
        console.log('Компонент змонтовано!');
        
        // Запит на API
        fetch('https://api.example.com/data')
            .then(res => res.json())
            .then(data => setData(data));
    }, []);

    // Виконується при кожній зміні count
    const [count, setCount] = useState(0);
    
    useEffect(() => {
        document.title = `Лічильник: ${count}`;
    }, [count]); // залежність — count

    return <div>...</div>;
}

🔄

useEffect(() => {}, [])

Виконається один раз при монтуванні

👀

useEffect(() => {}, [dep])

Виконається при зміні dep

♾️

useEffect(() => {})

Виконається при кожному рендері

📋 Списки та умовний рендеринг

Рендеринг списку

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function TodoList() {
    const todos = [
        { id: 1, text: 'Вивчити React', done: true },
        { id: 2, text: 'Створити проєкт', done: false },
        { id: 3, text: 'Отримати роботу', done: false },
    ];

    return (
        <ul>
            {todos.map(todo => (
                <li 
                    key={todo.id}
                    style={{ 
                        textDecoration: todo.done ? 'line-through' : 'none' 
                    }}
                >
                    {todo.text}
                </li>
            ))}
        </ul>
    );
}

🔑

key — обов'язковий!

При рендерингу списку кожен елемент повинен мати унікальний key. Використовуй id з даних, а не індекс масиву!

🔀 Умовний рендеринг

Умовний рендеринг

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Greeting({ isLoggedIn, username }) {
    return (
        <div>
            {/* Тернарний оператор */}
            {isLoggedIn 
                ? <h1>Привіт, {username}!</h1>
                : <h1>Будь ласка, увійдіть</h1>
            }
            
            {/* Логічне І (&&) — показати якщо true */}
            {isLoggedIn && <button>Вийти</button>}
            
            {/* Логічне АБО (||) — показати якщо false */}
            {username || 'Гість'}
        </div>
    );
}

🎯 Обробка подій

Обробники подій

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function Form() {
    const [value, setValue] = useState('');

    // Обробник кліку
    const handleClick = () => {
        alert('Кнопку натиснуто!');
    };

    // Обробник введення
    const handleChange = (e) => {
        setValue(e.target.value);
    };

    // Обробник форми
    const handleSubmit = (e) => {
        e.preventDefault(); // не перезавантажувати сторінку
        console.log('Відправлено:', value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input 
                value={value}
                onChange={handleChange}
                placeholder="Введіть текст"
            />
            <button type="submit">Надіслати</button>
        </form>
    );
}

🎮 Практика — Todo App

Створимо простий список задач:

TodoApp.jsx — повний приклад

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { useState } from 'react';

function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState('');

    // Додати задачу
    const addTodo = (e) => {
        e.preventDefault();
        if (!input.trim()) return;
        
        setTodos([...todos, { 
            id: Date.now(), 
            text: input, 
            done: false 
        }]);
        setInput('');
    };

    // Видалити задачу
    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    return (
        <div className="todo-app">
            <h1>📝 Мої задачі</h1>
            
            <form onSubmit={addTodo}>
                <input
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    placeholder="Нова задача..."
                />
                <button type="submit">Додати</button>
            </form>

            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={() => deleteTodo(todo.id)}>🗑️</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

🚀 Що вивчати далі?

🧭

React Router

Навігація між сторінками SPA

📦

Redux / Zustand

Глобальний стейт менеджмент

🔗

React Query

Робота з серверними даними

🎨

Styled Components

CSS-in-JS стилізація

📱

React Native

Мобільні застосунки

⚡

Next.js

SSR, SSG та фулстек React

🎮 Вивчай React на Koodi!

🚀 Перейти до курсу React

✅ Hooks глибоко ✅ React Router ✅ Реальні проєкти