Front-end Pro. Просунутий рівень після курсу Front-end Basic. Онлайн

Скидка - 10%

при оплаті відразу за весь курс

Идет набор на курс!
Продолжительность обучения
38 занять
Стоимость курса
17 100.00 грн

Курс призначений для глибокого вивчення мови програмування JavaScript і бібліотеки React, яка використовується для створення складних Front-end додатків.
Популярна мова JavaScript використовується при створенні веб-додатків для додання інтерактивності веб-сторінок. Написання коду в React дуже схоже на роботу в HTML, що дає можливість легко почати писати код, упустивши синтаксис. Одна з головних особливостей React — свобода дій.

На курсі ви познайомитеся з принципами ООП, DOM, REST API і отримаєте практичні навички створення додатків з використанням «реакт-стека», що дозволить претендувати на посаду Junior Front-end Developer.

ЦІЛІ КУРСУ

  • Навчитися взаємодіяти з серверами за допомогою JavaScript
  • Освоїти ООП
  • Навчитися працювати з REST API
  • Вивчити всі особливості бібліотеки React
  • Вивчити всі нюанси: від того, як працює DOM, до того, як зібрати додаток Webpack-ом

БОНУСИ КУРСУ

  • Всі студенти цього курсу можуть відвідувати заняття з англійської мови
  • Всі студенти курсу пройдуть тренінг з проходження співбесіди та складанню резюме з нашим HR-фахівцем
  • Тестова співбесіда з технічним фахівцем

Записатися на проходження курсу

Формат обучения
Онлайн
Дата начала занятий
2 декабря 2025
Продолжительность обучения
38 занять
Занятий в неделю
2
Общее количество часов обучения
38
Помощь с трудоустройством
Нет

Сертификат

Сертифікат

Організатор

Hillel, комп'ютерна школа (Онлайн)
Онлайн

Программа курса

Знайомство з JS

  • Знайомство та план курсу
  • Введення в технологію веб-розробки
  • Підключення скриптів, перший запуск програми
  • Взаємодія з користувачем через примітивні функції
  • Git, Github

Змінні та оператори

  • Коментарі
  • Оголошення змінних
  • Сплив змінних
  • Порівняння var, let, const
  • Типи даних
  • Оператори

Умовні конструкції

  • Умовна конструкція if/else if/else
  • Умовна конструкція switch
  • Тернарний оператор
  • Практика

Цикли

  • Введення в цикли
  • Види циклів
  • Цикл while
  • Цикл do…while
  • Цикл for
  • Інструкції break та continue
  • Вкладені цикли
  • Нескінчені цикли
  • Практика

Масиви

  • Основи роботи з масивами
  • Варіанти створення масивів
  • Методи для роботи з масивами
  • Перебір масів за допомогою циклів for, for…in, for…of
  • Видалення елементів з масиву
  • Створення простих об’єктів
  • Практика

Основи функцій

  • Основи роботи з функціями
  • Варіанти створення функцій
  • Параметри функцій, значення за замовчуванням
  • Область видимості функції
  • Передача параметрів у функцію за значенням та за посиланням
  • Повернення значення з функції
  • Замикання
  • Лексична область видимості
  • Рекурсія

Контекст виконання функції

  • Глобальний об’єкт window
  • Функціональний контекст
  • Функції в об’єктах — методи
  • Методи підміни контексту
  • Стрілочні функції та іх відмінності від звичайних

Функції

  • Функція-коллбек
  • Функція вищого порядку
  • Перебор масивів за допомогою методів forEach, find, map, filter, reduce

DOM

  • Що таке DOM?
  • Отримання існуючих DOM-елементів
  • Динамічне створення та видалення нових DOM-елементів
  • Керування атрібутами та вмістом DOM-елементів
  • Можливі події
  • Додавання обробників подій DOM-елементів

Events

  • Фази обробки подій
  • Делегування подій
  • Об’єкт event та його методи
  • BOM-об’єкти

Робота з формами

  • Основні елементи-керування
  • Базові навички динамічної роботи з елементами керування
  • Валідація отриманих даних від користувача

WebStorages

  • Cookies
  • LocalStorage
  • SessionStorage
  • Практика
  • Практика та Livecoding

