Зміст курсу
Опановуємо React
Опановуємо React
1. Вступ до Основ React
Що таке React?SPA vs. MPA у Веб РозробціЯк React Працює з Віртуальним DOMЗнайомство з JSX в ReactСтворення Складних JSX Елементів Рендеринг Елементів у ReactЧелендж: Рендеринг ЕлементаКомпонент ReactПропси в ReactЧелендж: Функціональні КомпонентиУмовний РендерингЧелендж: Умовний Рендеринг КонтентуChallenge: Implement Conditional Rendering – Bank AlertРендеринг Набору ДанихЧелендж: Рендеринг Набору ДанихВступ до Основ React Підсумок Розділу
2. Стилізація в React Додатках
Вступ до Стилізації в ReactВбудовані СтиліВбудовані Стилі на ПрактиціЧелендж: Вбудовані СтиліСтилізація за Допомогою CSS ФайлуСтилізація за Допомогою CSS файлу на ПрактиціЧелендж: Стилізація за Допомогою CSS ФайлуСтилізація за Допомогою CSS МодулівОрганізація Структури Файлів та ПапокЧелендж: CSS МодуліСтилізація в React Підсумок Розділу
3. React Хуки та Контекст
Вступ: React Хуки та КонтекстuseState ХукЧелендж: Перемикання ВидимостіuseRef ХукЧелендж: Створення Компонента ФормиuseEffect ХукЧелендж: Отримання та Відображення ДанихuseMemo ХукЧелендж: Фільтрація Списку АвтомобілівКонтекстКонтекст на ПрактиціЧелендж: World of Astronomy ДодатокReact Хуки та Контекст Підсумок Розділу
Створення Складних JSX Елементів
У попередньому розділі ми розглянули основи JSX. Тепер давайте зануримося глибше і навчимося створювати більш складні JSX-елементи.
Правило єдиного батьківського елемента
Одним з важливих правил при роботі з вкладеними JSX є те, що вони повинні повертати єдиний батьківський елемент. Цей батьківський елемент обгортає всі інші рівні вкладених елементів. Це правило гарантує, що React може правильно рендерити та керувати структурою вашого JSX. Ось практичний приклад, що ілюструє це правило:
Валідний JSX:
jsx
Невалідний JSX (не буде працювати):
jsx
Примітка
При рендерингу декількох елементів таким чином, ми можемо взяти їх усі в круглі дужки
()для наочності, але це не є обов'язковим. Також пам'ятайте, що ця концепція застосовується, коли ми повертаємо JSX-елементи в React-компонентах.
Приклад
jsx
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 1. Розділ 5
