Скачать "Экосистема React: Компоненты, Библиотеки, Плагины"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Основы работы с терминалом. Создание файлов и директорий. Удаление, перемещение [Hexlet]Следующее видео: Node.js #4 Node.js и файловая система (Node.js & File System)

0:00

Введение

0:33

Lazy Load

1:39

Tooltip

2:25

Tabs

3:04

Drag & Drop

4:12

Rich Test Editors

6:02

Forms

7:10

Styles

9:01

Asynchrony

10:59

UI Component Libraries

12:05

Routing

12:50

Data Store

Node.js #4 Node.js и файловая система (Node.js & File System)

Node.js #4 Node.js и файловая система (Node.js & File System)

Канал: webDev

Основы работы с терминалом. Создание файлов и директорий. Удаление, перемещение [Hexlet]

Основы работы с терминалом. Создание файлов и директорий. Удаление, перемещение [Hexlet]

Канал: Хекслет

TypeScript. Полный курс

TypeScript. Полный курс

Канал: webDev

Don't use Hooks in REACT without knowing this...

Don't use Hooks in REACT without knowing this...

Канал: Sonny Sangha

КАК СДЕЛАТЬ ВОДУ В BLENDER 2.9+ / Симуляция Воды в 3D | ТУТОРИАЛ

КАК СДЕЛАТЬ ВОДУ В BLENDER 2.9+ / Симуляция Воды в 3D | ТУТОРИАЛ

Канал: Vosarken

HR позвонит #3 / Вопросы к собеседованию / front-end / it-incubator.eu

HR позвонит #3 / Вопросы к собеседованию / front-end / it-incubator.eu

Канал: IT-KAMASUTRA

CSS Flexbox. Полный курс

CSS Flexbox. Полный курс

Канал: webDev

Next.js #3 Макет и компоненты (Layout & Components)

Next.js #3 Макет и компоненты (Layout & Components)

Канал: webDev

Запоминание информации (часть 1)

Запоминание информации (часть 1)

Канал: loftblog

JavaScript Паттерны #16 - Strategy (Стратегия)

JavaScript Паттерны #16 - Strategy (Стратегия)

Канал: webDev

web

develop

front-end

frontend

веб

разработка

программирование

обучение

lesson

tutorial

лекция

урок

образование

react

reactjs

redux

redux-saga

redux-thunk

mobx

react-router

Semantic-UI-React

react-admin

react-bootstrap

react-virtualized

material-ui

react-resolver

react-refetch

styled-components

react-css-modules

aphrodite

classnames

redux-form

react-hook-form

formik

react-ace

react-quill

draft-js

react-draggable

react-dnd

react-beautiful-dnd

react-tabs

react-tooltip

react-lazyload

react-window

yauhenk

webdev

00:00:00

Всем привет Я Евгений Ковальчук и вы на

00:00:02

канале webd в этом видео Я бы хотел

00:00:05

поделиться с вами некоторыми интересными

00:00:07

библиотеками компонентами и плагинами из

00:00:10

экосистемы react которые решают реальные

00:00:14

задачи или проблемы на проекте имеют

00:00:16

хорошее коммьюнити регулярное обновление

00:00:19

и поддержку создавая данный список я

00:00:22

также руководствовался рейтингом на

00:00:24

github и личным опытом использования

00:00:27

большинство компонентов и библиотек

00:00:29

также имеют аналоги и поддержку для View

00:00:32

angular и SW первые компоненты нужны для

00:00:35

реализации Lazy loading или ленивой

00:00:38

загрузки здесь Я бы хотел выделить react

00:00:41

Window и react Lazy lot react Window

00:00:44

предназначен для рендеринга только тех

00:00:46

данных которые помещаются во viewport

00:00:49

это помогает решить две проблемы

00:00:51

во-первых ускоряется время загрузки и

00:00:54

отрисовки страницы а во-вторых из-за

00:00:57

того что не нужно прорисовывать большое

