Вивчайте та розумійте React - практичний посібник.

Тут будуть представлені теми, які будуть розглядатися далі, і буде звернуто увагу на мотивацію за цим курсом.

Наразі існує безліч фреймворків користувацького інтерфейсу для JavaScript - чому саме React? Окрім безсумнівної популярності цієї бібліотеки, є декілька більш глибоких причин, які говорять за React.

У цьому уроці ми налаштуємо середу розробки і швидко створимо наш додаток React за допомогою npm create vite.

Після того, як ми створили «свіжий» додаток React у минулому уроці, тут маємо зрозуміти структуру цього додатка та пояснити, як можна вбудувати React на веб-сторінцю.

Невеликий оновлення на тему var проти let/const.

Деструктуризація дозволяє витягти елементи з об'єктів та масивів. При докладному розгляді виявляються багато можливостей використання, які роблять JS-код більш елегантним і компактним.

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

У NodeJs модулі використовувались з самого початку, проте спочатку воно використовувало виключно формат модулів CommonJs з require. З появою ES6 з'явилася стандартна ​​визначення модулів та нові ключові слова import/export. Нині цей формат підтримується майже всіма (новими) бібліотеками JS, і NodeJs також може працювати з ним в останніх версіях.

За допомогою JSX ви описуєте інтерфейс користувацького інтерфейсу компонента і вбудовуєте в нього вирази JS. Файл проекту для відео містить готовий код для цього розділу посібника.

Власні компоненти React можна легко писати за допомогою функцій, які повертають JSX.

Цей урок пояснює, як дані та вирази JavaScript можуть бути інтегровані в JSX.

Без стану, що може змінюватися, практично неможливо реалізувати цікавий додаток. У React для цього зазвичай використовується useState. Цей урок представляє цей хук і пояснює його використання.

Props використовуються для передачі даних дочірнім компонентам. Тут пояснено, як саме це відбувається і на що потрібно звернути увагу.

Якщо props змінюються динамічно, відповідна функція рендерингу компонента буде викликана знову.

Якщо дочірня компонента хоче щось повідомити батьківській компоненті, вона використовує власність Callback-Prop.

Список справ повинен бути коли-небудь виконаний. Тут ми обговорюємо, як це працює в коді.

Зовнішній вигляд інтерфейсу (UI) - безумовно важливий. Тому я поясню, як це працює за допомогою бібліотеки Emotion та як використовувати властивість className. Крім того, розглянуто атрибут style-, за допомогою якого можна застосовувати стилі до кожного елементу окремо.

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

Звичайно, також потрібно мати можливість видаляти список справ. Тут пояснюється, як це працює за допомогою фільтрації масиву.

Досі ми завжди обгортали компоненти в DIV-контейнери. У певних випадках це можна також заощадити.

Зараз стає цікаво: Списки справ можна досить легко зберегти у постійній пам'яті браузера і, звичайно ж, завантажити їх знову, щоб вони "виживали" під час перезавантаження сторінки.

За допомогою useEffect можна інтегрувати побічні ефекти. Встановлення компоненти також можна обробити цією функцією.

Коротке підсумок нашого додатку для списків справ та останні вдосконалення.

Додаток відеопрогравача створюється за допомогою create vite та пояснюється, як повинен бути побудований додаток. Файл проекту, що додається до відео, містить готовий код для відеопрогравача.

За допомогою атрибута ref можна посилатися на елементи DOM і отримувати доступ до них за допомогою useRef. Тут ми робимо це з елементом відео.

Ми створюємо справжній відеопрогравач, в якому вже є кнопки для відтворення, паузи та зупинки.

Оскільки кнопки "Відтворити" та "Пауза" ніколи не потрібно використовувати одночасно, ми поєднуємо їх у одну кнопку.

Власні контроли елемента відео також керують відео, що призводить до того, що наш статус на кнопці Play/Pause не відповідно налаштовується. Ми виправляємо це за допомогою обробників подій на елементі відео.

Ми також можемо змінити гучність за допомогою власного регулятора.

Перехід до будь-якої позиції у відео (пошук) дуже легко виконується за допомогою встановлення властивості currentTime.

Довжина відео стає відомою лише після завантаження метаданих відео, тому ми повинні зачекати на відповідну подію.

Плейлист реалізується за допомогою списку, який може бути реалізований за допомогою HTML-елементу select.

Тепер настала черга обробки списку відео: ми додаємо додавання записів відео.

Те, що додаєш, повинно також бути можливо видалити. Ми робимо це подібно до програми для зазначення завдань шляхом фільтрації.

Плейлист повинен бути не лише списком «закладок», але й автоматично відтворювати відео один за одним. Це буде реалізовано у цьому уроці.

Для непацієнтів: кнопки для наступного і попереднього відео.

Спеціальна обробка для першого та останнього відео реалізована: кнопки <Next> та <Previous> повинні бути відключені відповідно.

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

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

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

На прикладі хуків useJsonFetch- тут пояснено, як можна писати власні функції хуків.

Зміна стану за допомогою сеттера useState може бути хитроманія. Але з useImmer це вже не проблема.

Користувальницький інтерфейс буде швидше збудований та реагуватиме швидше на введення користувача, якщо не відбуваються зайві виклики функцій рендерингу. За допомогою memo можна уникнути рендерингу компонентів, якщо їх пропси не змінюються.

За допомогою useCallback можна уникнути зайвого відтворення дочірніх компонентів, коли використовуються Callback-Props.

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

Я узагальнюю тут результати курсу та надаю вказівки, що учасники повинні подивитися після закінчення курсу.