Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Челендж: Отримання та Відображення Даних | React Hooks and Context
Опановуємо React

Челендж: Отримання та Відображення ДанихЧелендж: Отримання та Відображення Даних

Завдання

Створіть React-компонент з назвою DataFetcher, який отримує та відображає дані з API, коли компонент монтується.

Інструкція

  1. Імпортуйте відповідні хуки з бібліотеки React.
  2. Усередині компонента використовуйте хук useEffect для отримання даних з API, коли компонент монтується.
  3. Відобразіть отримані дані у зручному для користувача форматі всередині компонента. Ви можете вибрати спосіб форматування та представлення даних, наприклад, у вигляді списку, таблиці або будь-якого іншого відповідного формату.
Hint
1. Щоб імпортувати необхідний хук з бібліотеки React, використовуйте оператор import.
2. Для цього завдання ми використаємо хуки useEffect і useState.
  1. Include an import statement to import the necessary hook from the React library.
  2. Utilize the useEffect and useState hooks for this task.

Все було зрозуміло?

Секція 3. Розділ 7
course content

Зміст курсу

Опановуємо 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 Хуки та Контекст Підсумок Розділу

4. React в Реальному Світі

Налаштування СередовищаРедактор КодуНалаштування Папки ПроектуТерміналПочаток ПроектуReact в Реальному Світі Підсумок Розділу

Опановуємо React

Челендж: Отримання та Відображення ДанихЧелендж: Отримання та Відображення Даних

Завдання

Створіть React-компонент з назвою DataFetcher, який отримує та відображає дані з API, коли компонент монтується.

Інструкція

  1. Імпортуйте відповідні хуки з бібліотеки React.
  2. Усередині компонента використовуйте хук useEffect для отримання даних з API, коли компонент монтується.
  3. Відобразіть отримані дані у зручному для користувача форматі всередині компонента. Ви можете вибрати спосіб форматування та представлення даних, наприклад, у вигляді списку, таблиці або будь-якого іншого відповідного формату.
Hint
1. Щоб імпортувати необхідний хук з бібліотеки React, використовуйте оператор import.
2. Для цього завдання ми використаємо хуки useEffect і useState.
  1. Include an import statement to import the necessary hook from the React library.
  2. Utilize the useEffect and useState hooks for this task.

Все було зрозуміло?

Секція 3. Розділ 7
some-alt