00:00:58

количество до

00:01:00

уменьшается объём памяти потребляемой на

00:01:03

данный процесс фичи которые идут из

00:01:05

коробки и которые будут полезны это

00:01:08

прилипающий элементы добавление

00:01:10

пользовательских событий на до загрузку

00:01:12

данных и поддержка абсолютного

00:01:15

позиционирования react Lazy lot та же

00:01:18

ленивая загрузка для решения тех же

00:01:20

задач ускорение рендеринга и оптимизация

00:01:23

потребляемой памяти из плюсов хотелось

00:01:26

бы выделить поддержку декораторов если

00:01:28

такой синтаксис выс те в проекте хорошая

00:01:31

совместимость с сервер сайт рендеринга и

00:01:34

подгрузка дополнительных данных сразу

00:01:36

либо реализация бесконечной прокрутки

00:01:39

следующий компонент - это react Tool Tip

00:01:41

Отличный вариант из-за простоты

00:01:43

настройки и отличной кастомизации

00:01:46

Поэтому если вам в проекте нужно быстро

00:01:48

реализовать всплывающие подсказки то

00:01:51

берите на заметку срабатывает через Data

00:01:53

атрибут и непосредственно всплывающий

00:01:55

компонент это не компонент обёртка

00:01:58

поэтому его можно вставить в любое место

00:02:00

разметки Однако Я бы хотел упомянуть о

00:02:03

нескольких нюансов которые Также можно

00:02:05

найти в аналогичных библиотеках это

00:02:08

добавление подсказки в модальное окна

00:02:10

так как и модальное окно и подсказка

00:02:12

идут сверху основного контента иногда

00:02:14

возникают проблемы с перекрытием и

00:02:17

проблема привязки подсказки к

00:02:19

динамическому контенту оба нюанса

00:02:21

решаемы но о них полезно знать в самом

00:02:24

начале если вам нужно реализовывать табы

00:02:27

то рекомендую react tabs как И

00:02:30

большинство аналогов он состоит из

00:02:40

подкомплексе и поддержкой клавиатурных

00:02:43

событий я не случайно упомянул стили так

00:02:46

как по умолчанию компонент их не

00:02:48

содержит и я считаю это большим плюсом

00:02:50

так как лучше создание с нуля чем

00:02:53

переопределение Кстати хорошим плюсом

00:02:55

является то что в качестве таба или

00:02:58

вкладки вы можете создать свой

00:03:00

пользовательский компонент для

00:03:01

подключения достаточно просто определить

00:03:04

ему роль следующий блок плагинов поможет

00:03:06

реализовать функциональность Drag and

00:03:08

Drop Здесь три компонента и по рейтингу

00:03:11

на github они идут в следующем порядке

00:03:13

react Beautiful dnd react dnd и react

00:03:17

draggable хотелось бы начать с

00:03:19

последнего так как он самый простой есть

00:03:21

корневой компонент Drag ему выставляются

00:03:24

определённые настройки после чего у вас

00:03:27

появляется поле внутри которого вы може

00:03:30

в произвольном порядке перетягивать

00:03:31

контент с одной стороны плюс это

00:03:34

произвольное место куда можно перетянуть

00:03:36

объект Но это также является и минусом

00:03:38

так как изменение размеров экрана

00:03:41

превращают в блоки нечитаемо мишанину

00:03:43

react Drag также не подойдёт если вам

00:03:46

нужно выравнивание Что же касается react

00:03:49

Beautiful dnd и react dnd они очень

00:03:52

похожи для большинства типовых задач

00:03:54

вполне подойдет rect dnd он проще и

00:03:57

легче в два раза но на прое

00:04:00

мы столкнулись с проблемой перетягивания

00:04:02

элементов в многоуровневые списки

00:04:05

поэтому пришлось затягивать react

00:04:07

Beautiful dnd так как по количеству

00:04:09

тонких настроек это Явный Лидер

00:04:12

двигаемся дальше И теперь поговорим о

