React
React.js – biblioteka języka programowania JavaScript, która wykorzystywana jest do tworzenia interfejsów graficznych aplikacji internetowych. Została stworzona przez Jordana Walke, programistę Facebooka, a zainspirowana przez rozszerzenie języka PHP - XHP.
Mamy dostępny 1 płatny kurs
| Tytuł | Krótki opis | Kod rabatowy | Akcja | |
|---|---|---|---|---|
| React Redux i Jest - tworzenie aplikacji webowych | Kurs w praktyczny sposób pokazuje jak, od pierwszej linijki kodu po wdrożenie na zewnętrzny serwer (Heroku), tworzyć aplikacje webowe z użyciem biblioteki React i wspomagającej ją biblioteki Redux. Nie tworzymy więc osobnych 'mini' projektów dla każdej funkcjonalności Reacta, lecz zbieramy wszystko w jedną całość i małymi krokami tworzymy pełnoprawną aplikację webową wraz z integracją z bazą danych i uwierzytelnianiem użytkowników. Nauczy on Cię podstaw bibliotek React i Redux - obecne jednych z najpopularniejszych bibliotek front-end opartych na JavaScript. Kurs zaczyna się od instalacji niezbędnych narzędzi, krok po kroku będziemy rozwijać naszą aplikację, by finalnie zintegrować ją z usługami googlowego BaaS - Firebase. Od zera więc utworzymy pełnoprawną aplikację webową. Za pomocą bibliotek Jest i Enzyme utworzymy testy jednostkowe do naszych komponentów React. Kurs jest rozbudowywany wedle i wraz z sugestiami uczestników. | CLOCKWORK_BLOG | Zobacz więcej |
Mamy dostępne 3 darmowe kursy
Michał Miszczyszyn / typeofwebMarcin Czarkowski / Smart
Paweł Ćwik / Clockwork Java
Michał Miszczyszyn / typeofweb
Michał Miszczyszyn / typeofweb |
Krótki opis | |
|---|---|---|
 |
Wprowadzenie do kursu React.js od podstaw | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Oto kurs React.js od podstaw. Moje gratulacje za podjęcie tego tematu! To pierwszy krok w kierunku realizacji Twoich ambicji i poznania tego niezwykle przydatnego narzędzia. Ten kurs React.js sprawi, że będziesz umiał(a) tworzyć rozbudowane i profesjonalne aplikacje internetowe oraz przybliży Cię do celu jakim zapewne jest znalezienie pracy w tej technologii. Na pewno warto! Skąd u mnie w ogóle pomysł opracowania tego tematu? Odpowiedź jest prosta: … |
 |
Poznaj React.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… React jest biblioteką do budowania interfejsów w JavaScript, stworzoną przez Facebooka. React zdobył ogromną popularność wśród programistów i jest jedną z tych bibliotek, w których pisze się całkiem przyjemnie. Koncept Reacta opiera się o znane od dawna wzorce, które zostały tutaj odświeżone i zunifikowane: Jednokierunkowy przepływ danych i budowanie aplikacji w oparciu o komponenty. Co to jest React.js? React nie jest kompletnym frameworkiem — jest raczej … |
 |
Pierwszy komponent w React.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W tym wpisie pokażę prosty komponent React.js, opiszę jego budowę i podstawowe elementy. Napiszemy też (razem) pierwszą pełnoprawną aplikację w React, którą będziesz mogła/mógł uruchomić u siebie na dysku. Będzie to baza do dalszych części kursu React.js. Wróćmy do poprzedniego przykładu, tak zwanego Hello World, w React.js. Oto on, tym razem w pełnej okazałości: … |
 |
Props czyli atrybuty w React.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W tej części nauczysz się parametryzować komponenty w React.js. Poznasz pojęcie „props” oraz dowiesz się do czego one (te „propsy”) służą. To co zrobiliśmy do tej pory było spoko, ale przecież nie będziesz tworzyć nowego komponentu zawsze gdy będziesz chciał(a) wyświetlić inny tekst w aplikacji, prawda? Wyobraź sobie, że masz do zaprojektowania popup, w którym będzie wyświetlony tytuł oraz tekst. Za moment to zaimplementujemy! Projekt Zacznijmy od zaprojektowania kodu takiego … |
 |
Podział na komponenty w React.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W tej części skupisz się na teorii i praktyce dzielenia zaprojektowanych aplikacji na poszczególne komponenty. Zaczniesz też tworzyć prostą appkę — menedżer kontaktów. W planach wyświetlanie, dodawanie i edycja kontaktów. Ale najpierw — musimy przecież zaprojektować HTML i CSS dla tej aplikacji. Projekt Przyjrzyj się temu co będziesz budował(a). Będzie to lista kontaktów, ale na początku spójrz tylko na pierwszy widok: To dzisiaj „potniemy” i podzielimy na komponenty React.js w JSX. … |
 |
