Autor: Radek Anuszewski

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”

Spis treści

1. Wprowadzenie
2. Zanim zaczniemy
   1. React Context
   2. CSS Custom Properties (aka CSS Variables)
      1. Czym są CSS custom properties?
      2. Przykład użycia CSS Variables
      3. Kod przykładu na Github
      4. Interaktywny przykład na Github Pages
   3. Prefers-color-scheme
      1. Czym jest prefers-color-scheme?
      2. Przykład użycia prefers-color-scheme
      3. Kod przykładu na Github
      4. Interaktywny przykład na Github Pages
3. Tryb ciemny w React
   1. Przykład
   2. Kod przykładu na Github
   3. Interaktywny przykład na Github Pages
4. Podsumowanie

Wprowadzenie

Tryb ciemny jest standardowym rozwiązaniem w nowoczesnych aplikacjach jak Github. Zmianę trybu na bardziej sprzyjający używaniu komputera po ciemku wspierają już natywnie systemy operacyjne. Na coraz większej ilości stron internetowych, między innymi dokumentacji Material UI, dostępne są przyciski przełączające między trybem dziennym i nocnym.

Sam zapewne używasz trybu ciemnego w swoim IDE, jak większość programistów.

Warto więc wiedzieć, jak w prosty sposób zabrać się za implementację tych trybów w Twojej aplikacji, zwłaszcza że – spoiler alert! – istnieje możliwość sprawdzenia z poziomu CSS i JS, czy system operacyjny użytkownika działa w trybie nocnym i do tego dostosować wyświetlanie w aplikacji.

Najpierw omówimy potrzebne tematy z osobna, a potem wszystko zgrabnie połączymy w prosty przykład obsługi trybu jasnego i ciemnego.

Czytaj dalej „Sprawdź jak zaimplementować tryb ciemny w React”

Spis Treści

1. Wprowadzenie
2. Sortowanie z uwzględnieniem znaków diaktrycznych
   1. Intl.Collator
   2. Przykład sortowania z użyciem Int.Collator.compare
      1. Podpowiedzi z użyciem elementu Datalist
3. Formatowanie dat
   1. Intl.DateTimeFormat
   2. Przykład użycia Intl.DateTimeFormat
4. Tłumaczenie nazw
   1. Intl.DisplayNames
   2. Przykład użycia Intl.DisplayNames
5. Względne formatowanie dat
   1. Intl.RelativeTimeFormat
   2. Przykład Intl.RelativeTimeFormat
6. Kod przykładów na Github
7. Interaktywny przykład na Github Pages
8. Podsumowanie

Wprowadzenie

Internacjonalizacja aplikacji niesie za sobą wiele wyzwań – różne języki w różny sposób formatują daty, liczby czy czas relatywny, są to rzeczy bardzo kontekstowe które nie zawsze da się rozwiązać z poziomu tłumaczeń np. z plików JSON. Wyświetlanie nazw państw, regionów czy jednostek administracyjnych również nastręcza problemów ponieważ jest tego bardzo dużo. Jest też potrzeba formatowania wyświetlania walut.

Choć trzymanie tłumaczeń plikach JSON nie zniknie zapewne nigdy, część przypadków da się rozwiązać natywnie – przy użyciu obiektu Intl. Obiekt ten zawiera metody zwracające obiekty które mogą tłumaczyć relatywny czas czy nazwy krajów w podanym języku, czym oszczędzą nam pracy przy tłumaczeniu aplikacji.

Czytaj dalej „Rozwiąż część problemów wielojęzyczności za pomocą API Intl!”

Spis Treści

1. Wprowadzenie
2. Generatory
   1. Przykład generatora
   2. Kod przykładu generatora na Github
3. Redux Saga
   1. Przykład Sagi
   2. Pełny kod Sagi
   3. Kod przykładu Sagi na Github
4. Podsumowanie

Wprowadzenie

Redux Saga to popularny middleware dla Reduxa, oparty na generatorach. Umożliwia obsługę asynchroniczności w sposób przypominający kod synchroniczny.

Warto poznać tą bibliotekę ze względu na prostotę tworzonego przy jej użyciu kodu – Sagi są dobrym miejscem na izolację logiki naszej aplikacji, oddzielenie jej od UI i od samego Reduxa.

Można pokusić się o pytanie, czemu zamiast Redux Saga nie użyć Redux Thunk wraz ze składnią async / await? Przewagą Sag jest możliwość tworzenia bardziej skomplikowanego flow obejmujące chociażby oczekiwanie na pojawienie się konkretnej akcji.

Czytaj dalej „Dowiedz się, jak obsługiwać efekty uboczne dzięki Redux Saga”