Repozytorium stworzone w celu przeprowadzenia warsztatów WarsawJS Workshop #32 - React.js dla zaawansowanych.
Do każdego ćwiczenia został przygotowany kod szkieletowy. Oznacza to, że w większości ćwiczeń nie będzie potrzeby pisania od zera komponentów ani wtórego kodu konfiguracyjnego. Ma to na celu maksymalne skupienie się na praktycznym zastosowaniu zaawansowanych rozwiązań i utrwalanie zdobytej wiedzy.
WAŻNE! Ćwiczenia przygotowane są tak, aby w większości przypadków nie było wymagane zachowanie kolejności ich wykonywania. Podobnie jest z ich zawartością. Nie zawsze należy wykonać wszystkie polecenia aby przejść do kolejnego ćwiczenia.
Przed przystąpieniem do warsztatów:
- sklonuj repozytorium
- zmień branch na
workshop
- zainstaluj zależności
- uruchom aplikację, w trakcie startu będą ostrzeżenia ale nie powinno być błędów
- dalsze punkty to część warsztatowa, jeżeli chcesz przeczytaj je wcześniej aby być wiedzieć czego się spodziewać ;)
Za pomocą useState, useEffect dokonaj zmian pliku SelectHotel.js
, które pozwolą:
- pobrać listę hoteli i wyświetlić je w przeglądarce
- w trakcie pobierania wyświetlić komponent informujący o trwającym zapytaniu
- filtrować listę hoteli na podstawie wybranego typu łóżka
- sortować listę hoteli zgodnie z predefiniowanymi wartościami
- ukrywać i chować wykres zgodnie z wybraną wartością przełącznika
- wyświetlić liczbę hoteli dla każdego typu łóżka
Za pomocą React Developer Tools zidentyfikuj komponenty, które rerenderują się w trakcie interakcji z listą hoteli. Następnie w pliku SelectHotel.js
dokonaj zmian, które spowodują ponowne rerenderowanie się tylko tych komponentów, których dotyczyły zmiany. Wykorzystaj nowe api:
- useMemo do memoizacji czasochłonnych obliczeń
- useCallback do zapobiegania tworzeniu się nowych referencji do funkcji przy każdym rerenderze komponentu
- memo do tworzenia komponentów renderujących się ponownie tylko wtedy gdy przekazywane propsy zmieniły referencję
W pliku SelectHotel.js
wprowadź zmiany:
- ustaw wykres jako domyślnie ukryty
- z wykorzystaniem React.lazy, import() i Suspense opakuj komponent
RatingChart
aby jego kod pobierany był tylko w momencie wyświetlenia wykresu, a w trakcie zapytania pokazywany był komponent tymczasowy - zmień wywołanie React.lazy aby pobieranie kodu komponentu
RatingChart
rozpoczęło się po pobraniu się głównego kodu źródłowego aplikacji - stwórz funkcję pozwalającą wymuszać pobieranie kodu komponentu w trakcie interakcji z aplikacją
W pliku BookingFlow.js
wprowadź zmiany pozwalające zarządzać kolejnymi etapami rezerwacji hotelu. Na rezerwację składa się wybranie hotelu, sposobu płatności i potwierdzenie rezerwacji. Do kolejnego etapu można przejść tylko po prawidłowym wykonaniu poprzedniego. W pierwszym etapie wprowadzania zmian użyj useReducer do:
- zarządzania stanem aktualnie wyświetlanego etapu, wybranego hotelu i sposobu płatności
- przekazywania funkcji pozwalających na zmianę stanu rezerwacji i na przejście do kolejnego jej etapu
- przerwania trwającej rezerwacji i powrót do stanu początkowego
Następnie zmień sposób przekazywania stanu zamówienia tak aby wykorzystywał on współdzielenie danych za pomocą React Contex.
- W pliku
ConfirmBooking.js
oprogramuj przyciskZarezerwuj
aby po jego wciśnięciu wywoływana była funkcja przekazująca zdarzenie do redux store. - W pliku
saga.js
napisz funkcję z wykorzystaniem biblioteki redux-saga przechwytującą to zdarzenie i wywołującą zapytanie do api potwierdzającą rezerwację. Dokonanie rezerwacji powinno być możliwe tylko dla zalogowanego użytkownika. - W pliku
reducers.js
przygotuj redux reducer aby przechowywał stan trwającego zapytania i podłącz ten stan do komponentuConfirmBooking
. - Wprowadź zmiany do napisanego kodu tak aby reagował na zamknięcie rezerwacji i przerywał trwające zapytanie do api.
Podpowiedź: Warto zajrzeć do plików w folderze
auth
gdzie zastosowano podobne rozwiązanie.
W plikach w folderze rating
dodaj kod który będzie umożliwiał:
- pobranie i wyświetlenie listy hoteli z wykorzystaniem funkcji redux-api-middleware
- ocenę hoteli i przechowywanie tych wartości w redux store pod kluczem
hotels[x].rating.user
- pobranie kolejnych hoteli po kliknięciu przycisku
Załaduj więcej
bez tracenia stanu aktualnie wprowadzonych ocen - pobieranie informacji dotyczących hoteli ocenionych przez użytkownika
Optymalizacja redux store:
- Za pomocą React Developer Tools zidentyfikuj komponenty, które rerenderują się w trakcie oceny i doładowanie się kolejnych hoteli. Wyeliminuj zbędne ponowne renderowanie się komponentów za pomocą zmiany struktury redux store przy użyciu biblioteki normalizr i podłączeniu do store każdego hotelu z osobna.
- Za pomocą bibliotek reselect zmień kod
selectors.js
aby wyliczanie danych z redux store odbywało się tylko wtedy gdy zajdą zmiany wpływające na ich wyniki. - Za pomocą biblioteki immer zmień kod
reducer.js
aby pozbyć się ręcznego budowania nowych obiektów w trakcie zmiany redux store.
Napisz własny hook, który będzie pozwalał na zapis i odczyt wartość z localStorage. Wprowadź zmiany pliku SelectPaymentMethod.js
tak aby ostatnio wybrana metoda płatności była zapamiętywana po zamknięciu okna przeglądarki. Wykonaj to ćwiczenie przy zastosowaniu render prop i higher order component.
Możesz urozmaicić sobie pracę poprzez wykonie innych funkcji za pomocą wskazanych technik. Np.:
- higher order component, który będzie opakowywać komponenty wymagające zalogowania i wyświetlał komunikat w przypadku braku autoryzacji,
- render prop, który będzie udostępniać metody paginacji listy wyświetlanych hoteli.
Podpowiedź: Przykład wymienionych wzorców znajdują się w plikach
Hover.js
,useHover.js
iwithHover.js
w kataloguutils
.
W pliku HotelCard.js
wprowadź zmiany, które pozwolą animować etykietę z ceną hotelu przy najechaniu na nią myszką. Użyj do tego biblioteki VanillaTilt oraz hooks useRef, useEffect.
- Hooks API Reference - dokumentacja Hooks API
- Getting Started with Redux - dokumentacja Redux'a
- Redux-Saga - dokumentacja Redux Saga
- Create React App - dokumentacja Create React App
- Semantic UI React - dokumentacja Semantic UI React, gotowe komponenty wizualne