Klasy jako komponenty React.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Do tej pory używaliśmy prostych funkcji i z nich tworzyliśmy komponenty React. Mimo, że przeważająca część komponentów, które tworzę są właśnie takimi prostymi funkcjami, to jednak nie wszystkie. Funkcje są bardzo przydatne, jednak poniekąd ograniczone. Jak więc inaczej można tworzyć komponenty w React.js? Używając klas! Stateless Functional Component SFC, albo Stateless Functional Component — tak profesjonalnie nazywają się te komponenty, które do tej pory … |
 |
Interakcja z komponentami React.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Tworzenie aplikacji nie miałoby sensu, gdyby użytkownik nie mógł wchodzić z nią w interakcje ? Dzisiaj nauczysz się obsługiwać zdarzenia wywoływane przez użytkowników: Kliknięcia, najechania kursorem, zmiany tekstu w polu tekstowym… oczywiście w React.js. Zdarzenia w JS Wszystkie interakcje użytkownika z aplikacją w przeglądarce opierają się o zdarzenia. W czystym JS, aby takie eventy móc obsługiwać, używamy przeznaczonych do tego funkcji, które tworzą i usuwają … |
 |
Stan komponentów React.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Przyszedł czas na poznanie tajemniczego state w React.js. Udało nam się tworzyć komponenty, które pięknie wyświetlały przekazane propsy, ale trzeba przyznać szczerze: Bez wewnątrznego stanu nie da się zbudować funkcjonalnej aplikacji. Dzisiaj nauczysz się taki stan dodawać i wykorzystywać ? Zacznijmy może od typowego przykładu powielonego w wielu kursach: Licznika. Stwórz komponent, który ma dwa przyciski (plus i minus) oraz output na … |
 |
State w React.js 2 | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Pod koniec poprzedniego wpisu zadałem podchwytliwe ćwiczenie dotyczące state w React.js. Jeśli jeszcze go nie wykonałaś/eś to teraz jest ten moment, aby wrócić i spróbować ? W tym wpisie rozwijam temat state, opisuję dokładniej jak działa setState i jakie argumenty przyjmuje. Zacznijmy może od wykonania ćwiczenia z poprzedniego wpisu. Zadanie brzmiało tak: Dodaj dwa nowe liczniki. Pierwszy, który będzie zliczał … |
 |
Metody cyklu życia komponentu w React.js | Przy okazji omawiania komponentów będących klasami w React.js, wspomniałem też o możliwości korzystania z metod cyklu życia (lifecycle methods). Chciałbym do tego tematu teraz powrócić. Pokażę jakie metody cyklu życia definiuje React.js, do czego one służą i kiedy mogą się przydać. Cykl życia komponentu Każdy komponent ma pewien określony cykl życia. Na odpowiednich etapach wywoływane są też … |
 |
React.js w przykładach: filtrowanie statycznej listy | W jednym z komentarzy ktoś zasugerował mi, abym pokazywał jak najwięcej praktycznych przykładów. Inna osoba pytała konkretnie o przykład filtrowania listy na podstawie tekstu wpisywanego w input. Stwierdziłem, że warto skorzystać z tych sugestii ? Oto powstaje seria wpisów, które będą się przeplatały z kursem Reacta jako takim. Tutaj będę pokazywał konkretne przykłady i implementacje, bez tłumaczenia teorii. Pierwszym przykładem będzie właśnie taka … |
 |
Tworzenie aplikacji React.js dzięki create-react-app | Do tej pory pokazałem kilka przykładów z React.js, a wszystkie wrzuciłem na codepen. Jak się pewnie domyślasz, tworzenie rozbudowanych aplikacji wygląda nieco inaczej. Dzielisz je na wiele plików, chcesz odpalać testy jednostkowe, a ostatecznie chciałabyś kod zminifikować. create-react-app to paczka pozwalająca na łatwe stworzenie projektu opartego o React.js. Tworzy dla Ciebie strukturę katalogów i plików, zawiera wszystkie potrzebne na początek narzędzia i pozwala … |
 |
React.js na GitHub Pages dzięki create-react-app | Bardzo często początkujący pytają mnie gdzie mogą łatwo wrzucić nieco bardziej rozbudowany projekt, żeby go pokazać. Nie mają swojego hostingu, na Codepenie nie będzie to wygodne jeśli aplikacja podzielona jest na wiele plików. Co robić? Zazwyczaj odpowiadam: GitHub Pages. GitHub Pages GitHub Pages to specyficzny rodzaj hostingu. Pozwala Ci hostować i udostępnić innym to, co wrzucisz do repozytorium na GitHubie. … |
 |
