Изучение и понимание React - практическое руководство.

Здесь представлены темы, которые будут рассмотрены далее, и обсуждается мотивация этого курса.

На сегодняшний день существует бесчисленное количество UI-фреймворков для JavaScript - почему же именно должен быть выбран React? Помимо неоспоримой популярности этой библиотеки, существуют и более глубокие причины, которые говорят в пользу React.

Мы настраиваем среду разработки в этом уроке и мгновенно создаем наше первое приложение React с помощью npm create vite.

После того, как мы создали "свежее" React-приложение на последнем уроке, здесь мы собираемся понять структуру этого приложения и объяснить, как React может быть встроен в веб-страницу.

Небольшое напоминание на тему var vs. let/const.

Деструктуризация позволяет извлекать элементы из объектов и массивов. При более внимательном рассмотрении возникает много способов применения, делающих код JS более элегантным и компактным.

Функции являются основными в JS и до сих пор объявлялись и определялись только с помощью ключевого слова function. ES6 вводит изящный и краткий способ написания, который делает код более читаемым и предлагает решение для проблемы с this.

В NodeJs модули использовались с самого начала, однако изначально они использовали только формат модулей CommonJs с require. С появлением ES6 появилось стандартное определение модулей и новые ключевые слова import/export. В настоящее время этот формат поддерживается практически всеми (новыми) библиотеками JS, и NodeJs также поддерживает его в последних версиях.

С помощью JSX вы описываете интерфейс пользователя компонента и встраиваете в него JS-выражения. Файл проекта к видео содержит готовый код для этого раздела учебника.

Собственные компоненты React можно легко написать с помощью функций, возвращающих JSX.

Этот урок объясняет, как данные и выражения JavaScript могут быть интегрированы в JSX.

Без состояния, которое может измениться, трудно создать осмысленное приложение. В React для этого обычно используется хук useState. Этот урок представляет этот хук и объясняет его использование.

Props служат для передачи данных дочерним компонентам. Здесь объясняется, как именно это происходит и на что следует обратить внимание.

Когда атрибуты изменяются динамически, вызывается соответствующая функция рендеринга компонента.

Здесь будет объяснено, как будет устроено приложение для списка задач. Видео идет с проектным файлом, содержащим готовый код для этого раздела учебника.

Когда дочерний компонент хочет сообщить что-то родительскому компоненту, это происходит через коллбэк-проп.

Список задач должен быть выполнен как-нибудь когда-нибудь. Здесь мы обсудим, как это работает в коде.

Внешний вид пользовательского интерфейса, безусловно, важен. Поэтому здесь я объясню, как это работает с помощью библиотеки Emotion и как использовать Prop className. Кроме того, будет рассмотрен атрибут style-, с помощью которого можно стилизовать каждый элемент отдельно в деталях.

Через фильтрацию массива задач можно разделить задачи на две группы.

Конечно, также нужно уметь удалять задачи. Здесь объясняется, как это работает с помощью фильтрации массива.

До сих пор мы всегда оборачивали компоненты в DIV-элементы. В определенных случаях это можно также опустить.

Теперь становится интересно: задачи можно довольно легко сохранить в постоянной памяти браузера и, конечно же, загрузить их обратно, чтобы они "пережили" перезагрузку страницы.

С помощью useEffect можно интегрировать побочные эффекты. Монтирование компонента также можно обрабатывать с помощью этой функции.

Краткое описание нашего приложения и последние улучшения.

Приложение видеоплеера создается с помощью create vite и объясняется, как должно быть построено приложение. Проектный файл, прикрепленный к видео, содержит готовый код для видеоплеера.

С помощью атрибута ref можно ссылаться на элементы DOM и получать к ним доступ с помощью useRef. Здесь мы делаем это с элементом видео.

Мы создаем собственного видеоплеера, который уже имеет кнопки Play, Pause и Stop.

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

Управляйте собственными элементами управления элементом видео также, что приводит к тому, что наш статус не адаптируется соответственно к кнопке Воспроизведения/Паузы. Мы решаем это с помощью обработчиков событий на элементе видео.

Мы также можем изменить громкость с помощью собственного датчика.

Переход к любой позиции в видеоролике (Seek) можно легко осуществить, установив свойство currentTime.

Длина видео будет известна только после загрузки метаданных видео, поэтому мы должны подождать правильное событие.

Плейлист реализуется с помощью списка, который можно реализовать с помощью HTML-элемента select.

Мы используем useEffect здесь, чтобы реагировать на изменение props src- и сбрасывать состояние видеоплеера.

Плейлист преобразуется из фиксированных записей в массив.

Теперь перейдем к обработке списка видео: мы добавим добавление видео-записей.

То, что вы добавляете, должно быть возможно удалить. Мы делаем это аналогично приложению для списка дел с помощью фильтрации.

Плейлист не должен служить только как список «закладок», но и автоматически воспроизводить видео одно за другим. Это будет реализовано в этом уроке.

Для нетерпеливых: кнопки для следующего и предыдущего видео.

Особая обработка для первого и последнего видео реализуется: кнопки Далее и Назад должны быть соответственно деактивированы.

Теперь мы сохраняем и загружаем наш плейлист. Это происходит аналогично приложению для списка дел в локальном хранилище браузера.

Видео, которые используются в качестве примера в приложении Видеоплеера, можно посмотреть в оригинале здесь (все лицензии CC-Attribution, см. соответствующие веб-сайты):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

На примере хука useJsonFetch здесь объясняется, как можно писать собственные функции-хуки.

Изменение состояния с помощью сеттера useState может быть хитрым. Но с useImmer это уже не проблема.

UI будет строиться быстрее и быстрее реагировать на ввод пользователя, если избегать ненужных вызовов функций рендеринга. С помощью memo можно предотвратить перерисовку компонентов, если их свойства не изменились.

С помощью useCallback можно предотвратить ненужное перерисовывание дочерних компонентов, когда используются коллбэк-пропсы.

Расчеты внутри функций рендеринга должны выполняться только при необходимости. С помощью useMemo результаты этих расчетов могут кэшироваться с учетом зависимостей.

Здесь я подытожу результаты курса и дам рекомендации, что участники должны посмотреть после курса.