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.


Co będziemy budowali?

Przez ostatnie kilka tygodni prowadziłem jednoosobową burzę mózgów. Zastanawiałem się nad ciekawym pomysłem na prostą aplikację. Zależało mi na projekcie, który wyróżniałby się na tle takich klasyków jak to-do lista czy kalkulator. Na dodatek chciałem, aby było to narzędzie, z którego ja i czytelnicy bloga, mogliby korzystać na co dzień. Taki pomysł na aplikację, to gwarancja wysokiego poziomu motywacji i doprowadzenia projektu do mety.

Jak zwykle, zajawka była na wyciągnięcie ręki. Na tyle oczywista, że praktycznie niezauważalna.

Na co dzień używam circa pięciu aplikacji. Większość z nich jest na tyle rozbudowana, że nie nadają się do sklonowania przez początkującego.

Na szczęście znalazł się wyjątek od tej reguły. Jest nim CoinMarketCap.com, aplikacja do śledzenia kursów kryptowalut.

Uproszczona wersja tej aplikacji to idealny kandydat na pierwszy projekt w React. Już tłumaczę dlaczego.

Na CoinMarketCap składa się kilka prostych komponentów, która zapewniają 80% kluczowych funkcjonalności.

Budowa takiego projektu będzie interesująca zarówno dla osób obracających się w świecie kryptowalut, jak i tych, którzy nie mają nic wspólnego z inwestowaniem w blockchain.

Pierwsza grupa będzie z dumą śledziła stan swojego portfela, korzystając z własnoręcznie wykonanego narzędzia.

Druga grupa na pewno zadowoli się solidnym dodatkiem do CV. Ten użyteczny i oryginalny projekt będzie wyróżniał się na tle kolejnej wersji wspomnianej wcześniej to-do listy.

Projekt aplikacji

Jak przekonuje Steve McGonnel w książce Kod Doskonały, proces budowania aplikacji, niezależnie od jej złożoności, zawsze powinien rozpocząć się od stworzenia dobrego projektu.

Jak wspominałem, interesuje nas 20% komponentów, które zapewniają 80% funkcjonalności CoinMarketCap.com.

Aplikacja CoinMarketCap podzielona na komponenty składowe

Skoro wydzieliliśmy interesujące nas komponenty, to pozostało zastanowić się nad ich strukturą hierarchiczną.

Drzewo prezentujące strukturę hierarchiczną trackera kryptowalut

Liczę, że to „rozbudowane” drzewo mówi samo za siebie ;).

Kilka słów o komponentach składowych

Kodowanie rozpoczniemy od głównej cegiełki naszej aplikacji, czyli od komponentu Coin. Będzie to świetna okazja na opanowanie absolutnych podstaw Reacta czyli: JSX, komponenty bezstanowe, props, CSS Modules i PropTypes.

Następnie stworzymy komponent kontenerowy CoinList. Pozwoli on na dynamiczne renderowanie dowolnej ilości zagnieżdzonych w nim Coinów. Skorzystamy tutaj ze znajomości metod tablicowych, które omówiłem w wpisie Programowanie funkcyjne.

Aby tchnąć więcej życia do projektu, w komponencie SearchBar zaimplementujemy wyszukiwarkę. Jej zadaniem będzie przeszukiwanie CoinList w oparciu o nazwę (lub akronim) interesującego nas Coina. W ten sposób zapoznamy się z obsługą zdarzeń i wyświetlaniem warunkowym.

Na koniec zadbamy o to, aby aplikacja oddawała sytuację na giełdzie w czasie rzeczywistym. W tym celu musimy zrezygnować z danych ustawionych na sztywno, na rzecz tych z zewnętrznego API.
Póki co nie udało mi się znaleźć niczego w technologii GraphQL. Jest szansa, że ulegnie to zmianie w przeciągu kilku najbliższych tygodni. W ostateczności zadowolimy się starym, dobrym RESTem.

Plan działania

Okej, po zebraniu tego wszystkiego w całość, otrzymałem następującą rozpiskę:

  • Szablon aplikacji (create-react-app)
  • JSX
  • Komponenty bezstanowe i props
  • Stylizowanie komponentów (CSS Modules)
  • Kontrola typów – PropTypes
  • Komponenty kontenerowe i state
  • Tworzenie listy komponentów
  • Wyświetlanie warunkowe
  • Obsługa zdarzeń
  • AJAX

W każdym z wpisów znajdziesz część teoretyczną, praktyczną i materiały uzupełniające. Abyś mógł przećwiczyć zdobytą wiedzę, zawsze zostawię coś do samodzielnego wykonania. Będziesz mógł zweryfikować swoje rozwiązanie z moim za pośrednictwem repozytorium projektu na GitHub. Będę dawał linki do commitów :).

10 wpisów przekłada się na 10 tygodni intensywnej nauki. Tylko tyle dzieli nas od solidnego opanowania podstaw Reacta.

Co dalej?

Po przepracowaniu całej serii będziesz mógł pochwalić się pierwszym projektem w ReactJS.

Następnie mamy do dyspozycji dwie ścieżki: rozbudować aplikację i wykorzystać Redux do zarządzanie stanem lub pobawić się z React Native i przenieść aplikację do telefonów komórkowych.

Decyzja należy do Was. Będę śledził komentarze oraz wyniki ankiety, która pojawi się na blogu, gdy prace nad projektem nabiorą odpowiedniego rozpędu.

Podsumowanie

Jeżeli będziesz budował aplikację razem ze mną, to koniecznie dawaj znać w komentarzach. Odwdzięczę się motywacyjną piątką ;).

Zależy Ci na poruszeniu jakiegoś zagadnienia, które nie znalazło się w mojej rozpisce? Pisz śmiało. Zobaczymy, co da się zrobić.

Bądź na bieżąco z serią Pierwszy projekt w ReactJS. Wystarczy polubić fanpage’a AlgoSmart na fejsie, obserwować mój profil na Twitterze i regularnie odwiedzać portal Polski Front-end.

Zdjęcie tytułowe autorstwa: unsplash-logoAndre Francois

  • Powroźnik Kamil

    Bardzo fajny blog. Rzeczowo opisane przykłady. Zostanę czytelnikiem na stałe, pozdrawiam 😉

  • Wiktoria Tomzik

    dołączam!