Научете и разберете React - практическо ръководство

Тук се представят темите, които ще бъдат разгледани по-нататък, и се разглежда мотивацията зад този курс.

Вече има безброй UI-Frameworks за 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.

Без състояние, което може да се промени, е трудно да се реализира смислена App. В React за тази цел обикновено се използва useState. Този урок представя този кука и обяснява как се използва.

Props се използват за предаване на данни на децата компоненти. Тук се обяснява как точно това се случва и на какво трябва да обърнете внимание.

Когато пропс-ите се променят динамично, съответната рендер функция на компонента се извиква отново.

Когато детската компонента иска да информира родителската компонента, това става чрез callback проп.

Списъците с задачи трябва някой ден да бъдат завършени. Тук обсъждаме как това работи в кода.

Изгледът на потребителския интерфейс е безспорно важен. Затова тук обяснявам как това работи чрез библиотеката Emotion и как да използвате Prop className. Освен това се обяснява и атрибутът style-, с който може да се оформи всяка част отделно.

Чрез филтриране на масива със задачи, задачите могат да бъдат разделени на две групи.

Разбира се, трябва да можете да изтривате и To-do задачи. Тук се обяснява как да се постигне това чрез филтриране на масива.

Досега винаги сме опаковали компонентите в DIV елементи. В някои случаи обаче това може да се избегне.

Сега става интересно: To-do списъците могат лесно да бъдат запазени постоянно в браузърната памет и разбира се, да бъдат заредени отново, така че да "преживеят" презареждането на страницата.

С помощта на useEffect могат да се интегрират странични ефекти. Монтирането на компонент също може да се обработи с тази функция.

Кратко резюме на нашето приложение за задачи и последни подобрения.

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

С атрибута ref можем да се позовем на елементи на DOM и да имаме достъп до тях чрез useRef. Тук го правим с видео елемента.

Създаваме истински видео плейър, който вече има бутони за Пускане, Пауза и Спиране.

Тъй като никога не се налага да използваме Play и Pause едновременно, комбинираме ги в един бутон.

Собствените контроли на елемента за видео управляват също и видеото, което обаче води до това, че нашият статус на бутона Започване/Пауза не се актуализира правилно. Това проблем решаваме чрез обработчици на събития при елемента за видео.

Силата на звука също можем да променяме, използвайки собствен регулатор.

Преминаването до произволна позиция във видеото (смяна) може лесно да се постигне чрез задаване на свойството currentTime.

Дължината на видеото се определя след зареждането на видео метаданните, затова трябва да изчакаме правилното събитие.

Плейлистата се изпълнява чрез списък, който може да се реализира с HTML елемента select.

Сега идва обработката на списъка с видеа: Добавяме добавянето на видео записи.

Трябва да можем да изтрием това, което добавяме. Това го правим по сходен начин като To-do-приложението чрез филтриране.

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

За нетърпеливите: Бутони за следващото и предишното видео.

Специално обработка ще бъде реализирана за първото и последното видео: бутоните Следващо и Предишно трябва да бъдат деактивирани съответно.

Сега ще запазим и ще заредим нашата плейлиста. Това става аналогично на приложението за задачи в локалното хранилище на браузъра.

Видеата, използвани като пример в приложението за видео плейър, можете да видите тук в оригинал (всички лицензи CC Attribution, вижте съответните уебсайтове):

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

По примера на useJsonFetch-Хукс се обяснява как да се пишат собствени хук функции.

Промяната на състоянието с setter на useState може да бъде трудна. Но с useImmer вече не е проблем.

Потребителският интерфейс се изгражда по-бързо и реагира по-бързо на входовете на потребителите, когато няма ненужни извиквания на функциите за рендериране. С memo може да се предотврати рендерирането на компонентите, когато техните пропс не се променят.

С useCallback може да се предотврати ненужното рендиране на детски компоненти, когато се използват Callback-Props.

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

Тук обобщавам резултатите от курса и давам насоки за това, което участниците следва да разгледат след курса.