[it-incubator] Станьте Front-end разработчиком уровня Middle+. Тариф Самостоятельно

[Аноним]

Ссылка на картинку

Для наших студентов мы разработали удобный личный кабинет с широким функционалом:

• Уроки с возможностью возвращаться к ним для повторения материала в любое время
• Календарь с расписанием всех занятий и менторской поддержки
• Домашние задания
• Экзамены
• Статистика прогресса обучения
• Плейлисты с видео-уроками
• Информация о стримах и других мероприятиях
• Работа над CV

Программа обучения:

1 месяц. Продвинутый HTML / CSS

<Неделя 1>

- Семантика. Теги
- Свойство display
- Размеры элементов
- Основные единицы измерения
- Функция calc()
- Отступы
- Границы
- Свойство box-sizing
- Формы
- Подключение шрифтов. Свойство font
- Свойства для стилизации текста
- Favicon

<Неделя 2>

- Каскадность. Приоритет стилей
- Класс container
- Flexbox
- Цвета. Форматы rgb, rgba, hex
- Форматы изображений
- Свойство background
- Градиент
- Тень. Свойства box-shadow, text-shadow, filter: drop-shadow()
- Фильтры. Свойства filter и backdrop-filter
- Svg спрайты
- Svg спрайты в React
- Списки - структура и стилизация. Счетчик

<Неделя 3>

- Grid +
- Свойство transition
- Анимации. Свойство animation и ключевые кадры
- Адаптив. Отзывчивая верстка. Медиазапросы
- Адаптив изображений
- Адаптив шрифтов
- Трансформации в css. Свойство transform
- Свойство overflow
- Позиционирование
- Псевдоэлементы
- Псевдоклассы
- Управление выделением текста

<Неделя 4>

- Таблицы. Структура и стилизация + position: sticky
- First / last / nth-child
- Свойство cursor
- 2 способа красиво обрезать текст
- 5 способов центрировать элемент
- 8 способов спрятать элемент
- Cтилизация скролла
- Инпут как в MUI. Верстка и стилизация
- Стилизация input type="checkbox / radio" (Like)
- Стилизация input type="range"
- Rating
- Комбинаторы

2 месяц. Props / useState / map, filter / Обработка событий / Условный рендеринг

<Неделя 1>

Создаём проект для работы с React
- Узнаем, что такое React и зачем он нужен
- Поговорим о том, что такое CRUD-операции
- Создадим первый проект на React со сборщиком Vite и пакетным менеджером pnpm
- Рассмотрим структуру проекта на React: модули, пакеты, JSX
- Разберёмся, зачем нужны компоненты
- Проведём декомпозицию кода, выделим свой первый компонент
- Объект props: знакомимся и используем
-TypeScript: первые шаги
- JS: Типы данных. Особенности объектов как ссылочного типа данных. Копирование объектов. Синтаксис деструктуризации

<Неделя 2>

Стэйт-менеджмент
- Создаем state-приложения: useState
- Изменения в state: коллбэки
- Знакомимся с понятием иммутабельности
- Обновление интерфейса и изменение state: установим связь
- Узнаем, как рендерить списки: атрибут key
- Учим JS: методы массивов map и filter
- ES6: деструктуризация на практике
- И типизируем, типизируем, типизируем…
- JS: Методы массивов map, filter, sort и др. “Полифилы” методов массивов. Array.prototype как “хранилище” методов. + практика

<Неделя 3>

Обрабатываем события
- Добавляем пакеты в проект
- Наращиваем функционал проекта
- Обрабатываем события: onClick, onChange
- Продолжаем обрабатывать события: onKeyDown
-Встречаемся с объектом Event
- Продолжаем работу с TypeScript
- Разбираем, как сделать код "human-readable"
- JS: Методы массивов slice, splice, toSpliced, reduce + практика

<Неделя 4>

Развитие интерфейса
- Продолжаем развивать функционал проекта
- Учимся валидировать пользовательский ввод
- Local state – углубляем понимание
- Осваиваем коцепцию контролируемого элемента ввода (input)
- User-friendly interface: условное присвоение классов
- User-friendly interface: условный рендеринг
- JS: Синтаксис вычисляемых свойств объекта (“ассоциативный массив“), map-set, object.keys, object.values, object.entries

3 месяц. Ассоциативный массив / Универсальные компоненты / Material UI / TDD, reducer, action creator, useReducer

<Неделя 1>