Регулярні вирази

  • Створення регулярного вираза
  • Робота з регулярними виразами за допомогою методів
  • Модифікатори регулярних виразів
  • Структура шаблонів. Метасимволи. Дужки. Квантифікатори

Бібліотеки та фреймворки

  • Огляд популярних бібліотек та фреймворків
  • Встановлення бібліотек за допомогою NPM
  • Приклади роботи з розповсюдженими бібліотеками

Асінхронне виконання коду

  • EventLoop
  • Функції відкладенного виконання коду

ESNext

  • EcmaScript
  • Babel
  • Spread & Rest оператори
  • Деструктурізація масивів та об’єктів
  • Оператор Nullish coalescing
  • Оператор Optional chaining
  • Інші найновіші оператори

HTTP

  • Огляд клієнт-серверної архітектури
  • Що такое протокол HTTP та як він працює
  • Огляд технології Ajax
  • Методи роботи з сервером по технології Ajax
  • Приклади відкритих API
  • Технологія WebSockets

Promise

  • Вступ до Promise
  • Стан Promise
  • Обробка Promise за допомогою методів then, catch, finally
  • Одночасна обробка кількох Promise
  • Livecoding

ООП

  • Основні поняття ООП
  • Фунції-конструктори
  • Прототипне успадкування
  • Створення об’єкту з певним прототипом
  • Створення сутностей за допомогою class
  • Успадкування сутностей створених через class
  • Приватні властивості
  • Статичні властивості за методи class
  • Практика

Робота з асінхронними функціями

  • Створення власних асінхронних функцій
  • Обробка асінхронних функцій з інструкцією await
  • Обробка помилок

Системи збирання коду

  • Огляд сучасних систем збирання коду
  • Основи роботи з Gulp
  • Компіляція та зборка sass-файлів
  • Транспіляція та зборка js-файлів
  • Плагін ESLint

Webpack

  • Огляд можливостей Webpack
  • Встановлення та конфігурація Webpack
  • Налаштування базових лоадерів та плагінів до Webpack
  • Запуск локального серверу за допомогою Webpack

Node.js

  • Огляд технології Node.js
  • Створення сервера на Node.js
  • Приклад створення сервера за допомогою бібліотеки express на Node.js
  • Приклад роботи власного фронтенд та бекенд додатків
  • Огляд програми Postman

React

  • Огляд поняття SPA
  • Введення в React
  • Основні концепції React
  • Створення первого React-додатку
  • Основи роботи з JSX
  • Варіанти створення компонентів
  • Передача props до компонентів
  • Обробка подій у React-компонентах

Компоненти React

  • Етапи життєвого циклу компонентів
  • Порівняння класових та функціональних компонентів
  • Робота з класовим компонентом
  • Методи життєвого циклу класового компоненту
  • Робота зі state

Функціональні компоненти в React

  • Основи роботи з функціональним компонентом
  • Особливості роботи з хуками: useState, useEffect, useRef, useCallback, useMemo, useContext
  • Створення власних хуків

Робота з формами в React

  • Робота з основними елементами керування форми

Маршрутизація в React

  • Основи роботи з бібліотекою react-router-dom

Бібліотеки для роботи з React-компонентами

  • Огляд бібліотек-компонентів AntD/Material UI
  • Робота з стилями у React за допомогою CSS-модулів та бібліотеки styled-components
  • Огляд бібліотеки для створення таблиць даних Ag Grid

Redux

  • Що таке state management?
  • Вступ до Redux та основні поняття
  • Основні етапи data flow у Redux
  • Інтеграція Redux з React-додатком
  • Робота з хуками useDispatch та useSelector
  • Middlewares на прикладі redux-thunk
  • Livecoding

Redux-Toolkit

  • Оптимізація роботи з Redux за допомогою Redux-Toolkit
  • Основні поняття Redux-Toolkit
  • Створення та використання RTK Query

TypeScript

  • Вступ до TypeScript — переваги та недоліки
  • Статична типізація у TypeScript
  • Типи та інтерфейси
  • Аліаси, можливі значення, необов’язкові параметри
  • Generics
  • Робота з TypeScript в React-додатку

Тестування React-додатків

  • Основні поняття тестування програмного забезпечення
  • Модульне тестування за допомогою бібліотеки Jest
  • Тестування React-додатків за допомогою бібліотеки React-Testing-Library

Екзамен