Chcesz poznać podstawy Reacta
i zacząć tworzyć zaawansowane aplikacje internetowe?

Te kursy on-line Ci w tym pomogą!

Z kursu Podstawy React nauczysz się budować interfejs aplikacji za pomocą komponentów. Kurs Podstawy Redux pokaże Cię jak, w zaawansowany sposób, zarządzać stanem aplikacji React, natomiast z kursu Podstawy react-router dowiesz się jak definiować podstrony aplikacji typu SPA!

Kupuję za 249zł

Kim jestem?

Moje wesołe zdjęcie
Nazywam się Bartek Dybowski i jestem autorem tego bloga!
Od lat zajmuję się programowaniem, a front-end to moja pasja. Z Reactem mam do czynienia niemal od początku jego istnienia co zaowocowało wieloma artykułami, które opublikowałem na tym blogu. Niniejszy pakiet kursów to suma moich doświadczeń, którymi postanowiłem podzielić się z innymi!

Dlaczego warto?

Teoria w formie tekstowej

Każdy kurs to szereg lekcji w formie tekstowej. Dzięki temu możesz łatwo wrócić do raz przerobionego materiału, możesz też się nim łatwo posiłkować podczas pracy nad ćwiczeniami praktycznymi.

Ćwiczenia praktyczne

Lekcje przeplatane są ćwiczeniami praktycznymi do samodzielnego wykonania! Moim zdaniem, nie ma nic lepszego niż samodzielne wypróbowanie dopiero co przyswojonego materiału.

Rozwiązania w formie video

Nie martw się jednak, że zostaniesz z tymi ćwiczeniami zostawiony sam sobie... Do każdego z ćwiczeń przygotowałem klip wideo, w którym szczegółowo objaśniam prawidłowe rozwiązanie danego zadania!

Zawartość kursów

W ramach nauki podstaw React polecam zakup trzech kursów (dostępne osobno oraz w pakiecie):

  • Podstawy React
  • Podstawy Redux
  • Podstawy react-router

Poniżej przedstawiam zawartość każdego z nich:

Podstawy React

Po przerobieniu całego materiału zawartego w tym kursie będziesz znał takie zagadnienia jak:

  • Jak działa VirtualDOM
  • Co to jest JSX, w tym wyświetlanie warunkowe, pętle itp.
  • Tworzenie komponentów React
  • Obiekt this.props
  • Podział na kontenery i komponenty prezentacyjne
  • Wszystko na temat wewnętrznego stanu komponentu
  • Obsługa zdarzeń
  • Cykl życia komponentu
  • Przekazywanie stanu między komponentami
  • Formularze

Ogólnie, jest to wszystko co trzeba wiedzieć na temat biblioteki React by sprawnie z niej korzystać!

Jeśli chcesz, możesz empirycznie sprawdzić jak wyglądają lekcje oraz zadania wraz z rozwiązaniami - w tym celu udostępniłem publicznie jedną lekcję i jedno zadanie:

Podstawy Redux

Jeśli przerobisz wszystkie lekcje kursu, zapoznasz się z takimi zagadnieniami jak, m.in.:

  • Podstawy architektury Flux
  • Konfiguracja store
  • Co to są akcje i kreatory akcji?
  • Co to są reducery?
  • Użycie Reduxa w aplikacjach React
  • Co to jest middleware?
  • Operacje asynchroniczne (redux-thunk)

Uwaga! Mimo, że Redux może być wykorzystywany z różnymi frameworkami JavaScript to sam kurs wymaga podstawowej znajomości React!

Podstawy react-router

W ramach kursu, nauczysz się następujących zagadnień z zakresu biblioteki react-router:

  • Konfiguracja routingu
  • Praca z parametrami URL
  • Przekierowania
  • Prywatne ścieżki (autoryzacja)
  • „Customizacja” linków

Uwaga! Mimo, że Redux może być wykorzystywany z różnymi frameworkami JavaScript to sam kurs wymaga podstawowej znajomości React!

Zamawiam!

Loga Reacta, Reduxa oraz react-routera

Podstawy React + Redux + react-router

