Опановуємо React

Зміст курсу

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

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

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

Челендж: Рендеринг Елемента

Примітка

За замовчуванням усі челенджи можуть виглядати зломаними, оскільки вони містять пропуски, в які потрібно ввести необхідний код. Після того, як ви правильно заповните ці пропуски, заповнений код буде відображено на живій сторінці.

Кожен челендж також має дві кнопки: Hint та Solution. При їхньому натисканні відкриється підказка до завдання або нова вкладка із вирішеним завданням і робочим проектом.

Як працювати з Code Sandbox

Завдання: Створення картки товару

Створіть картку товару і відрендерите її в DOM. Картка товару потребує:

Зображення товару (елемент img).
- Атрибут src повинен дорівнювати змінній imageUrl.
- Атрибут alt повинен дорівнювати рядку Computer.
- Атрибут width повинен дорівнювати значенню 256.
Назва товару (елемент h3).
- Його текстовий вміст повинен бути Computer.
Ціна товару (елемент span).
- Його текстовий вміст повинен бути Price: $129.99.
Опис товару (елемент p).
- Його текстовий вміст повинен бути New Model.

The src attribute must contain the imageUrl variable as a value. Use curly braces {}.
The alt attribute must contain the string "Computer" as a value. Enclose it in double quotes.
The width attribute must contain the number 256 as a value. Use curly braces {}.
Ensure that the h3, span, and p elements have correct values.

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

Дякуємо за ваш відгук!

Секція 1. Розділ 7

Запитати АІ

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Зміст курсу

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

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

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

Челендж: Рендеринг Елемента

Примітка

За замовчуванням усі челенджи можуть виглядати зломаними, оскільки вони містять пропуски, в які потрібно ввести необхідний код. Після того, як ви правильно заповните ці пропуски, заповнений код буде відображено на живій сторінці.

Кожен челендж також має дві кнопки: Hint та Solution. При їхньому натисканні відкриється підказка до завдання або нова вкладка із вирішеним завданням і робочим проектом.

Як працювати з Code Sandbox

Завдання: Створення картки товару

Створіть картку товару і відрендерите її в DOM. Картка товару потребує:

Зображення товару (елемент img).
- Атрибут src повинен дорівнювати змінній imageUrl.
- Атрибут alt повинен дорівнювати рядку Computer.
- Атрибут width повинен дорівнювати значенню 256.
Назва товару (елемент h3).
- Його текстовий вміст повинен бути Computer.
Ціна товару (елемент span).
- Його текстовий вміст повинен бути Price: $129.99.
Опис товару (елемент p).
- Його текстовий вміст повинен бути New Model.

The src attribute must contain the imageUrl variable as a value. Use curly braces {}.
The alt attribute must contain the string "Computer" as a value. Enclose it in double quotes.
The width attribute must contain the number 256 as a value. Use curly braces {}.
Ensure that the h3, span, and p elements have correct values.

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

Дякуємо за ваш відгук!

Секція 1. Розділ 7

some-alt