Паттерны ReactJS видео-курс

Компоненты высшего порядка ReactJS (Higher-order components)

Паттерн Компонент высшего порядка назван по аналогии с функциями высшего порядка. Функция высшего порядка - это функция, которая либо принимает функцию как аргумент, либо возвращает функцию как результат. И то же самое можно сделать с компонентами. Функция (Higher Order component, HOC) может принимать компонент в качестве аргумента, что-то с ним делать и возвращать модифицированный (каким-то образом улучшенный) компонент. Смотреть на Rutube

Как использовать Компоненты высшего порядка ReactJS

Смотреть на Rutube

Паттерн Render Props в ReactJS

В этом видео поговорим о паттерне Render props в ReactJS, напишем примеры с разными кейсами, где render props полезны, посмотрим на проп children и передадим в него аргументы. Render prop - это функция, которая возвращает JSX, и эта функция используется как проп в компоненте. К пропсам с таким поведением принято добавлять префикс render (например, renderContent), чтобы отличать обычные пропсы от тех что возвращают JSX. Смотреть на Rutube

Паттерн Compound Components в React - Составные компоненты

Составные компоненты (Compound Components) в ReactJS - это такой паттерн, в котором взаимосвязанные компоненты используются вместе. Эти компоненты используют общее состояние для общения друг с другом. Сам Compound Component состоит из нескольких компонентов поменьше, которые обычно объединяют в единый namespace. В этом видео напишем компонент с использованием паттерна Compound Components. Смотреть на Rutube

Управляемые и неуправляемые компоненты React

Смотреть на Rutube

1. Что такое Svelte и как он устроен?

В этом уроке проинициализируем default проект на Svelte и рассмотрим структуру default проекта. Смотреть на Rutube

2. Как устроен Компонент в Svelte?

В этом уроке рассмотрим компоненты Svelte, пропс (props, $$props, $$restProps, export let prop), реактивность SvelteJS, блоки script и style, изоляцию стилей и :global() Смотреть на Rutube

3. Жизненный цикл Svelte компонента

В этом видео рассматриваем методы жизненного цикла компонентов Svelte, а именно onMount, onDestroy, beforeUpdate, afterUpdate, а также функция tick. Смотреть на Rutube

4. HTML шаблоны в Svelte

В этом уроке рассмотрим cинтаксис HTML шаблонов Svelte, а именно if, each, await, key, а также html и debug. Смотреть на Rutube

5. Как работать с событиями в Svelte?

В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директиву on, модификаторы событий, переброс событий, createEventDispatcher и т.д. Смотреть на Rutube

6. Байндинги и Привязки - Svelte Bindings

В этом уроке рассмотрим привязки в Svelte, синтаксис и директиву bind:, привязки к компонентам и т.д. Смотреть на Rutube

7. Хранилище Svelte Store

В этом уроке рассмотрим store в Svelte и разновидности хранилищ: writable store (хранилище для записи), readable store (хранилище только для чтения), derived store (производные хранилища) и custom store (пользовательские хранилища). Смотреть на Rutube

8. Анимации и переходы в Svelte - Motion, Transition and Animation

В этом видео рассматриваем анимации в Svelte, а именно анимации значений (Svelte motion), анимации переходов (Svelte Transition), Svelte Animate, директивы transition, in, out и многое другое. Смотреть на Rutube

9. Действия и директива use - Svelte Actions

В этом видео рассматриваем Действия в Svelte, для чего они нужно и как ими пользоваться. Добавляем в проект директиву use, отправляем события из Действия и реализовываем функции действий - destroy и update. Смотреть на Rutube

10. Слоты - Svelte slots. Context Модуль - Svelte module context

В этом видео рассматриваем слоты в Svelte и работу с script c context="module". Смотреть на Rutube

11. API контекста - Svelte Context API

В этом видео рассматриваем возможности контекста Svelte, функции setContext, getContext и hasContext, а также применение CSS классов по условию. Смотреть на Rutube

12. Специальные элементы - Svelte Special elements

В этом видео рассматриваем специальные элементы в Svelte. Смотреть на Rutube Исходный код проекта