W pakiecie taniej! Oferta dotyczy pakietu trzech kursów o łącznej wartości 347zł:

  • Podstawy React - cena: 159zł
  • Podstawy Redux - cena: 129zł
  • Podstawy react-router - cena: 59zł

Jednak kupując w pakiecie płacisz tylko 299zł!

UWAGA - PROMOCJA! Teraz pakiet kursów kupisz za jedyne 249zł!

Kupuję za 249zł!

Gwarancja zadowolenia

Jestem przekonany, że będziesz zadowolony(a) – dokładam wszelkich starań aby tak się stało!

Aby jednak zapewnić Ci większe poczucie komfortu przy zakupie daję Ci 30 dni na zapoznanie się z moim produktem. Jeśli w tym czasie stwierdzisz, że kurs ten nie jest wart wydanych na niego pieniędzy – zwrócę Ci całą kwotę, którą zapłaciłeś(aś)!

Lista lekcji i zadań

Podstawy React

  • Lekcja #1: React – wprodzanie – wprowadzenie do React oraz VirtualDOM
  • Lekcja #2: Składnia JSX – wszystko na temat składni JSX, której używa się do budowy komponentów React
  • Zadania #1: VirtualDOM i JSX – cztery zadania dotyczące składni JSX
  • Lekcja #3: Komponent funkcyjny – przedstawienie czym jest komponent funkcyjny
  • Zadania #2: Komponent funkcyjny (kliknij w link, by zobaczyć przykładowe zadanie) – jedno zadanie, w którym przekształcisz dotychczas stworzony kod w komponent funkcyjny
  • Lekcja #4: Klasa komponentu – przedstawienie czym jest komponent oparty o klasy i dziedziczenie
  • Zadania #3: Klasa komponentu – jedno zdanie, w którym przekształcisz komponent funkcyjny w komponent oparty o klasy
  • Lekcja #5: Metoda render – do czego służy, oraz jak działa renderowanie komponentów
  • Lekcja #6: Obiekt „props” oraz PropTypes – szersze omówienie obiektu props oraz sposobu kontroli typów przekazywanych wartości
  • Zadania #4: Kontrola typów obiektu „props” – jedno ćwiczenie, w którym będziesz miał za zadanie dodać kontrolę obsługi typów przekazywanych przez obiekt props
  • Lekcja #7: Wewnętrzny stan komponentu (kliknij w link, by zobaczyć przykładową lekcję) – wszystko na temat wewnętrznego stanu komponentu: deklaracja stanu początkowego, użycie stanu oraz jego zmiana
  • Lekcja #8: Cykl życia komponentu – przedstawienie cyklu życia komponentu oraz metod wywoływanych w jego trakcie
  • Zadania #5: Stan i cykl życia komponentu – jedno zadanie, w którym zainicjujesz stan komponentu, użyjesz go, a następnie zmienisz po pierwszym renderowaniu komponentu
  • Lekcja #9: Obsługa zdarzeń – w jaki sposób obsługuje się zdarzenia na elementach JSX
  • Zadania #6: Obsługa darzeń – jedno zadanie, w którym obsłużysz zdarzenie odpowiednio zmieniające stan komponentu
  • Lekcja #10: Obsługa zdarzeń (przekazywanie parametrów) – jak przekazywać dodatkowe parametry do metod obsługi zdarzeń
  • Zadania #7: Przekazywanie parametrów do metod obsługi zdarzeń – jedno zadanie, w którym dodasz zdarzenie aktualizujące stan na podstawie przekazanego parametru
  • Lekcja #11: Podział odpowiedzialności komponentów – jak prawidłowo dzielić aplikację na komponenty prezentacyjne i kontenery
  • Zadania #8: Podział odpowiedzialności i parametry zdarzeń – jedno zadanie, w którym wydzielisz kod do osobnego komponentu, pamiętając o prawidłowym podziale odpowiedzialności
  • Lekcja #12: Formularze – wszystko na temat obsługi formularzy w React
  • Zadania #9: Formularze – cztery zadania, w których utworzysz formularze, obsłużysz zmianę wartości pól oraz walidację, a także dodasz obsługę wysyłania formularza
  • Zadania #10 (dodatkowe): Operacje asynchroniczne – dwa dodatkowe zadania: obsługa pobierania danych ze zdalnej lokalizacji oraz komponent „Loader”

