Front Cave

Spis treści

1. Wprowadzenie
2. React Portals
3. Alternatywy dla React Portals
   1. React Context
   2. React Redux
4. Kod przykładu na Github
5. Klikalny przykład na Github Pages
6. Podsumowanie

Wprowadzenie

Portale w React są funkcjonalnością, na którą natkniesz się prawdopodobnie na samym końcu – po przekopaniu całego internetu w poszukiwaniu rozwiązania. Renderowanie zawartości w innym miejscu niż logicznie element należy wydaje się nie mieć sensu – pomaga jednak rozwiązać problemy z z-index czy overflow na jakie możesz natknąć się przy próbach wyświetlenia treści. Choć Portal niekoniecznie będzie pierwszym wyborem – często może okazać się znacznie szybszym rozwiązaniem niż refaktor lub inne bardziej oczywiste opcje – poznajmy więc jak one działają.

Czytaj dalej React Portals i podejścia alternatywne

Spis treści

1. Wprowadzenie
2. Wyświetlanie powiadomień
   1. W jakim momencie można wyświetlać użytkownikowi powiadomienia?
   2. Jak nie być natrętnym z wyświetlaniem powiadomień?
   3. Kod przykładu na Github
   4. Klikalny przykład na Github Pages
3. Podsumowanie

Wprowadzenie

Pokazywanie powiadomień jest przydatne w wielu sytuacjach – idealnym przykładem są czaty, gdzie w oczekiwaniu na odpowiedź drugiej strony możemy zająć się czymś innym niż gapieniem się w ekran 🙂

Dodatkowo, w przeglądarkach opartych na Chromium powiadomienia wyglądają i zachowują się jak notyfikacje systemowe, co dodatkowo podnosi ich atrakcyjność i przyciąga uwagę bardziej niż zwykłe powiadomienia przeglądarkowe. Na Windows 10 powiadomienie takie odtwarza dźwięk, dzięki czemu będzie łatwiej zauważone przez użytkownika.

Czytaj dalej Notifications API – powiadomienia jako sposób nawiązywania relacji z użytkownikiem

Spis treści

1. Wprowadzenie
2. Przykład w React
   1. Sposób liczenia rerenderów
   2. Kod przez refaktoryzacją
   3. Kod po refaktoryzacji
   4. Kod przykładu na Github
   5. Klikany przykład na Github Pages
3. Podsumowanie

Wprowadzenie

Podczas pracy zawodowej zdarzało mi się doświadczać sytuacji, gdy pracując pod presją czasu trzeba było iść na „kompromisy” jeśli chodzi o jakość kodu. Z czasem w projekcie używającym Reacta pojawiały się komponenty typu „wielotysięczniki”, które miały setki a czasem nawet tysiące linii kodu. Im dłużej trwał development, tym więcej kodu dolepiane było do takich komponentów oraz rosła ich liczba zależności.

Gdy zaczęliśmy przerabiać takie olbrzymy na mniejsze komponenty, nieco zaskakującą korzyścią był spadek ilości rerenderów. Po zastanowieniu się, okazało się to proste i oczywiste – zarządzanie stanem, również przeniesione do różnych komponentów, powodowało rerendery tylko tych komponentów w których było zawarte.

Czytaj dalej Sprawdź, jak prosty refaktor może zredukować liczbę rerenderów w Twojej aplikacji!

Spis treści

1. Wprowadzenie
2. Przykład React lazy loading
   1. Opis
   2. Kod przykładu
      1. Szkielet aplikacji
      2. Wersja ze standardowym importem
      3. Wersja z importem przez lazy
   3. Kod przykładu React lazy na Github
   4. Klikalny przykład React lazy na Github Pages
3. Podsumowanie

Wprowadzenie

Czy zastanawiało Cię kiedyś, jak wiele kodu z Twojej aplikacji nigdy nie zostanie przez część klientów użyte? Zdarzyło Ci się może zastanawiać, jak wiele z CSSów które piszesz zobaczy tylko jakiś procent użytkowników? Lub też wiesz, że pewnych elementów używa tylko pewien procent użytkowników?
Jeśli te założenia są prawdziwe w Twoim projekcie, możesz zastanowić się czy nie warto zaimplementować ładowania dynamicznego za pomocą React lazy – zwłaszcza jeśli bibliotek czy innych ciężkich elementów Twoja aplikacja używa tylko w pewnych kontekstach.

Czytaj dalej React lazy loading – sprawdź co zyskasz!

Spis treści

1. Wprowadzenie
2. Przechodzenie dalej bez kliknięcia
   1. Opis przypadku
   2. Implementacja useEffect vs useLayoutEffect
   3. Kod przykładu na Github
   4. Klikalny przykład na Github Pages
3. Podsumowanie

Wprowadzenie

UseEffect to jeden z najczęściej używanych hooków, za pomocą których uzyskujemy efekty podobne jak kiedyś za pomocą metod componentDidMount, componentDidUpdate i componentWillMount. Hook ten jednak wywołuje się po przerysowaniu komponentu. Rzeczy dziejące się w hooku są asynchroniczne w stosunku do rysowania elementów na ekranie i go nie blokują.

Istnieje jednak również hook useLayoutEffect – wykonywany przed przerysowaniem elementu, blokujące aktualizację tego co widzi użytkownik. Jak się okazuje, są przypadki gdy takie zachowanie jest nam potrzebne – mimo że w większości przypadków wystarczy nam useEffect.

Zapraszam Cię więc do artykułu, w którym przedstawię taki przypadek – luźno bazujący na tym, co niedawno przydarzyło mi się w pracy.

Czytaj dalej Sprawdź, do czego może Ci sie przydać hook useLayoutEffect!

Spis Treści

1. Wprowadzenie
2. Connect
   1. mapStateToProps
   2. mapDispatchToProps
   3. mergeProps
3. Hooki React Redux
   1. useDispatch
   2. useSelector
4. Ryzyka związane z przechodzeniem z connect na hooki
   1. Porównanie kodu connect i hooków
      1. Kod przykładu na Github
      2. Interaktywny przykład na Github Pages
   2. Na co uważać przy refaktorze?
5. Podsumowanie

Wprowadzenie

Hooki w świecie Reacta pojawiły się już jakiś czas temu i spotkały się z pozytywnym przyjęciem. Znalazły również zastosowanie w bibliotece Redux – mamy hooki useDispatch, useSelector i potrzebny w specyficznych przypadkach useStore.

Pracując w aplikacji która jest oparta o Reduxowe API connect myślałem na początku, że nowe hooki Reduxa okażą się bezpośrednim następcą starszego API i że od razu mogę zabrać się do aktualizacji kodu.

Okazało się, że niekoniecznie – przy przejściu na hooki trzeba uważać na pewne rzeczy i o tym będzie ten post.

Ale na początku zróbmy krótki wstęp do rzeczy, o których będziemy tu mówić.

Czytaj dalej Sprawdź na co uważać, gdy w kodzie używającym Reduxa chcesz przejść z connect na hooki