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