---

Видео на тему: frontend - простыми словами - видео

Использование useEffect для получения данных. Когда необходим useEffect.Порядок работы. Как работает массив зависимостей в useEffect. Функция очистки, как работает и когда применять.Использование массивов для передачи свойств в компоненты. Использование метода MAP для создания нужного количества компонентов. Свойство KEY для создаваемых с помощью метода MAP компонентов. Подключение UUID для задания значений свойства KEY создаваемых компонентов. Фильтрация отображаемых компонентов. Использования метода FIND для получения нужного компонента. Тернарный и логические операторы для работы с ошибками.useRef - хук в React. Использование useRef для хранения значений, не вызывающих перерисовку компонента при их изменении. Получение элементов DOM с помощью useRef. Не контролируемый input на основе элемента DOM полученного с помощью useRef. Использование состояний (хук useState) для получения контролируемого input. Групировка состояний в одно состояние значением которого является объектСоздание и использование, настраиваемого компонента «контейнера» («обертки»). Решение проблемы проброса свойств (props) через компоненты посредники в нужный (props drilling). Синтаксис с открывающей и закрывающей частями для компонента. Свойство children (props.children) для компонента. Композиция компонентов как альтернатива наследованиюДобавление в компоненты картинок с помощью папки public. Использование иконок из библиотек в виде компонентов. Файл глобальных стилей Инлайновые стили для компонентов. className и файлы стилей для компонентов. Инкапсуляция, создания независимых стилей компонента с использованием CSS модулей. Тернарный и логические операторы для стилизации компонента в зависимости от propsСоздание классовых компонентов. React.Component. Свойства(props) и состояния(state) для классовых компонентов. Примеры работы с классовым компонентомЧто такое state (состояние компонента). Разница между свойством(props) и состоянием(state) для компонента. Управление состоянием компонента с использованием хука useState. Бесконечный рендер компонента. Использование callBack для изменения состояния с явным указанием предыдущего значения. Совместное использование свойств и состояния компонента. Использование состояния для передачи данных из дочернего компонента в родительский. React Developer Tools. Виртуальный и реальный DOM. Тернарный и логические операторы для условного рендера компонентов.Передача свойств в дочерний компонент из родительского компонента. Что можно передавать в PROPS. Использование тернарного оператора и логических операторов для работы со свойствами компонента. Деструктуризация объекта PROPS со свойствами компонента. "Prop drilling" – проброс свойств в компонент через несколько уровней.Создание функционального компонента, использование синтаксиса JSX. Особенности именования функциональных компонентов. Как работать с javascript внутри JSX.5 способов начать проект с использованием библиотеки React. Использование CDN. Webpack или Vite для создания стартового шаблона проекта на React. Песочницы – простой способ начать работу, если есть только браузер. Максимум возможностей и удобства работы NEXT.JSСоздание компонента. Создание класса, наследование от HTMLElement, подключение через customElements.define, первый render через connectedCallback. Подключение теневого DOM. Использование attachShadow и shadowRoot. Использование атрибутов и slot для управления контентом в компонентеРассмотрим работу методов GET POST PUT PATCH DELETE для HTTP запросов. Напишем запросы используя FETCH. В качестве «базы данных» используем json-server. Для получения данных из форм воспользуемся FormDataИспользование запросов XMLHttpRequest, GET и POST запросы, использование JSON для создания «базы данных», подключение NPM к проекту, работа с npm паккетом JSON-SERVERИспользование CSS спрайта. Добавление иконок, создание простого HOVER на основе спрайта. Инструмент для создания спрайта из набора иконок. Использование спрайта для создания анимации в проекте.практика применения if, if ... else if ... else if, switch и тернарного оператора на простых примерах. Использование if ... in для проверки наличия свойства(ключа) в объектечто такое тип данных "number", инструменты для работы и особенности использования. Необходимый минимум для стартаинструменты для работы с типом данных string. Методы, свойства, экранирование, шаблонные строки, конкатенацияиспользование метода sort для сортировки массива. Сортировка массива с примитивными типами данных : строка и числа. Сортировка массива объектов. Сортировка массива объектов по логическим значениямlocalStorage - теория, основные принципы работы и практический пример. Простая "записная книжка для контактов" в качестве примера.работа с формой в javascript, события для формы, получение данных из формы