Опановуємо React

Опановуємо React

0%

1. Вступ до Основ React

Отримайте розуміння основних принципів React. Ви дізнаєтесь про JSX (JavaScript XML), створення багаторазових компонентів інтерфейсу користувача та рендеринг елементів. Крім того, ви вивчите важливість збору даних та умовного рендерингу в React-додатках. Наприкінці цього розділу ви матимете міцний фундамент з основних концепцій React, що підготує вас до успіху в більш складних темах, які будуть розглянуті в наступних розділах.

Що таке React?

SPA vs. MPA у Веб Розробці

Як React Працює з Віртуальним DOM

Знайомство з JSX в React

Створення Складних JSX Елементів

Рендеринг Елементів у React

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

Компонент React

Пропси в React

Челендж: Функціональні Компоненти

Умовний Рендеринг

Челендж: Умовний Рендеринг Контенту

Challenge: Conditional Rendering - Bank Alert

Рендеринг Набору Даних

Челендж: Рендеринг Набору Даних

Вступ до Основ React Підсумок Розділу

2. Стилізація в React Додатках

Вивчіть різні методи додавання стилів до React додатків. Ви дізнаєтесь, як застосовувати стилі до окремих компонентів, використовувати динамічні стилі та підтримувати масштабований і підтримуваний підхід до стилів у ваших проектах.

Вступ до Стилізації в React

Вбудовані Стилі

Вбудовані Стилі на Практиці

Челендж: Вбудовані Стилі

Стилізація за Допомогою CSS Файлу

Стилізація за Допомогою CSS файлу на Практиці

Челендж: Стилізація за Допомогою CSS Файлу

Стилізація за Допомогою CSS Модулів

Організація Структури Файлів та Папок

Челендж: CSS Модулі

Стилізація в React Підсумок Розділу

3. React Хуки та Контекст

Потужні можливості в сучасній React-розробці. Хуки революціонізують те, як ми пишемо функціональні компоненти, надаючи стислий та інтуїтивно зрозумілий спосіб керувати станом та виконувати побічні ефекти. І навпаки, контекст дозволяє нам обмінюватися даними через дерево компонентів без використання пропсів. Поєднання хуків та контексту дозволяє ефективно керувати станами та спрощує обмін даними в React-додатках.

Вступ: React Хуки та Контекст

useState Хук

Челендж: Перемикання Видимості

Челендж: Створення Компонента Форми

useEffect Хук

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

Челендж: Фільтрація Списку Автомобілів

Контекст

Контекст на Практиці

Челендж: World of Astronomy Додаток

React Хуки та Контекст Підсумок Розділу

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

Покрокове керівництво про те, як розпочати реальний React-проект. Від налаштування середовища розробки до розуміння організації проекту та критично важливих інструментів - ви отримаєте знання та впевненість, щоб розпочати свою подорож з React.

Налаштування Середовища

Редактор Коду

Налаштування Папки Проекту

Термінал

Початок Проекту

React в Реальному Світі Підсумок Розділу

Зміст курсу

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

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

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

Редактор Коду

Крок 2: Встановлення редактора коду

Щоб продовжити, нам потрібно встановити редактор коду. Якщо у вас вже є редактор коду, пропустіть цей крок і перейдіть до наступного розділу. Ми можемо вибрати будь-який редактор коду, з яким нам зручно працювати. Деякі популярні варіанти включають

Visual Studio Code - https://code.visualstudio.com/
Піднесений текст - https://www.sublimetext.com/
WebStorm - https://www.jetbrains.com/webstorm/

У цьому курсі всі приклади будуть продемонстровані з використанням коду Visual Studio. Важливо зазначити, що вибір редактора суттєво не впливає на зміст, але зовнішній інтерфейс може відрізнятися.

Крок за кроком:

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

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

Секція 4. Розділ 2

some-alt