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

Wyszukiwarka kryptowalut (część 2): Obsługa zdarzeń

Marcin Czarkowski Zostaw komentarz

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

Marcin Czarkowski Zostaw komentarz

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

Marcin Czarkowski Zostaw komentarz

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

Marcin Czarkowski 2 komentarze
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

Marcin Czarkowski 6 komentarzy
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

Marcin Czarkowski 2 komentarze
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

Marcin Czarkowski 3 komentarze

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

Marcin Czarkowski 10 komentarzy
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…)

Sieć połączonych ze sobą żyłek.

Programowanie funkcyjne – Powtórka przed ReactJS #11

Marcin Czarkowski 2 komentarze
Dzisiaj przyjrzymy się, czym tak naprawdę zajmują się koderscy hipsterzy. Programowanie funkcyjne to najpopularniejsza alternatywa dla programowania obiektowego. W ostatnich latach zdobywa coraz większą popularność. Wbrew pozorom wywołanym przez ten hype, samo programowanie funkcyjne nie jest niczym nowym. Ten paradygmat istnieje od dziesięcioleci. Do tej pory był używany przede wszystkim w środowiskach akademickich. Jego popularność wzrosła za sprawą Reacta. Ta biblioteka wykorzystuje wiele fundamentalnych koncepcji programowania funkcyjnego.

(więcej…)