00:04:14

react Text Editor или звик редакторах по

00:04:18

сути это компоненты которые добавляют

00:04:20

поле для ввода данных с возможностью

00:04:23

графического редактирования вводимой

00:04:25

информации то есть выделение шрифтом

00:04:27

цветом размерами создание списков формул

00:04:30

и так далее очень часто такие компоненты

00:04:32

можно встретить в админка здесь я опять

00:04:35

же могу выделить три основных называются

00:04:37

они Draft JS react quill и react Ace

00:04:41

Draft JS - Это самый популярный так как

00:04:43

разработан Facebook и это уже о чём-то

00:04:46

говорит по крайней мере можно

00:04:48

рассчитывать на регулярную поддержку и

00:04:50

исправление багов но есть нюанс мне

00:04:53

приходилось работать с ним на проектах

00:04:55

да Он поддерживает отличную

00:04:57

функциональность из коробки также

00:04:59

неплохо на настраивается Однако если

00:05:01

нужно расширять его функциональность

00:05:03

дополнительными фичами либо добавлять

00:05:06

поддержку кастомных клавиатурных событий

00:05:08

то в

00:05:09

конфигурирования надолго там

00:05:11

действительно всё непросто и супер

00:05:14

неочевидно в результате на нашем проекте

00:05:16

мы просто мигрировали на react quill два

00:05:18

этих редактора прекрасно совместимы

00:05:21

хранят данные практически в одних

00:05:23

форматах и никаких проблем с миграцией

00:05:25

не возникло react quill - это не

00:05:28

полноценный редактор обёртка из react

00:05:30

компонента над библиотекой quil JS

00:05:33

объективно говоря функциональность у

00:05:35

него однозначно больше чем у Draft JS он

00:05:38

очень просто расширяется и поддерживает

00:05:41

намного больше фич из коробки Что же

00:05:44

касается react Ace Это третья по

00:05:46

рейтингу звёзд альтернатива Однако она

00:05:48

больше предназначена для написания кода

00:05:51

в браузере чем для добавления

00:05:53

редактируемом текста с помощью

00:05:55

компонента вы сможете создать свою

00:05:57

песочницу с возможностью настройки и

00:06:00

поддержки нескольких вариантов языков Ну

00:06:03

и конечно куда же без форм в современном

00:06:05

вебе Здесь также есть три крутых

00:06:07

компонента это формик react hook form и

00:06:11

кфо в целом все три решают практически

00:06:13

одинаковый Спектр задач Основная - это

00:06:16

снятие ответственности с обычных реакт

00:06:19

компонентов за контроль вводимых

00:06:21

пользователем данных дополнительное это

00:06:23

синхронная и асинхронная валидация с

00:06:26

возможностью визуального выделения

00:06:28

элементов при как на всей форме в целом

00:06:31

так и на отдельных элементах простота

00:06:33

подключения и настройки кастомизация и

00:06:36

расширение событий разница практически

00:06:39

минимальна формик работает с хука и с

00:06:42

классами react hook form быстро набрал

00:06:45

популярность за счёт поддержки react и

00:06:47

react native оба компонента хранят

00:06:49

данные в компоненте родители по

00:06:52

умолчанию redx форм - это наверное самый

00:06:55

старый из всех особенность в том что

00:06:57

свои данные форма хранит сразу в redax

00:07:00

сторе и не нужно считать что redax

00:07:02

умирает на действительно больших

00:07:04

проектах Нет лучше места для хранения

00:07:07

глобальных данных приложения чем redact

00:07:09

Store следующий блок - это работа со

00:07:11

стилями для начала плагин classnames

00:07:14

супер минималистичный супер полезный и

00:07:17

незаменимый плагин для любого react

00:07:19

проекта кстати ни разу не встречал

00:07:21

приложение чтобы он там не использовался

00:07:24

его задача очень простая Это работа с

00:07:26

классами а именно способность

00:07:28

