Nauka i zrozumienie React - praktyczny samouczek.

Tutaj zostaną przedstawione tematy, które będą omawiane dalej, a także zostanie omówiona motywacja leżąca u podstaw tego kursu.

Istnieje wiele frameworków UI dla JavaScript - dlaczego więc powinno to być akurat React? Oprócz niekwestionowanej popularności tej biblioteki istnieją także kilka bardziej zasadniczych powodów, które przemawiają za React.

W tej lekcji ustawiamy środowisko programistyczne i błyskawicznie tworzymy naszą pierwszą aplikację React za pomocą npm create vite.

Po tym jak w ostatniej lekcji utworzyliśmy „świeżą” aplikację React, teraz chcemy zrozumieć strukturę tej aplikacji i wyjaśnić, w jaki sposób React może być osadzony w witrynie internetowej.

Trochę odświeżenia na temat var vs. let/const.

Destructuring pozwala na precyzyjne wydobycie elementów z obiektów i tablic. Po dokładnym przyjrzeniu się pojawiają się liczne możliwości zastosowania, które sprawiają, że kod JS staje się bardziej elegancki i zwięzły.

Funkcje są istotne w JS i zostały dotychczas deklarowane i zdefiniowane tylko za pomocą słowa kluczowego function. ES6 wprowadza elegancką i zwięzłą składnię, która sprawia, że kod staje się bardziej czytelny i oferuje rozwiązanie dla uciążliwego problemu z this.

W NodeJs moduły były używane od samego początku, ale na początku opierały się wyłącznie na formacie modułowym CommonJs z użyciem require. Od ES6 istnieje definicja modułu w standardzie oraz nowe słowa kluczowe import/export. Obecnie ten format jest obsługiwany przez prawie wszystkie (nowe) biblioteki JS, a także najnowsze wersje NodeJs mają z tym do czynienia.

Z JSX opisujesz interfejs użytkownika komponentu i integrujesz wyrażenia JS w nim. Plik projektu do wideo zawiera gotowy kod do tego fragmentu samouczka.

Własne komponenty React można łatwo pisać przy użyciu funkcji zwracających JSX.

Ten lekcja wyjaśnia, jak dane i wyrażenia JavaScript można zintegrować w JSX.

Bez zmiany stanu trudno jest zaimplementować sensowną aplikację. W React zwykle używa się do tego hooka useState. Ta lekcja przedstawia ten hook i wyjaśnia jego użycie.

Props służą do przekazywania danych do komponentów potomnych. Tutaj wyjaśnione jest, jak dokładnie to się odbywa i na co trzeba zwrócić uwagę.

Jeśli właściwości (props) zmieniają się dynamicznie, funkcja renderująca komponentu zostanie wywołana ponownie.

Jeśli komponent potomny chce poinformować komponent nadrzędny o czymś, odbywa się to za pomocą propa typu wywołania zwrotnego (callback).

Sprawności powinny być kiedyś również wykonane. Tutaj omówimy, jak to działa w kodzie.

Wygląd UI jest niewątpliwie ważny. Dlatego wyjaśniam tutaj, jak to działa za pomocą biblioteki Emotion i jak można używać atrybutu className. Ponadto omówione zostanie również atrybut style-, za pomocą którego można oddzielnie stylować każdy element.

Przez filtrowanie tablicy zadań można podzielić zadania na dwie grupy.

Oczywiście trzeba być w stanie usuwać elementy listy zadań do wykonania. Tutaj wyjaśnione jest, jak to działa poprzez filtrowanie tablicy.

Dotychczas zawsze "owijaliśmy" komponenty w DIVy. W niektórych przypadkach jednak można to również oszczędzić.

Teraz robi się interesująco: zadania do zrobienia można dość łatwo przechowywać trwale w pamięci przeglądarki i oczywiście także ponownie wczytywać, dzięki czemu przetrwają przeładowanie strony.

Za pomocą hooka useEffect można integrować efekty uboczne. Montowanie komponentu można również obsłużyć za pomocą tej funkcji.

Krótkie podsumowanie naszej aplikacji do zarządzania zadaniami i ostatnie ulepszenia.

Aplikacja odtwarzacza wideo jest tworzona za pomocą create vite i objaśnione jest, jak aplikacja powinna być zbudowana. Dołączony do wideo plik projektu zawiera gotowy kod odtwarzacza wideo.

Z atrybutem ref można odnosić się do elementów DOM i uzyskiwać do nich dostęp za pomocą useRef. Tutaj robimy to z elementem wideo.

Tworzymy rzeczywisty odtwarzacz wideo, który już ma przyciski do odtwarzania, pauzy i zatrzymania.

Ponieważ nigdy nie potrzebujemy jednocześnie odtwarzania i pauzy, łączymy te dwie funkcje w jednym przycisku.

Sterowanie własnymi kontrolami elementu wideo również kontroluje wideo, co jednak powoduje, że nasz status nie jest odpowiednio dostosowany przy przycisku Odtwarzaj/Pauza. Naprawiamy to za pomocą obsługiwaczy zdarzeń na elemencie wideo.

Głośność możemy również zmieniać za pomocą własnego regulatora.

Skakanie do dowolnej pozycji w wideo (Search) można łatwo osiągnąć poprzez ustawienie właściwości currentTime.

Długość filmu zostanie określona dopiero po załadowaniu metadanych wideo, dlatego musimy poczekać na odpowiednie wydarzenie.

Playlista jest realizowana poprzez listę, którą można zaimplementować za pomocą elementu HTML select.

Teraz wchodzi w grę edycja listy wideo: dodajemy dodawanie wpisów wideo.

To, co dodasz, musisz być w stanie usunąć. Robimy to w podobny sposób do aplikacji do zarządzania listą zadań poprzez filtrowanie.

Playlista ma nie tylko służyć jako lista zakładek, ale także automatycznie odtwarzać filmy jeden po drugim. To zostanie zrealizowane w tej lekcji.

Dla niecierpliwych: przyciski do następnego i poprzedniego filmu.

Specjalne traktowanie dla pierwszego i ostatniego filmu zostanie zrealizowane: przyciski Następny i Poprzedni powinny być odpowiednio dezaktywowane.

Teraz zapisujemy i wczytujemy naszą listę odtwarzania. Dzieje się to analogicznie do aplikacji To-do w lokalnym magazynie przeglądarki.

Filmy, które są używane jako przykłady w aplikacji odtwarzania wideo, można zobaczyć tutaj w oryginale (wszystkie z licencją CC-Attribution, patrz odpowiednie strony internetowe):

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

Na przykładzie haka useJsonFetch- jest tutaj wyjaśnione, jak można pisać własne funkcje haka.

Zmiana stanu za pomocą settera useState może być podstępna. Ale z useImmer nie ma już tego problemu.

Interfejs użytkownika będzie szybciej budowany i reagować szybciej na interakcje użytkownika, jeśli nie będą wykonywane zbędne wywołania funkcji renderowania. Za pomocą memo można zapobiec renderowaniu komponentów, gdy ich właściwości się nie zmienią.

Za pomocą useCallback można zapobiec niepotrzebnemu renderowaniu komponentów potomnych, gdy używane są Callback-Props.

Skomplikowane obliczenia w funkcjach renderowania powinny być wykonane tylko wtedy, gdy jest to konieczne. Za pomocą useMemo można buforować wyniki tych obliczeń, uwzględniając zależności.

Tutaj podsumowuję wyniki kursu i daję wskazówki, co uczestnicy powinni obejrzeć po kursie.