Frontend: JavaScript/TypeScript + React
Frontend: JavaScript/TypeScript + React
В рамках этого курса изучим с вами базу любого веб-приложения: HTML, CSS, JavaScript и TypeScript, – поработаем со статикой, разберем верстку и как правильно это делать с семантической точки зрения. В рамках курса мы создадим с вами реальный проект и шаг за шагом будем его наполнять, разбирая материал с особой внимательностью к деталям.
Темы курса
Знакомство с нодой, установка, управление зависимостями. Первое приложение на ноде. Различие между браузерным и серверным JS-кодом. JS - движки и переменные окружения. Запуск скриптов с переменными. Взаимодействие с консолью и модульная система. Синтаксис языка js (быстро и кратко), промисы и работа с файлами, области видимости и модули, окружения JS (браузерное и серверное), как запускать (node)
Что такое html, css, js и как они взаимодействуют друг с другом. Структура HTML-документа (секции head & body), база по тэгам и семантике. Все о css, с чего начинать, какие технологии существуют и стратегии стилизации. box model. Свойство display. Inline & Block & Inline-block. Свойство positinon и опасность z-index. Введение в адаптивную верстку с media. Способы подключения CSS и JS в HTML и то, как они могут повлиять на загрузку приложения в целом.
Flexbox & Grid. Advanced CSS & HTML. Sass. Gulp. Accessibility. Математика браузерных вычислений. Работа с DOM. Как строится дом дерево в браузере. События. Слушатели. Callback + Event loop. Собрать небольшое интерактивое приложение + Подключение нескольких скриптов в html, а затем прикрутить сборщик rollup/parcel.
Построение сайта браузером, pipline, CSSOM, HTML DOM, слои и браузерная оптимизация, рендер и fps
Каркас приложения, созданннго через create-react-app на TypeScript, иерархия папок, что такое папка build, src, первый “hello world”. Что такое jsx/tsx и return(…) Почему мы пишем на TypeScript
Жизненный цикл реакт компонента и state, передача параметров и ререндеринг, PureComponent, forceUpdate, static shouldCompinentUpdate() приватные методы, методы компонентов
Жизненный цикл по аналогии с классовыми компонентами useState(), useEffect(), memo, передача параметров и ререндеринг, useCallback, useMemo
SCSS - миксины, переменные, наследование BEM CSS modules CSS in JS
Статические анализаторы кода и шаблон форматирования для IDE и настройка рабочего места (VS code, WebStorm)
Зачем нужен, пример типовых ошибок: попытка взять несуществующие пропсы, попытка взять поле от undefined или null. Типы Интерфейсы Енумы Описание массивов, объектов, pick, omit, extends, разница между ‘field?: string’ и ‘field: string | undefined’ Простейшие TypeGuard’ы
CONTEXT (МОДАЛКИ) Лекция посвящена созданию инструмента для работы с модальными окнами Знакомство с React.Portal
БЛОК #1, REDUX общий стейт Reducers Actions и dispatch Middleware: redux-thunk, saga Слежение за изменением состояния приложения и ререндерами через select
LocalStorage/cookie
Формы и типы полей (input) Валидация форм своими руками Yup, react-hook-form
Роутинг, уровни доступа
Promise(resolve, reject) Async/await Микротаски/макротаски и setTimeout, setInterval Fetch и xmlhttp request Axious и типовые настройки Headers React Query
Принципы, паттерны и архитектура веб-приложения
Динамика в приложении, infinity scroll, пагинация. Разделение сборки на прод дев, дев сервер, проксирование, минификаторы, лоадеры и плагины для ускорения загрузки бандла. Выгрузка svg картинок.
Что это и настройка, докер контейнер.
SSR + Next