Robot
Складчик
- #1
[НТМL Academy] React. Разработка сложных клиентских приложений. Февраль 2024
- Ссылка на картинку
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии.
И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Программа:
Раздел 1
Знакомство с TypeScript
Рассмотрим схему работы на курсе. Узнаем что такое TypeScript, и какие задачи он решает. Познакомимся с системой типов и разберёмся, как происходит процесс типизации. Научимся конфигурировать компилятор и рассмотрим основные настройки. Затем перейдём к практике и разберёмся с особенностями написания типизированного кода: кортежи, интерфейсы, дженерики и так далее.
Организационные вопросы.
React
Знакомство с библиотекой React. Узнаем, какие проблемы она решает и как может упростить разработку фронтенда. Подготовим основу проекта с помощью Vite. Научимся применять шаблоны для Vite. Затем познакомимся с основными возможностями библиотеки React (JSX, компоненты, передача данных между компонентами).
React.
Маршрутизация (React Router)
Узнаем как организована маршрутизация в SPA. Добавим в проект React Router и разберёмся с возможностями пакета: маршруты, перенаправления, приватные маршруты и так далее.
React-компоненты. Hooks
Расширим знания о React и компонентах. Научимся управлять состоянием, использовать события и методы жизненного цикла компонентов. Познакомимся с React Hooks и узнаем, как заменить ими классовые компоненты. Научимся работать с формами.
React и формы.
Практика
React и паттерны
Разбираемся с вопросом, что такое архитектура программного обеспечения и как её проектировать. Знакомимся и учимся на практике применять паттерны проектирования.
Проектирование.
Управление состоянием. Redux
Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.
Middlewares.
Асинхронность в Redux
Научимся внедрять асинхронный код в синхронную работу Redux с помощью Middleware. Узнаем как взаимодействовать с сервером при помощи пакета Axios. Познакомимся с интерцепторами.
Redux-thunk.
Axios.
Практика
Оптимизация производительности
Обсудим производительность React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь. Затем познакомимся с пакетом Redux Toolkit и узнаем как с его помощью избавиться от шаблонного кода при работе с Redux.
Тестирование React
Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для компонентов.
И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Программа:
Раздел 1
Знакомство с TypeScript
Рассмотрим схему работы на курсе. Узнаем что такое TypeScript, и какие задачи он решает. Познакомимся с системой типов и разберёмся, как происходит процесс типизации. Научимся конфигурировать компилятор и рассмотрим основные настройки. Затем перейдём к практике и разберёмся с особенностями написания типизированного кода: кортежи, интерфейсы, дженерики и так далее.
Организационные вопросы.
- Обзор проектов.
- Схема работы на курсе.
- Что такое TypeScript, и какие задачи он решает.
- Система типов.
- Как код на TypeScript превращается в JavaScript.
- Инфраструктура: настройки компилятора.
- Аннотации и автоматический вывод типов.
- Типизация объектов, массивов, функций.
- Дженерики.
- Кортежи.
- Интерфейсы, псевдонимы типов.
React
Знакомство с библиотекой React. Узнаем, какие проблемы она решает и как может упростить разработку фронтенда. Подготовим основу проекта с помощью Vite. Научимся применять шаблоны для Vite. Затем познакомимся с основными возможностями библиотеки React (JSX, компоненты, передача данных между компонентами).
React.
- Что такое React.
- Как работает React.
- Какие задачи эффективно решает.
- Virtual DOM.
- Create React App.
- TypeScript.
- Чем отличается от HTML.
- Основные приёмы работы.
- Компоненты React.
- Пропсы. Передача данных через свойства.
- Композиция.
- Рендеринг списков.
- Условный рендеринг.
- Создание репозитория, форк, клонирование.
- Знакомство с проектом.
- Настройка инфраструктуры.
- Типизация компонентов.
Маршрутизация (React Router)
Узнаем как организована маршрутизация в SPA. Добавим в проект React Router и разберёмся с возможностями пакета: маршруты, перенаправления, приватные маршруты и так далее.
- Маршрутизация в SPA.
- History API.
- Компоненты Route, Link, Redirect.
- Управление маршрутами.
- Реализация маршрутизации в приложении.
React-компоненты. Hooks
Расширим знания о React и компонентах. Научимся управлять состоянием, использовать события и методы жизненного цикла компонентов. Познакомимся с React Hooks и узнаем, как заменить ими классовые компоненты. Научимся работать с формами.
- Состояние.
- Однонаправленный поток данных.
- Функциональные компоненты, классовые компоненты, PureComponent.
- Введение в React Hooks.
React и формы.
Практика
- Добавление состояния к компонентам.
- Обработка форм.
React и паттерны
Разбираемся с вопросом, что такое архитектура программного обеспечения и как её проектировать. Знакомимся и учимся на практике применять паттерны проектирования.
Проектирование.
- Чем отличается хорошая программа от плохой.
- Зачем проектировать программное обеспечение. Цели проектирования.
- Архитектура программного обеспечения.
- Инструменты для проектирования.
- Какие проблемы решают паттерны.
- Из чего состоит паттерн.
- Виды паттернов проектирования.
- Простые компоненты (Stateless component).
- Компоненты-обёртки (Proxy component).
- Компоненты высшего порядка (Higher-order component).
- Render Props.
- Провайдер (Provider).
- React Hooks и паттерны.
- Улучшение проекта, применение паттернов на практике.
Управление состоянием. Redux
Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.
- Flux-архитектура.
- Хранилище, диспетчер, действия.
Middlewares.
- Расширение функциональности Redux.
- Подключение к проекту Redux.
- Обновление кодовой базы.
- Создание middleware.
Асинхронность в Redux
Научимся внедрять асинхронный код в синхронную работу Redux с помощью Middleware. Узнаем как взаимодействовать с сервером при помощи пакета Axios. Познакомимся с интерцепторами.
Redux-thunk.
Axios.
Практика
- Подключение к проекту redux-thunk.
- Взаимодействие с сервером.
Оптимизация производительности
Обсудим производительность React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь. Затем познакомимся с пакетом Redux Toolkit и узнаем как с его помощью избавиться от шаблонного кода при работе с Redux.
- Профилирование компонентов.
- Управление обновлением компонентов.
- Мемоизация.
- Redux Toolkit.
- Профилирование компонентов.
- Применение хуков useMemo, useCallback.
- Особенности useEffect.
- Redux Toolkit: createAction, createReducer, createSlice.
Тестирование React
Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для компонентов.
- Jest.
- React Testing Library.