Усложняем state: работаем со связанными структурами
- Узнаем вычисляемые свойства объектов
- Рассмотрим, как работать со связанными структурами данных
- Создадим более сложный state
- «Зарефакторим» функции для выполнения CRUD-операций с более сложной структурой данных
- Добавим новый функционал в наш проект Todo-list
- Продолжаем работать с TypeScript

<Неделя 2>

Делаем сложные компоненты
- Проведём декомпозицию React-компонентов
- Вспоминаем, что такое универсальные компоненты
- Создадим интересную форму для добавления сущностей в проект
- Создадим форму для редактирования
- Ещё раз поговорим про локальный state
- Продолжаем использовать условный рендеринг
- Научимся делать сложные коллбэки

<Неделя 3>

Material UI: знакомимся
- Добавляем библиотеку в проект
- Изучаем библиотечные компоненты
- Material UI: стандартные элементы ввода Material UI: элементы сетки
- Material UI: изменение стилей экземпляра компонента
- Material UI: применение переиспользуемых компонентов
- Material UI: создание, применение и изменение темы приложения

<Неделя 4>

Готовимся к встрече с Redux, пишем тесты
- Обсудим, какие задачи решает state-management
- Узнаем, что такое reducer и с чем его едят
- Познакомимся с понятием «чистой функции»
- Напишем первую функцию-reducer
- Изучим, что такое action и action creator
- Научимся тестировать reducer с помощью библиотеки Vitest
- Предназначение useReducer
- useState или useReducer?
- Использование useReducer в Todolists
- Продолжаем работать с TypeScript

4 месяц. Redux Toolkit / Декомпозиция кода и структура приложения / REST API, axios / Prettier, env, enum

<Неделя 1>

Изучение Redux Toolkit
- Теория, внедрение Redux Toolkit в проект
- Три фундаментальных принципа Redux
- Однонаправленный поток данных в Redux
- Мутабельное изменение стейта immerJS. Разбор основных CRUD операций
- createAction для создания action
- createReducer для создания reducer
- Использование одного action для tasksReducer и todolistsReducer
- Функции селекторы
- Типизация хуков из react-redux
- JS: Обработка событий: интерфейс Event, оnclick и addEventListener (особенности использования), “всплывающие” события, свойства target и currentTarget, методы stopPropagation и preventDefault. Паттерны проектирования. Observer, Publisher-Subscriber. Примеры использования

<Неделя 2>

Декомпозируем код и настраиваем структуру приложения
- Создание reducer для управления состоянием темы приложения
- Настройка абсолютных импортов (baseUrl)
- Декомпозиция кода приложения
- Настройка структуры проекта по feature-folder
- JS: Область видимости переменных. Замыкание: пример счётчик, почему и как работает. Сборка мусора. Рекурсия и стек вызова

<Неделя 3>

Изучаем REST API, подключаем axios для запросов на сервер
- Разберём теорию REST API (типы запросов, Request, Response, коды ответа HTTP)
- Рассмотрим самую популярную библиотеку для взаимодействия с сервером Axios
- Применим CRUD-операции для тудулистов на практике
- Работа с Promise на практике
- Научимся архитектурно корректно писать код: вынесем его в DAL-уровень
- Создадим axios instance для исключения дублирования кода
- Разберём взаимодействие с TypeScript: научимся типизировать Ajax-запросы
- Рассмотрим "дженерики" (Generic Types) на практике
- Упростим импорты в приложении с index.ts
- JS: Promise. Для чего нужны, какую проблему решают. Создание собственного Promise. Все тонкости работы с методами .then .catch .finally

<Неделя 4>

Подключаем Prettier, работаем с переменными окружения и enum
- Подключение и настройка prettier
- Работа с переменными окружения .env
- Применим CRUD-операции для тасок на практике
- Изучим и поработаем с enum
- Typescript utility types - применение на практике
- JS: Promise. Работа с методами .then .catch .finally на реальных примерах. Специальный синтаксис async/await. Обработка ошибок с помощью try и catch. Статические методы класса Promise

5 месяц. Slices / Thunk / Loader / Обработка ошибок / Routing с React Router / Работа с формой с React-hook-form / Валидация встроенная и с Zod

<Неделя 1>

