Зміст курсу
Опановуємо 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 Хуки та Контекст Підсумок Розділу
Челендж: Отримання та Відображення Даних
Завдання
Створіть React-компонент з назвою DataFetcher, який отримує та відображає дані з API, коли компонент монтується.
Інструкція
- Імпортуйте відповідні хуки з бібліотеки React.
- Усередині компонента використовуйте хук
useEffectдля отримання даних з API, коли компонент монтується. - Відобразіть отримані дані у зручному для користувача форматі всередині компонента. Ви можете вибрати спосіб форматування та представлення даних, наприклад, у вигляді списку, таблиці або будь-якого іншого відповідного формату.
- Include an
importstatement to import the necessary hook from the React library. - Utilize the
useEffectanduseStatehooks for this task.
Все було зрозуміло?
Секція 3. Розділ 7
