Зміст курсу
Опановуємо React
Опановуємо React
1. Вступ до Основ React
Що таке React?SPA vs. MPA у Веб РозробціЯк React Працює з Віртуальним DOMЗнайомство з JSX в ReactСтворення Складних JSX Елементів Рендеринг Елементів у ReactЧелендж: Рендеринг ЕлементаКомпонент ReactПропси в ReactЧелендж: Функціональні КомпонентиУмовний РендерингЧелендж: Умовний Рендеринг КонтентуChallenge: 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 Хуки та Контекст Підсумок Розділу
Челендж: Рендеринг Набору Даних
Завдання: Показати список товарів
Обробимо дані, отримані з бекенду, і забезпечимо їх коректне відображення у форматі списку.
Задача така:
- Використати метод
map()
для відображення масиву товарів. - Забезпечити заповнення необхідних пропусків:
h2
повинен містити назву товару (властивістьname
).p
повинен містити опис товару (властивістьdescription
).span
повинен містити рядок "Price:" і ціну товару (властивістьprice
).
- Use the
map()
method to map over theprops.goods
array. - Ensure to set the
key
prop of the<li>
element to a unique value, such as the id property of the item. - Inside each
<li>
element, use the following elements:- An
<h2>
element to display the good's name. Access the name from the currentitem
; - A
<p>
element to display the good's description. Access the description from the currentitem
; - A
<span>
element to display the string "Price:" followed by the good's price. Access the price from the currentitem
.
- An
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 1. Розділ 15