динамически генерировать набор классов

00:07:30

для элемента на основании каких-то

00:07:32

данных по сути всё что нужно чтобы

00:07:34

определённый класс добавился на элемент

00:07:37

- это создать его и описать условия

00:07:39

использования следующие три плагина

00:07:42

определяет синтаксис написания стилей в

00:07:44

вашем проекте если вам нравится модный

00:07:46

вариант CSS injs то рекомендую

00:07:49

присмотреться к afrodit он не зависит ни

00:07:51

от каких фреймворков поддерживает работу

00:07:54

Север Site rendering и автоматически

00:07:56

генерирует браузерные префиксы если

00:07:59

предпочитаете модульный CSS то react CSS

00:08:02

modules вам в помощь Кстати этот плагин

00:08:05

интегрирован в Create react App Так что

00:08:08

модули там поддерживаются из коробки для

00:08:10

тех кто не знает модульный CSS - это

00:08:13

стили чисто для компонентов вместо

00:08:15

стандартного подключения файла стилей вы

00:08:18

используете импорт модуля преимущество -

00:08:21

это то что не нужно выдумывать

00:08:22

уникальные имена для классов разные

00:08:25

компоненты могут использовать одно и то

00:08:27

же имя стили ин капсули в модуле минусы

00:08:31

- это шаринг общих стилей и последний

00:08:33

плагин нужен если вам нравится вариант

00:08:36

создания styled components собственно

00:08:38

плагин так и называется плюс данного

00:08:40

подхода - это простота чтобы добавить

00:08:42

стили достаточно применить атрибут

00:08:44

styled файл компонента будет содержать

00:08:47

все необходимые данные Но это же и минус

00:08:50

так как из-за описания стилей компонент

00:08:52

разрастается также есть определённые

00:08:55

особенности с динамическими и общими

00:08:58

стилями но это всё решается спецификой

00:09:00

подхода следующий раздел - Это работа с

00:09:03

асинхронными данными а именно запросы и

00:09:06

обработка ответов и здесь у нас сразу

00:09:08

четыре плагина это react reage react

00:09:11

resolver redax thun и redax sag

00:09:14

объективности ради стоит отметить что

00:09:17

два последних больше относятся к redx но

00:09:19

и тем не менее это всё равно экосистема

00:09:22

react основная задача плагинов

00:09:24

осуществление асинхронного запроса его

00:09:27

обработка и передача В компа

00:09:30

Rea подключается с помощью Connect после

00:09:33

чего методы предназначенные для запроса

00:09:36

доступны в компоненте в виде пропсов и в

00:09:38

случае необходимости мы можем их вызвать

00:09:41

тем самым запросить данные сами же

00:09:43

данные будут приходить в компонент на

00:09:45

прямую плагин работает с фенгом данных

00:09:47

поддерживает Lazy Load а также позволяет

00:09:50

создавать цепочки запросов react

00:09:52

resolver очень похож на предыдущий но с

00:09:55

элегантным решением в пользу декоратора

00:09:57

перед объявлением компонента

00:09:59

вы определяете декоратор где указываете

00:10:02

функцию запроса и получаемые данные

00:10:05

после чего эти данные будут доступны в

00:10:07

компоненте в виде пропсов оба описанных

00:10:09

плагина подходят для небольших проектов

00:10:13

Что же касается к TH и редак Сага - это

00:10:16

уже серьёзные инструменты для работы с

00:10:18

асинхронными данными в обоих случаях

00:10:21

запросы отправляются при диспатч экшенов

00:10:24

обрабатываются и устанавливаются врек

00:10:26

Store у каждого из плагинов просто

00:10:29

просто огромная куча функциональности

00:10:31

для работы с асинхронным кодом поэтому

00:10:34

проще полазить по официальной

00:10:35

документации так как рассказывать в

00:10:37

таком видео обо всех особенностях это

00:10:40

просто бесполезно Однако если вы хотите

00:10:43

поработать с одним из двух плагинов то