Podstawy Redux

  • Lekcja #1: Wprowadzenie – co to jest architektura Flux; co to jest Redux
  • Lekcja #2: Akcje i kreatory akcji – co to jest akcja i kreator akcji
  • Zadania #1: Akcja „wyczyść wydarzenia” – jedno zadanie, w którym utworzysz nowy kreator akcji zwracający akcję
  • Lekcja #3: Reducery – co to jest „reducer” oraz jak definiować stan początkowy aplikacji
  • Zadania 2#: Obsługa akcji „wyczyść” – jedno zadanie, w którym obsłużysz wcześniej stworzoną akcję w „reducerze”
  • Lekcja #4: Store – co to jest „store” oraz jak go skonfigurować, do czego służy metoda dispatch oraz jak udostępnić „store” komponentom React
  • Zadania #3: Konfiguracja store – jedno zadanie, w którym skonfigurujesz „store” dla aplikacji
  • Lekcja #5: Funkcja connect – jak za pomocą funkcji connect powiązać stan aplikacji i wywołania metody dispatch z obiektem props komponentu
  • Zadania #4: Czyszczenie wydarzeń – zakończenie cyklu zmiany stanu – dwa zadania, w których zakończysz przenoszenie obsługi przycisku „Wyczyść” do Reduxa
  • Zadania #5: Pozostałe akcje – cztery zadania, w których przeniesiesz do Reduxa pozostałe operacje na stanie kontenera strony domowej
  • Lekcja #6: Organizacja store i dobre praktyki – w jaki sposób dzielić aplikację na mniejsze „reducery” oraz jak je ze sobą połączyć
  • Zadania #6: Widok szczegółów – dwa zadania, w których utworzysz nowy „reducer”, odpowiednio zmienisz konfigurację i przeniesiesz obsługę operacji na stanie kontenera szczegółów
  • Lekcja #7: Co to jest Redux middleware? – z lekcji dowiesz się czym jest „middleware” w Redux
  • Lekcja #8: Operacje asynchroniczne – jak obsługiwać pobieranie danych z zewnętrznego API za pomocą redux-thunk „middleware”
  • Zadania #7: Pobieranie danych z API – dwa zadania, w których pobierzesz dane z zewnętrznej lokalizacji

Podstawy react-router

  • Lekcja #1: Podstawy routingu – co to jest routing (statyczny i dynamiczny), główny komponent aplikacji, konfiguracja routingu w react-router (v4)
  • Zadania #1: Konfiguracja pierwszej ścieżki – jedno zadanie, w którym skonfigurujesz pierwszą ścieżkę aplikacji
  • Lekcja #2: Parametry oraz komponent Link – atrybut exact, przekazywanie parametrów w adresie, komponent Link
  • Zadania #2: Parametry i renderowanie „inline” – dwa zadania, w których dodasz dwie nowe podstrony i skonfigurujesz dla nich routing
  • Lekcja #3: Sidebar – jak łatwo, dzięki routingowi dynamicznemu, stworzyć część wspólną layoutu z nawigacją; dowiesz się też czym jest komponent NavLink
  • Zadania #3: Sidebar oraz komponent NavLink – jedno zadanie, w którym wykorzystasz wiedzę z poprzedniej lekcji
  • Lekcja #4: Komponent Switch – wszystko na temat komponentu Switch
  • Zadania #4: Obsługa błędu 404 – jedno zadanie, w którym wykorzystasz komponent Switch do obsługi błędów 404
  • Lekcja #5: Zagnieżdżanie ścieżek – jak zagnieżdżać ścieżki w routingu dynamicznym
  • Zadania #5: Szczegóły „inline” – jedno zadanie, w którym za pomocą zagnieżdżania ścieżek wyświetlisz stronę szczegółów
  • Lekcja #6: Przekierowania (komponent Redirect) – jak za pomocą komponent Redirect realizować przekierowania
  • Zadania #6: Autoryzacja – jedno zadanie, w którym dzięki komponentowi Redirect zaimplementujesz prywatną ścieżkę, dostępną dopiero po zalogowaniu