Зміст курсу
Опановуємо 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 Хуки та Контекст Підсумок Розділу
Челендж: Створення Компонента Форми
Завдання
У цьому завданні вам потрібно створити компонент Form
з двома полями вводу: email
та password
. Мета полягає у використанні хука useRef
для посилання на елементи вводу та обробки логіки відправки форми.
Інструкції
- Імпортуйте хук
useRef
з бібліотекиreact
. - Усередині компонента
Form
оголосіть дві змінніuseRef
:emailRef
таpasswordRef
, ініціалізованіnull
. - Обнуліть поля введення, встановивши їх значення в порожній рядок за допомогою змінних
useRef
.
- To import the necessary hook from the React library, include an
import
statement. - For this task, we will utilize the
useRef
hook to store data without affecting the markup. - To determine the appropriate variable name for the ref, choose a word that is associated with the ref and add "Ref" at the end.
- To initialize the ref with
null
, passnull
as the initial value in the brackets of theuseRef
hook (e.g.,useRef(null)
). - To reset the form input, use the appropriate ref variable and assign its
.current.value
to an empty string (""
).
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 3. Розділ 5