00:10:45

рекомендую начать с rct Sun так как

00:10:48

порог вхождения в него объективно ниже

00:10:51

Но если тема генераторов вас не страшит

00:10:53

и хочется разобраться с их

00:10:55

функциональностью то можете смело

00:10:57

изучать RX Сага конечно в такой подборке

00:11:00

Нельзя обойти стороной и библиотеки

00:11:02

компонентов ранее Я показывал вам

00:11:04

отдельные компоненты такие как tooltip и

00:11:06

Tab библиотек с такими отдельными

00:11:09

компонентами очень много это и календари

00:11:12

и сайдбаре и модальные окна и ещё много

00:11:14

всего по отдельности такие компоненты

00:11:17

служат для решения конкретной задачи Но

00:11:20

если речь идёт о создании приложения с

00:11:22

нуля с общей консистентность дизайна

00:11:24

Всех элементов и сроки поджимает либо

00:11:27

Для клиента Нужно ре вать базовую

00:11:30

концепцию работы приложения показать

00:11:32

результат и сделать Всё нужно очень

00:11:34

быстро то вполне можно использовать

00:11:36

библиотеки компонентов по сути это

00:11:39

большие наборы UI элементов с заложенной

00:11:42

базовой функциональностью Я выбрал пять

00:11:44

самых популярных и отсортирован их по

00:11:46

количеству звёзд на github это material

00:11:49

UI react virtualized react bootstrap

00:11:53

react Admin semantic UI react всё что

00:11:56

вам нужно - это открыть каждую проверить

00:11:59

наличие нужных компонентов выбрать

00:12:01

понравившийся вам стиль и можно

00:12:03

приступать к разработке и заключительные

00:12:06

блоки - это роутинг и State Management

00:12:09

или хранение данных приложения

00:12:10

маловероятно что вы не знаете об этих

00:12:13

библиотеках но и тем не менее react

00:12:15

router - это пакет для создания роутинг

00:12:18

на вашем веб-приложений если просто то

00:12:21

так как мы используем react то наше

00:12:22

приложение представляет из себя SPA или

00:12:25

Single page Application поэтому любые

00:12:28

передвижения должны идти без

00:12:30

перезагрузки в то время как само

00:12:32

приложение должно хранить данные об

00:12:34

истории передвижения иметь доступ в

00:12:36

адресную строку и манипулировать её

00:12:39

параметрами и react router решает все

00:12:41

эти задачи я хотел вам рассказать и об

00:12:44

аналоге который называется redx router

00:12:46

но к сожалению его поддержка

00:12:48

прекратилась 5 лет назад Что же касается

00:12:51

глобального хранения данных приложений

00:12:54

то тут можно использовать redx или mobx

00:12:57

это два самых популярных менеджера

00:13:00

совершенно противоположными философия

00:13:02

redx топит за неизменяемость и хранение

00:13:05

всего в одном месте mobx за

00:13:12

мутирует нравится именно вам и

00:13:14

Используйте его в приложении и в целом

00:13:17

это весь список которым я планировал

00:13:19

поделиться Конечно же это далеко не вся

00:13:21

экосистема но в одном выпуске обо всём

00:13:24

не расскажешь Поэтому если вам

00:13:26

понравилась данная подборка и вы хотели

00:13:28

бы увидеть продолжение то Ставьте лайк

00:13:31

как только видео соберёт 400 лайков Я

00:13:34

выпускаю продолжение и создаю

00:13:36

репозиторий где можно будет найти все

00:13:38

описанные плагины библиотеки и

00:13:41

компоненты и Поверьте мне есть что вам

00:13:43

рассказать а пока что не забывайте

00:13:46

подписаться на канал и нажать

00:13:48

колокольчик чтобы быть в курсе выхода

00:13:50

новых видео увидимся в следующем выпуске

00:13:53

пока

00:13:54

[музыка]

Описание:

Всем привет. В этом видео я бы хотел поделиться с вами некоторыми интересными библиотеками, компонентами и плагинами из экосистемы React. Которые решают реальные задачи, или проблемы на проекте. Имеют хорошее комьюнити, регулярные обновления и поддержку. Создавая данный список я так же руководствовался рейтингом на GitHub и личным опытом использования. ✒ Timeline: ✔ 0:00 - Введение ✔ 0:33 - Lazy Load ✔ 1:39 - Tooltip ✔ 2:25 - Tabs ✔ 3:04 - Drag & Drop ✔ 4:12 - Rich Test Editors ✔ 6:02 - Forms ✔ 7:10 - Styles ✔ 9:01 - Asynchrony ✔ 10:59 - UI Component Libraries ✔ 12:05 - Routing ✔ 12:50 - Data Store ✒ Полезные ссылки: ✔ react-window: https://github.com/bvaughn/react-window ✔ react-lazyload: https://github.com/twobin/react-lazyload ✔ react-tooltip: https://github.com/ReactTooltip/react-tooltip ✔ react-tabs: https://github.com/reactjs/react-tabs ✔ react-beautiful-dnd: https://github.com/atlassian/react-beautiful-dnd ✔ react-dnd: https://github.com/react-dnd/react-dnd ✔ react-draggable: https://github.com/react-grid-layout/react-draggable ✔ draft-js: https://github.com/facebookarchive/draft-js ✔ react-quill: https://github.com/zenoamaro/react-quill ✔ react-ace: https://github.com/securingsincity/react-ace ✔ formik: https://github.com/jaredpalmer/formik ✔ react-hook-form: https://github.com/react-hook-form/react-hook-form ✔ redux-form: https://github.com/redux-form/redux-form ✔ classnames: https://github.com/JedWatson/classnames ✔ aphrodite: https://github.com/Khan/aphrodite ✔ react-css-modules: https://github.com/gajus/react-css-modules ✔ styled-components: https://github.com/styled-components/styled-components ✔ react-refetch: https://github.com/heroku/react-refetch ✔ react-resolver: https://github.com/ericclemmons/react-resolver ✔ redux-thunk: https://github.com/reduxjs/redux-thunk ✔ redux-saga: https://github.com/redux-saga/redux-saga/ ✔ material-ui: https://github.com/mui/material-ui ✔ react-virtualized: https://github.com/bvaughn/react-virtualized ✔ react-bootstrap: https://github.com/react-bootstrap/react-bootstrap ✔ react-admin: https://github.com/marmelab/react-admin ✔ Semantic-UI-React: https://github.com/Semantic-Org/Semantic-UI-React ✔ react-router: https://github.com/remix-run/react-router ✔ redux: https://github.com/reduxjs/redux ✔ mobx: https://github.com/mobxjs/mobx/tree/main/packages/mobx-react ✒ Полный список готовых и планируемых курсов: ✔ Trello: https://trello.com/b/R6rD7qq8 ✒ Автор курса: ✔ YouTube: https://www.youtube.com/YauhenKavalchuk ✔ Instagram: https://www.facebook.com/unsupportedbrowser ✔ Twitter: https://twitter.com/YauhenKavalchuk ✔ VK: https://vk.com/YauhenKavalchuk ✔ LinkedIn: https://www.linkedin.com/in/YauhenKavalchuk ✔ GitHub: https://github.com/YauhenKavalchuk ✔ VK (Группа): http://vk.com/webdevcom ✒ Поддержать развитие канала: https://github.com/YauhenKavalchuk/youtube/blob/main/sponsoring.md

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Экосистема React: Компоненты, Библиотеки, Плагины"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Экосистема React: Компоненты, Библиотеки, Плагины" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Экосистема React: Компоненты, Библиотеки, Плагины"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Экосистема React: Компоненты, Библиотеки, Плагины" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Экосистема React: Компоненты, Библиотеки, Плагины"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Экосистема React: Компоненты, Библиотеки, Плагины"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.