Chcesz poznać podstawy Reacta
i zacząć tworzyć zaawansowane aplikacje internetowe?
Uwaga!! Kursy będą dostępne w sprzedaży tylko do 13 stycznia 2019, do godziny 20:00!!
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!
Kim jestem?
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!
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ł!Zamawiam osobno!
Podstawy React
Poznaj od podstaw bibliotekę React – jedno z najpopularniejszych obecnie narzędzi do budowy interfejsów użytkownika!
Kupuję za 159zł!
Podstawy Redux
Biblioteka Redux to jedna z najlepszych implementacji architektury Flux. Poznaj ją od podstaw!
Kupuję za 129zł!
Podstawy react-router
Dowiedz się jak konfigurować routing w aplikacjach React za pomocą biblioteki react-router.
Kupuję za 59zł!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
propsoraz 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
dispatchoraz 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
connectpowiązać stan aplikacji i wywołania metodydispatchz obiektempropskomponentu - 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, komponentLink - 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
Switchdo 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
Redirectrealizować przekierowania - Zadania #6: Autoryzacja – jedno zadanie, w którym dzięki komponentowi
Redirectzaimplementujesz prywatną ścieżkę, dostępną dopiero po zalogowaniu