Testowanie aplikacji React.js — podstawy Enzyme | Testowanie aplikacji to rzecz ważna. Do tej pory jednak nie wspomniałem ani słowem o testowaniu React.js. Czas najwyższy to zrobić! I od razu wrzucam Cię na głęboką wodę — użyjesz React.js i Enzyme — przemiłej biblioteki do testowania komponentów. O zaletach samego testowania nie muszę chyba pisać. Utrzymanie kodu, łatwiejsze dodawanie nowych funkcji, testy służące jako dokumentacja… bajka ? Dlatego teraz po prostu weźmiesz poprzedni przykład … |
 |
Testowanie React.js w Enzyme — props, state i interakcje | Pokazałem już jak pisać proste testy do aplikacji React.js z użyciem Enzyme. Sprawdzanie czy coś się renderuje, czy zawiera tekst, czy dobrze pokazuje elementy… W tym wpisie idę o krok dalej. Pokazuję jak w Enzyme testować interakcje z komponentami, odczytywać i zmieniać propsy a także state. Pobieranie i ustawianie propsów oraz state Na elementach (selektorach) Enzyme można wywołać kilka ciekawych metod. W tym momencie interesują … |
 |
Poprawne bindowanie funkcji w React.js | Jak pewnie zauważyłaś/eś — wywołanie metody klasy w React.js z poziomu funkcji render kończy się źle, o ile nie użyjesz bind. Wspominałem też o tym w kursie i sam używałem po prostu bind w czasie renderowania. Ale czy to dobre rozwiązanie? Co z wydajnością i czytelnością takiego kodu? bind w ogóle Zacznijmy może w ogóle od tego po co Ci bind i co ta funkcja robi ? Otóż w JS-ie metody tak naprawdę … |
 |
Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className | W komentarzach na blogu i na Facebooku pojawiło się całe mnóstwo różnych pytań do mnie. Super! Staram się odpowiadać na nie na biężąco. Ale teraz postanowiłem też zebrać je w jednym miejscu wraz z odpowiedziami — i stworzyć swego rodzaju kompendium wiedzy ? Jeśli masz jakieś pytania to pisz! Odpowiem na nie w jednym z kolejnych wpisów. Wasze pytania i odpowiedzi Babel — co on tak naprawdę robi? Myślałem, że kompiluje tylko ES6, a Ty napisałeś, … |
 |
Komunikacja pomiędzy komponentami w React.js | Przyszedł ten moment, gdy Twoja aplikacja zaczyna się rozrastać i zmagasz się z różnymi problemami z architekturą. Zacznijmy od prostego problemu: Komunikacja pomiędzy komponentami. Ale nie tylko tymi, które są bezpośrednio obok siebie, ale też tymi dowolnie oddalonymi w aplikacji… Napisałem wcześniej podobne artykuły na temat AngularJS (link) i Angular2 (link). Wiedza tam zawarta jest w dużej części uniwersalna i możesz chcieć do nich zajrzeć. … |
 |
Komunikacja z API w React.js | Bardzo często powracającym wątkiem jest pytanie o to, w jaki sposób zaimplementować komunikację z API w React.js. Moja odpowiedź może Cię nieco zaskoczyć: React nie ma nic do tego. Możesz to robić absolutnie dowolnie. Plan Rozpatrzę teraz popularny przypadek: W momencie załadowania aplikacji, potrzebuję pobrać jakieś dane z API. Gdy już będą gotowe — chcę je wyświetlić. Brzmi dobrze? Rozbuduję więc swój poprzedni przykład: Znaną i lubianą … |
 |
Formularze w React.js — niekontrolowane komponenty | Dzisiaj zajmiesz się imlementacją formularzy w React.js. Już wcześniej dokonywałaś/eś interakcji z polami formularza — ale raczej w prosty sposób. Dzisiaj o formularzach kontrolowanych w React.js Kontrolowane formularze w React.js Kontrolowane komponenty w React.js (Controlled Components) — to takie komponenty, których wewnętrzny stan jest kontrolowany przez Reacta. O czym mówię? Weźmy prosty kod: Ten input nie jest kontrolowany przez Reacta dlatego, że jego … |
 |
