Odwrócona dziewczyna w żółtej bluzie, z różowym plecakiem, siedząca na murku

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. Najpopularniejsze sposoby na stylowanie aplikacji w ekosystemie Reacta opisałem na przykładzie trackera kryptowalut.

(więcej…)

Dłoń wyjmująca plik płyt winylowych z pudełka.

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. Najlepsze zostawiłem na koniec, w ostatniej części wpisu implementujemy algorytm wyszukiwarki.

(więcej…)

Przecinające się mosty widziane z lotu ptaka

Wyszukiwarka kryptowalut (część 1): Wyświetlanie warunkowe

Marny użytek z trackera kryptowalut bez możliwości przeszukiwania jego zawartości. Czas zrobić z tym porządek i tchnąć w aplikację odrobinę życia. Zbudujemy komponent wyszukiwarki. To świetna okazja, żeby rzucić okiem na wyświetlanie warunkowe oraz obsługę zdarzeń. Są to tematy znane każdemu programiście JS, przekonamy się jak prezentują się w świecie Reacta.

(więcej…)

Dłoń trzymająca pióro nad kartką z listą zadań

Dynamiczna lista kryptowalut – Pierwszy projekt w ReactJS #5

Naszedł czas na zabranie się za rdzeń trackera kryptowalut. Jest nim nic innego jak wyświetlanie kursów setek kryptowalut. Do tej pory samodzielnie wyświetlaliśmy każdą instancję komponentu Coin. Takie rozwiązanie ma kilka oczywistych wad. Narusza zasadę DRY, jest podatne na błędy przy referowaniu do kolejnego wycinka state, i przede wszystkim, kompletnie się nie skaluje. Musi być lepsze rozwiązanie. Jest nim połączenie możliwości programowania funkcyjnego oraz JSX. (więcej…)

Mężczyzna w koszuli, trzymający dwa pędzle w, ubrudzonych farbami, dłoniach

Komponenty klasowe i state – Pierwszy projekt w ReactJS #4

W poprzednim wpisie poznaliśmy cechujące się prostotą komponenty funkcyjne. Niestety, nie poradzimy sobie z budową trackera kryptowalut, mając do dyspozycji samą warstwę prezentacyjną. Nadszedł czas na analizę komponentów klasowych, które będą służyły jako centra logiki biznesowej naszej aplikacji. Tym razem dowiemy się, czym jest stan komponentu i jak skutecznie nim zarządzać. (więcej…)
Grafiti z napisem "Together We Create!"

Elementy React i JSX – Pierwszy projekt w ReactJS #2

Komponenty, JSX i wirtualny DOM. Trzy flagowe pojęcia, zasłyszane przez każdą osobę zainteresowaną ReactJS. Zanim przejdę do ich omawiania, zatrzymam się na przystanku, pomijanym w większości materiałów dla początkujących. Przybliżę Ci, czym są i jak działają odpowiedniki węzłów DOM w świecie Reacta. Mało się o nich wspomina, podczas gdy ich powstawanie jest głównym efektem korzystania z tej biblioteki. Następnie przedstawię Ci, jak ścisły związek z tym wszystkim ma składnia JSX. Nabyta wiedza pozwoli Ci na stworzenie pierwszego komponentu ze zrozumieniem tego, co dzieje się u samych fundamentów Reacta. (więcej…)

create-react-app – Pierwszy projekt w ReactJS #1

Przygotowywanie środowiska, przed przejściem do właściwej pracy, urosło przez ostatnia kilka lat do statusu takiego wyzwania, że otrzymało niechlubne miano „JavaScript Fatigue”. Niestety, wśród wszystkich frameworków, to właśnie React odpowiadał za największa liczbę konfiguracyjnej gorączki. Chęć wykorzystywania tej technologii wiązała się z koniecznością poznania kilku mniej lub bardziej skomplikowanych narzędzi. Kilka godzin pracy, zanim mogliśmy przejść do tworzenia czegokolwiek. Masakra. Był to zasadniczy powód, przez który początkujący decydowali się na wybór Vue lub Angulara. (więcej…)
Złota statuetka Bitcoina z wykresem na monitorze w tle

Zbudujmy tracker kryptowalut – Pierwszy projekt w ReactJS #0

Najszybszym i najskuteczniejszym sposobem na naukę jest budowanie rzeczy, które nas interesują. Jest to tak często powtarzana rada, że wielu adeptów programowania (ze mną na czele), podchodzi do niej z rezerwą.

Tak po prostu? Żadnego drogiego kursu? Tej jednej, jedynej książki? Sekretnej rady z posta na reddicie?

Na to wygląda.

Wystarczy abstrakcyjnych przykładów. Takie podejście jest skuteczne jedynie podczas nauki składni, a to mamy już za sobą. Wszystko, co powinieneś wiedzieć o JavaScript, omówiłem w Powtórce przed ReactJS.

W nowej serii poznasz podstawy ReactJS przy okazji tworzenia aplikacji z prawdziwego zdarzenia.

(więcej…)

Mężczyzna stojący na skale

6 powodów, dla których wybrałem Reacta

Przez długi czas zastanawiałem się nad wyborem technologii, za którą zabiorę się po opanowaniu JavaScript. Dla osoby tak podatnej na przesadne analizowanie dostępnych możliwości, podjęcie ostatecznej decyzji nie było łatwe. Dlaczego wybrałem Reacta, zamiast królującego na polskim rynku pracy Angulara lub wschodzącej gwiazdy Vue.js?

W oparciu o zrobiony research oraz moje wrażenia po niespełna miesiącu kodowania w React, przedstawię Wam powody, które przekonały mnie do postawienia na tę bibliotekę.

(więcej…)