Записатися на курс
Будь ласка зачекайте...
Ваш запит успішно відправлений!

Курс React JS

Тривалість:
14 год.
Кількість уроків:
7 занять
Вартість навчання:
2740 грн

Форма навчання

Денне навчання
Онлайн навчання
Записатися на курс

Цільова аудиторія

Даний курс призначений для розробників, які володіють мовою JavaScript, які хочуть освоїти новий потужний інструмент для розробки веб-додатків ReactJS.
Курс буде корисний початківцям і досвідченим frontend-розробниками

Попередні вимоги

Розуміння HTML & CSS, JavaScript.

Опис курсу
ReactJS Essential

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

Читати повністю

Зміст курсу

Згорнути
1
Вступ до React
• Трохи про курс

• Що таке React?

• Коли і чому варто використовувати React

• Що таке віртуальний DOM і як він працює

* Рендеринг даних в React-JS!

• Перший компонент - Hello world.

• Props у компонентів

• State компонентів, методи get Initial State і setState

• Приклад. Відображення списку контактів

• Обробка подій в React, синтетичні події
Читати далі
Згорнути
2
Детальніше про компоненти
• Життєвий цикл компонента

• Порядок виклику методів життєвого циклу при ініціалізації компонента

• Порядок виклику методів життєвого циклу при зміні параметрів

• Порядок виклику методів життєвого циклу при зміні стану

• Порядок виклику методів життєвого циклу при видаленні компонента

• Пояснення методів, коли які слід використовувати

• Приклад. Демонстрація порядку викликів методів життєвого циклу

• Приклад. Таймер

• Поділ програми для роботи з нотатками на компоненти, розробка структури

• Установка node js і npm

• Установка і запуск http-сервера

• Приклад. Додаток для управління нотатками < / br>
* Inline-стилі в React < / br>
• Використання this.props.children

• Refs

• Використання localStorage для зберігання нотаток користувача
Читати далі
Згорнути
3
Оточення
• Використання npm

• Приклад. Заповнення package.json

* Підключення зовнішніх модулів за допомогою npm < / br>
* Навіщо потрібен збирач проектів і як він працює?

• Налаштування webpack

• Приклад. Підключення лоадерів до webpack

• Налаштування hot reloading і hot module replacement

• Структура програми

• Використання Node JS модулів

• Приклад. Побудова модульного додатка < / br>
Читати далі
Згорнути
4
Роутинг і ES2015
• Основні можливості ES2015 на прикладах

• CSS препроцессоры

• LESS < / br>
• Що таке роутинг? Його значення в додатку

• Використання react-router

• Приклад. Налаштування вкладених маршрутів

• Валідація props

• Приклад. Компонент для відображення статті

• Контекст 10. Приклад. Передача кольору через контекст

• Навігація в додатку

• Приклад. Маніпуляція з іменами класів
Читати далі
Згорнути
5
Архітектура Flux, взаємодія з API
• Дані в додатку

• MVC, схема, проблеми

• Односпрямований потік даних

• Flux

• Приклад. Купівля товару в інтернет-магазині

• Налаштування Google developers console

• Material-ui

• Налаштування шару комунікації з API

• Приклад. Авторизація 10. React-router hooks

• Приклад. Побудова Flux архітектури в додатку: dispatcher, actions, stores, constants
Читати далі
Згорнути
6
Написання повноцінного SPA
• Концепція "розумних" і "поганих" компонентів

• Приклад. Розподіл компонентів на "розумні " і" погані" < / br>
• Приклад. Відображення індикатора завантаження для списку завдань

• Що таке оптимістичні дії і коли варто їх застосовувати?

• Приклад. Оптимістичне виділення задачі < / br>
• Приклад. Оптимістичне редагування завдання

• Приклад. Відображення помилки при неправильному id списку завдань

• Конфігурація, різні підходи
Читати далі
Згорнути
7
Deploy
* Писати додатки на React < / br>
• Використовувати ES2015 при написанні коду

• Використовувати Flux архітектуру

* Налаштовувати конфігурацію < / br>
* Налаштовувати відображення індикаторів завантаження < / br>
• Відображати помилки в додатку

• працювати з github
Читати далі

Що ви отримаєте на курсі

Робоче місце з ноутбуком і навчальними матеріалами

Практичні заняття і перевірка дз

Безкоштовний відеокурс

Онлайн тестування і сертифікація

Записатися на курс
ReactJS Essential
Старт курсу:
Трива
лість:
14 год.
Кількість уроків:
7 занять
Вартість навчання:
2740 грн
Записатися
на курс
Будь ласка зачекайте...
Ваш запит успішно відправлений!
Опис курсу
ReactJS Essential
Ми почнемо з того, що розберемося, чим Репак відрізняється від інших JS-фреймворків і в чому ж його перевага. Ми напишемо наш перший компонент, навчимося керувати станом та параметрами, будемо використовувати події, щоб робити наші компоненти динамічними. Розібравшись з основами React, ми перейдемо до вивчення стека технологій, які використовуються разом з ним: розберемося зі складанням додатків, підключенням зовнішніх бібліотек і вивчимо архітектуру Flux, а потім - напишемо повноцінне невелике динамічне веб-додаток.