Formularze w React.js — kontrolowane komponenty | Dzisiaj zajmiesz się imlementacją formularzy w React.js. Już wcześniej dokonywałaś/eś interakcji z polami formularza — ale raczej w prosty sposób. Dzisiaj o formularzach kontrolowanych w React.js Kontrolowane formularze w React.js Kontrolowane komponenty w React.js (Controlled Components) — to takie komponenty, których wewnętrzny stan jest kontrolowany przez Reacta. O czym mówię? Weźmy prosty kod: Ten input nie jest kontrolowany przez Reacta dlatego, że jego … |
 |
Formularze w React.js — niekontrolowane komponenty | Część druga formularzy w React.js — tym razem formularze tak zwane „niekontrolowane” — czyli Uncontrolled Components. Czym są i jak się ich używa? No i po co Ci w ogóle formularze niekontrolowane w React.js? Niekontrolowane formularze — Uncontrolled Components W większości przypadków poleca się używanie jednak kontrolowanych formularzy. Jak już wcześniej pisałem, w kontrolowanych formularzach to React jest jedynym źródłem danych i tylko React kontroluje … |
 |
Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react | Kolejna seria Waszych pytań i moich odpowiedzi na temat React. W komentarzach i na fejsie pojawia się ich mnóstwo, staram się wyłapywać, zapisywać i kompilować w postaci artykułu. Oto one ? Wasze pytania i odpowiedzi Jaka jest różnica pomiędzy props="{login}" a props={login}? To co wpiszesz wewnątrz "" będzie traktowane jako ciąg znaków. A więc props="{login}" spowoduje przekazanie do komponentu ciągu znaków "{login}". Drugia wersja, czyli props={login} … |
 |
Flux i Redux | Na codzień korzystam z Redux razem z React. Dawniej używałem też własnej implementacji architektury Flux razem z AngularJS. Postanowiłem napisać o tym koncepcie coś więcej — bo jest to bez wątpienia bardzo ciekawe! Jednokierunkowy przepływ danych, akcje, dispatcher, action creator, reducer… to wszystko w tym wpisie ? A do tego klarowne, praktyczne przykłady! Gdy opisywałem sposoby komunikacji pomiędzy kontrolerami w AngularJS, poniekąd celowo pominąłem … |
 |
React + Redux — kurs: wprowadzenie i podstawy | Redux! Kurs Reacta dorobił się odcinka o Reduksie! Powoli wprowadzę Cię świat Reduksa, nauczysz się używać tej łatwej biblioteki, poznasz koncepty stojące za nią i napiszesz prostą aplikację. Redux: Oto wpis, na który wszyscy czekali! ? Nie będzie teorii. Od razu zaczniemy używać Reduksa. Bo on jest tak naprawdę niesamowicie łatwy w obsłudze. Brzmi dobrze? Zaczynajmy! Układ folderów przedstawiony w tym wpisie jest … |
 |
TDD w React.js z pomocą react-testing-library | Jak tworzyć komponenty w React.js zgodnie z TDD dzięki react-testing-library? Jak zamockować axios? Jak napisać testy odporne na refactoring? To i kilka innych sztuczek w artykule poniżej ? Trzymanie się zasad TDD (Test-Driven Development) pisząc aplikacje po stronie front-endu w React.js może wydawać się trudniejsze niż testowanie kodu po stronie back-endu. Musimy w jakiś sposób wyrenderować nasz komponent, zasymulować interakcje … |
 |
React + Redux — filtrowanie listy, proste selektory | Jak dokładnie wygląda komunikacja pomiędzy komponentami przy użyciu Redux w React? W tym wpisie pokazuję jak zaimplementować filtrowanie listy przy użyciu Reduksa. Na dokładkę — poznasz pojęcie „selektor” i pewien ważny koncept w Reduksie. Do kodu! Komponenty a Redux Komunikowanie ze sobą komponentów, które leżą blisko siebie to bułka z masłem. Do tego bynajmniej nie jest potrzebny Redux ? Jeśli nie pamiętasz to odśwież sobie pamięć na temat … |
 |
Projektowanie komponentów: Presentational & Container Components | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Często w różnych artykułach poświęconych Reactowi i Reduksowi napotkasz takie sformułowania jak Presentational and Container Components albo Skinny and Fat Components albo Dumb and Smart Components i być może jeszcze kilka innych podobnych ? Wszystkie te określenia oznaczają to samo: Podział komponentów na 2 rodzaje: Służące prezentacji oraz zawierające logikę. Presentational Components Bardzo lubię określenie dumb, bo ono naprawdę … |
 |
