Marcin Czarkowski / Smart
ReactJS, JavaScript, Java
Ostatnie newsy
Czym są React Hooks?
Hooks to zdecydowanie najgorętsza funkcjonalność Reacta 16. Pierwsza fala hype’u opadła, i co rzadko zdarza się w ekosystemie JS, tym razem entuzjazm społeczności nie okazał się dziełem przypadku. Z tego artykułu dowiesz się czym są React Hooks, jakie korzyści płyną z ich stosowania i co musisz wiedzieć, aby proces ich nauki nie sprawił Ci żadnych […]
[VIDEO] Higher Order Components
Higher Order Component to najczęściej spotykany zaawansowany wzorzec w ekosystemie Reacta. Absolutny must-have w Twoim programistycznym arsenale. W tym materiale znajdziesz odpowiedzi na następujące pytania: Czym są HOC i jakie mają zastosowanie? Jak wydzielić logikę wyświetlania warunkowego do HOC? Jak komponować HOC za pomocą metody compose? Jakie minusy wiążą się z stosowaniem tego wzorca? BONUS: […]
[VIDEO] Kompozycja vs dziedziczenie – Wzorce w React #3
Aby w pełni docenić korzyści płynące z kompozycji, którą spotykamy w React.js dosłownie na każdym kroku, warto porównać ją z alternatywnym sposobem na rozszerzanie komponentów czyli dziedziczeniem.
[VIDEO] Switch component – Wzorce w React #2
Kolejny czwartek, kolejne video z serii Wzorce w React. Tym razem o prostym sposobie na wyświetlanie warunkowe, który pozwoli Ci na sprawną obsługę ładowania i błędów przy zapytaniach do API. Bohaterem odcinka jest Switch component, po obejrzeniu będziesz wiedział: Jaki problem rozwiązuje ten wzorzec? Jak obsłużyć widoki trzech kluczowych gałęzi każdego zapytania do API?
[VIDEO] Komponenty kontenerowe i prezentacyjne – Wzorce w React #1
Tematyka stosunkowo prosta i zapewne znana większości czytelników tego bloga (opisywałem ten wzorzec pokrótce w serii Pierwszy projekt w React) ale myślę, że udało mi się przekazać wszystkie kluczowe informacje w przystępnej i zwięzłej formie.
Wzorce w React czyli jak wyruszyłem na podbój Youtube’a
Wzorce w React to niesamowite okazja do podniesienia jakośći Twojego kodu. Poznajmy je wspólnie w nowej serii na Youtube.
Jak pisać testy end-to-end aplikacji React z frameworkiem Cypress
Przyszedł czas na zdobycie wierzchołka testerskiej piramidy. Zabierzemy się za testy e2e (end-to-end). W teorii to najlepszy sposób na upewnienie się, że aplikacja działa jak należy. Możliwość dokładnego odtworzenia zachowań użytkownika w środowisku przeglądarki jest nadzwyczaj obiecująca. Niestety, praktyka szybko obnaża ukryte słabości tego podejścia do testowania.
Jak pisać testy integracyjne komponentów React z Jest i Enzyme
Podczas testowania interfejsu użytkownika ograniczanie się sprawdzania odizolowanych od siebie komponentów nie zdaje egzaminu. Funkcjonalności dostarczane przez aplikację zawsze są wypadkową właściwej współpracy kilku jednostek w środowisku przeglądarki. Dopiero kiedy upewnisz się, że podsystemy są właściwie ze sobą zintegrowane, znacznie wzrośnie prawdopodobieństwo, że aplikacja spełni swoje zadanie w akcji.
Jak pisać testy jednostkowe komponentów React z Jest i Enzyme
Jak to bywa z początkami, są trudne. Przypomniałem sobie o tym podczas pisania pierwszych testów jednostkowych w React. Dręczyło mnie wiele pytań: co powinienem testować? A co zostawić w spokoju? Czy moje testy zbytnio skupiają się na wewnętrznej mechanice komponentu? A może przez brak doświadczenia pomijam istotne elementy interfejsu?
Lista materiałów, których potrzebujesz do skutecznej nauki Reacta
Stawiasz pierwsze kroki w ekosystemie Reacta? A może początki masz już za sobą, ale część zagadnień jest dla Ciebie problematyczna? Tak się składa, że w czasie wolnym od tworzenia kolejnych komponentów, udało mi się odszukać wiele wartościowych materiałów. Pozwolą Ci na skuteczną naukę, niezależnie od dotychczasowego poziomu umiejętności.
Co musisz wiedzieć, żeby zacząć testowanie komponentów React?
Wprowadzenie testów to najlepszy sposób na podniesienie jakości i niezawodności tworzonego przez Ciebie oprogramowania. Jak pokazała przeprowadzona przeze mnie ankieta, czytelnicy bloga świetnie zdają sobie sprawę. Mimo najlepszych chęci, pierwsze kroki w świecie testowania mogą być przytłaczające. Terminologia, konfiguracja środowiska, o samym pisaniu testów nie mówiąc. Tym razem udowadniam, że to żadne rocket science.
Śledzenie kursów kryptowalut czyli AJAX w React – PPwRJS #10
Zbliżamy się do zakończenia pracy nad trackerem kryptowalut. Jedyne, czego brakuje do zrealizowania założeń, to wprowadzenie aktualnych danych o kursach z zewnętrznego serwera. Do realizacji tego celu posłuży nam AJAX oraz API CoinMarketCap. React jest biblioteką skoncentrowana na View, stąd na próżno szukać wbudowanego rozwiązania do obsługi asynchronicznego JSa.
Cykl życia komponentu – PPwRJS #9
W czym każdy z nas, programistów, przypomina komponent React? Człowiek przechodzi przez dzieciństwo, dojrzałość i starość. Tak się składa, że bardzo podobny cykl życia charakteryzuje komponenty. Możemy w ich przypadku wydzielić okresy Mounting (dzieciństwo), Updating (dojrzałość) i Unmounting (starość).
Stylowanie w React – PPwRJS #8
React wywrócił świat front-endu do góry nogami. Pierw za sprawą JSX doszło do zatarcia granic pomiędzy warstwą struktury (HTML), a warstwą zachowania (JS). Nie trzeba było długo czekać, aby ten trend rozprzestrzenił się na warstwę prezentacji. Zamieszanie na linii React-CSS trwa w najlepsze od trzech lat.
Wyszukiwarka kryptowalut (część 2): Obsługa zdarzeń
Przyszedł czas na zbudowanie najciekawszego komponentu w całym trackerze kryptowalut. Jest nim SearchBar. Całe działanie tego komponentu opiera się o obsługę zdarzeń. Z wpisu dowiesz się, jakie są różnice pomiędzy zdarzeniami w React i DOM API. Dużo uwagi poświęciłem wiązaniu this, które może sprawić Ci niemiłą niespodziankę przy przekazywaniu referencji do funkcji w props.
