Зміст курсу
Опановуємо 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 Хуки та Контекст Підсумок Розділу
Челендж: Перемикання Видимості
Завдання
Створіть компонент, який містить кнопку та текстовий абзац. Реалізуйте необхідну логіку з використанням хука useState
для перемикання видимості текстового абзацу при натисканні на кнопку.
Інструкція
- Імпортуйте хук
useState
з бібліотеки React. - Оголосіть змінну стану з іменем
isVisible
за допомогою хукаuseState
. Ініціалізуйте її значеннямfalse
. - Реалізуйте функцію з іменем
toggleVisibility
, яка при виклику перемикає станisVisible
міжtrue
таfalse
. - Використовуйте функцію
toggleVisibility
як обробникonClick
для кнопки.
- Include an
import
statement to import the appropriate hook from the React library. - For this task, we will utilize the
useState
hook as we are managing the state of paragraph visibility. - To determine the appropriate variable name for the state, observe the function associated with setting the state, which is
setIsVisible
. Remove the "set" prefix and use a lowercase first letter for the variable name, which should beisVisible
. - To invoke the
toggleVisibility
function when the button is clicked, assign it as the value for theonClick
attribute of the button.
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 3. Розділ 3