Asynchroniczność w Redux: redux-thunk | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Do tej pory dane z API pobierałem po prostu w komponencie App, a po przyjściu odpowiedzi wysysyłałem odpowiednią akcję (contactsFetched). To działało. Ale wymyśliłem sobie nową funkcję w aplikacji: Możliwość parametryzowania zapytań do API. Posłuży mi do tego nowy komponent. Jak teraz mam wykonywać zapytania do API? Przekazywać coś do store, a to coś wpłynie na App, który wykona zapytanie i zwróci dane znowu do store? Nie brzmi za dobrze. Ale jest lepszy … |
 |
Kiedy używać state, a kiedy Redux? | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Bardzo często osoby poznające bibliotekę Redux próbują przenieść cały stan każdego komponentu do Reduksowego store’a. Czy to ma sens? Czy powinnaś całkowicie przestać używać setState? Nie ma nic złego w state Naprawdę. Nie ma nic złego w używaniu setState. Ale kiedy użyć setState, a kiedy Reduksa? W podjęciu decyzji może Cię wspomóc lista pytań pomocniczych. Znajdziesz je poniżej! Czy te dane dotyczą tylko jednego komponentu czy kilku? Prosta … |
 |
Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Od wersji React 16.3 funkcje componentWillMount, componentWillReceiveProps i componentWillUpdate zostają oznaczone jako deprecated. Pojawiają się też dwie nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate. Co to dla nas oznacza? Do czego one służą? Jak ich używać? Informacje o pozostałych lifecycle methods w React znajdziesz tutaj: Metody cyklu życia komponentu w React.js Co złego w starych metodach? W React wprowadzony zostaje powoli Async Rendering … |
 |
Leniwe ładowanie komponentów w React dzięki import | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Czy w React da się ładować komponenty leniwie? A więc masz już sporą aplikację. Chcesz ją jakoś zoptymalizować. Do głowy przychodzi Ci, oczywiście, podział jej na kilka części, które będą ładowane na żądanie, dopiero gdy będą potrzebne — tzw. lazy load. Z pomocą przychodzi operator import(…) — po prostu! Operator import(…) Składni import something from 'something' używasz na pewno codziennie. W skrócie, powoduje ona, że dana zależność … |
 |
Higher Order Reducers — Redux i powtarzanie kodu | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Higher Order Reducers — co to takiego? Gdy popracujesz dłużej z Reduksem to na pewno zauważysz pewne powtarzalne wzorce. Napisanie akcji i reducerów do obsługi API to konieczność powtórzenia bardzo podobnego kodu kilka, kilkanaście razy! Czy na pewno jest to konieczne? Z pomocą przychodzą właśnie Higher Order Reducers i kompozycja. Definicja Higher Order Reducer Higher Order Reducer to funkcja, która zwraca reducer i (opcjonalnie) przyjmuje reducer jako … |
Marcin Czarkowski / Smart |
Krótki opis | |
|---|---|---|
 |
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 |
 |
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. |
 |
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. |
 |
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 |
 |
Komponenty funkcyjne i props | Znajomość elementów React oraz JSX otwiera przed nami wrota do świata komponentów. To właśnie wokół nich kręci się cały proces budowania aplikacji w ReactJS. Czas rzucić trochę światła na to, czym komponenty są, jak z nich korzystać oraz jakie wyróżniamy ich rodzaje. Z czysto technicznego punktu widzenia, komponenty to nic innego jak funkcje lub klasy. |
 |
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ć. |
 |
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. |
 |
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. |
 |
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. |
 |
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. |
 |
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. |
 |
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ść). |
 |
Ś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. |
 |
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. |
 |
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. |
 |
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? |
 |
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 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. |
 |
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. |
 |
[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. |
 |
[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] 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. |
Paweł Ćwik / Clockwork Java |
Krótki opis | |
|---|---|---|
 |
React JS – wprowadzenie na przykładzie | React jest jedną z najpopularniejszych bibliotek języka Javascript, służącą do tworzenia interfejsów użytkownika – a konkretniej tych webowych, czyli stron internetowych. Został on stworzony przez pracownika Facebooka i głównie przez tę firmę jest utrzymywany oraz oczywiście wykorzystywany. Inne duże korporacje jakie z niego korzystają to PayPal czy Netflix. W tym wpisie przedstawie krótkie wprowadzenie do … |
 |
Wprowadzenie ReactJS #2 – State i Props | Komponenty w React JS operują na dwóch zbiorach danych – props, o których wspominałem już w poprzednim poście poświęconym React oraz state. W tym poście przyjrzymy im się bliżej i poznamy różnice między nimi. Format wideo wpisu znajduję się na jego końcu Props Zacznijmy od przypomnienia czym są propsy, z poprzedniego wpisu wiemy, że są to … |