Создание slices и thunk
- Создание слайсов с createSlice. Взаимодействие с reducers
- Применение extraReducers
- Best practice в работе с селекторами. Разбираем reselect (createSelector)
- Рефакторинг логики configureStore
- Разберём теорию (что такое Thunk, для чего нужна, какую проблему решает, Middleware)
- Разберём трехуровневую архитектуру UI-BLL-DAL
- Работа с thunk / createAsyncThunk
- JS: Структуры данных Stack/Queue. Событийный цикл (Eventloop): микрозадачи и макрозадачи. Решение практических задач

<Неделя 2>

create.asyncThunk, Loader
- Изучение buildCreateSlice и создание thunk по новому синтаксису с create.asyncThunk
- Изучение жизненных циклов thunk (pending, fulfilled, rejected, settled)
- Напишем thunk для работы с тасками
- Научимся показывать Loader во время запросов на сервер и убирать его, когда ответ получен
- Написание тестов для thunk
- JS: Ключевое слово ‘this’, работа с this в функциях и методах объектов. Потеря контекста. Методы функций call, apply, bind. This в функциях конструкторах

<Неделя 3>

Обработка ошибок и их отображение на UI
- Рассмотрим, как настроить disable (делать неактивными) кнопки/поля при запросе на сервер, чтобы пользователь не мог ничего сломать
- Сделаем универсальный компонент для обработки ошибок и будем его показывать пользователю при возникновении ошибки
- Проверка на ResultCode
- Обработка ошибок в Catch
- Напишем универсальную функцию для обработки ошибок
- Познакомимся с "дженериковой" функцией
- JS: Классы в JS. Для чего нужны, какие проблемы решают. Как создать собственный класс. Для чего нужна функция constructor() в классах. Приватность в классах. Геттеры и сеттеры (get/set). Статические методы класса

<Неделя 4>

React Router, React-hook-form, Zod
- Разберем React Router на практике (роуты, редиректы, обработка ошибки 404)
- Разберем библиотеку React-hook-form (получение данных, валидация и обработка ошибок)
- Валидация форм и ответа сервера с Zod
- JS: Прототипы в JS, proto/prototype. Все ли в JS объекты? Разница между proto и prototype. Прототипное наследование

6 месяц. Auth flow / Protected routes / RTK query / RTK query advanced features

<Неделя 1>

Auth flow / Initializing / localStorage / Axios interceptors / Protected routes
- Реализация авторизационного Flow (login, logout, authMe)
- Изучение useNavigate и Navigate
- Работа с localStorage и axios interceptors
- Создание Protected routes
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket

<Неделя 2>

RTK query / query / mutation / Code Splitting
- Изучение RTK query
- Работа с query и вариантами условного получения данных
- Работа с mutation и вариантами обновления данных
- Уменьшение начального размера бандла с injectEndpoints
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket

<Неделя 3>

RTK query / Работа с cache / addMatcher / Skeletons / Обработка ошибок
- Работа с cache: updateQueryData, resetApiState, invalidateTags
- Настройка Loader с addMatcher
- Реализация Skeletons
- Изучение вариантов обработки ошибок с RTK query
- Глобальная обработка ошибок с помощью baseQuery
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket

<Неделя 4>

RTK query / Advanced cache tags / Cache behavior / Optimistic update
- Изучение на практике advanced cache tags
- Внедрение пагинации для изучения cache behavior
- isLoading vs isFetching
- Optimistic update
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket

Дополнительный контент:

Backend (nodejs) для frontend разработчиков

<Неделя 1>

Express App / Rest Api / Express Router
- Simple express app with typescript and nodemon
- Deploy to Heroku for simple TS Express App
- Deploy to Heroku via CLI
- Express and REST API
- Swagger
- Express Router

<Неделя 2>

Валидация / Базовая авторизация / DAL уровень
- DataAccessLayer - Repositories
- Express middleware, chain of responsibility
- Input validation, express-validator
- Basic Authorization

<Неделя 3>

MongoDB CRUD
- MongoDB, mongod and mongo shell, Studio 3T
- MongoDB CRUD
- Eventloop, async-await
- NodeJS + mongoDB

<Неделя 4>

BLL уровень / сортировка / пагинация
- Business Logic Layer
- QueryRepository, основы CQS, CQRS
- Sorting, сортировка
- Pagination

Тариф Самостоятельно:

• Уроки в записи
• Доступ к записям
• Чат-бот для мотивации в учёбе
• Комьюнити студентов
• 1 час менторской поддержки
• Домашние задания и экзамены
• Отработка знаний на To-Do list

Показать больше