Зміст курсу
Опановуємо 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 Хуки та Контекст Підсумок Розділу
Челендж: Фільтрація Списку Автомобілів
Завдання
Створити компонент CarList
, який відповідає за відображення списку автомобілів і надає функцію пошуку для їх фільтрації на основі назв. Він дозволяє користувачам вводити пошуковий термін і динамічно фільтрує список автомобілів на основі цього введення.
Інструкції
- Імпортуйте необхідні хуки з бібліотеки React.
- Усередині компонента
CarList
оголосіть змінну стануsearchInput
та функцію оновлення стануsetSearchInput
за допомогою хукаuseState
. ІніціалізуйтеsearchInput
порожнім рядком. - Використовуйте хук
useMemo
для запам'ятовування масивуfilteredCars
. Логіка запам'ятовування повинна фільтрувати автомобілі на основіsearchInput
. ЯкщоsearchInput
порожній, повернути всі автомобілі, інакше відфільтрувати автомобілі на основі пошукового запиту. - У масиві залежностей
useMemo
вкажіть правильні змінні, від яких залежить функція, що запам'ятовується.
- Include an
import
statement to import the necessary hook from the React library. - Use the
useState
hook to declare a state variable and its updater function. - The
useMemo
hook memoizes the filtered cars array, preventing unnecessary recalculations. - In the dependency array of
useMemo
, include the variables that the memoized function depends on (cars
andsearchInput
).
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 3. Розділ 9