1 czerwca ogłosiłem na blogu przedsprzedaż moich trzech kursów on-line. Kursy te to: Podstawy React, Podstawy react-router, Podstawy Redux. Oczywiście kursy te można też zakupić w pakiecie, dzięki czemu, rzecz jasna, wychodzi taniej. W tym momencie pozostał w zasadzie ostatni tydzień przedsprzedaży, a moje prace nad kursami już jakiś czas temu weszły w decydującą fazę. Postanowiłem więc dzisiaj przybliżyć strukturę kursów - jakie lekcje wchodzą w skład kursów, ile jest zadań do wykonania, czego dotyczą itp.

Ogólny pomysł na kursy

Zanim przejdę do przedstawienia struktury kursów, przypomnę jaki był mój ogólny zamysł (pisałem juz o tym we wpisie z 1 czerwca).

Teoria w formie tekstowej

Moim głównym założeniem było, aby moje kursy wyglądały trochę inaczej niż typowe kursy dostępne na platformach takich jak na przykład Eduweb, gdzie uczestnik w zasadzie tylko siedzi i ogląda filmiki, w których autor kursu programuje. Na pewno jest to wygodna forma, ale nie jestem przekonany czy walory edukacyjne takiego podejścia są najwyższe.

Dlatego ja, w swoich kursach postanowiłem podejść do tego trochę inny sposób i spróbować odtworzyć formę warsztatu, gdzie przede wszystkim liczy się praktyka. W związku z tym postanowiłem również, że teoria będzie prezentowana w formie tekstowej - przypomina to trochę wpisy na moim blogu. Jest niezbędne wprowadzenie do danego zagadnienia, są przykładu kodu wraz ze szczegółowym omówieniem itd.

Być może jest to forma trochę trudniejsza w odbiorze niż film wideo, jednak z drugiej strony, moim zdaniem do takiej formy łatwiej wrócić podczas wykonywania zadań praktycznych. Zawsze można mieć jednocześnie otwarty edytor, w którym pracujesz nad zadaniem oraz stronę z przykładami, które są przydatne przy wykonywaniu zadania.

Zadania praktyczne

Bardzo ważne w moich kursach są zadania praktyczne. W ramach kursów, poprzez rozwiązywanie kolejnych zadań, uczestnicy rozwijają prostą aplikację (wymagana jest podstawowa znajomość JavaScript - w zadaniach korzystamy ze składni ES6, ale na bierząco staram się ją wyjaśniać).

Ogólnie struktura kursów wygląda tak, że poszczególne lekcje rozdzielane są zadaniami praktycznymi. Czasem zdarzy się, że mamy dwie lekcje pod rząd (jeśli kolejna funkcjonalność aplikacji wymaga większej ilości wiedzy), a dopiero po nich są zadania. Innym razem mamy kilka zadań pod rząd. Ogólnie, skoro rozwijamy aplikację, to kolejne zadania są kontynuacją tego co zostało zrobione wcześniej.

Dla ułatwienia, specjalnie dla uczestników kursu udostępnione zostaną specjalne repozytoria GitHub, na których będziemy pracować - zawierają one wszystko co potrzeba aby zacząć rozwiązywać zadania. Wystarczy je tylko sklonować do siebie. Ponadto zajdziesz na nich branche, będące punktami startowymi każdego z zadań - wystarczy przełączyć się na dany branch i masz cały kod, który powstał w ramach rozwiązywania poprzednich zadań. Dzięki temu na pewno się nie zgubisz.

Rozwiązania zadań w formie wideo

Teoria i zadania to jednak nie wszystko! Aby nie zostawiać Cię samego/samej z zadaniami, do każdego z nich przygotowałem film wideo, który szczegółowo objaśnia jak rozwiązać dane zadanie. Pokazuję w nim, kolejne kroki, które wykonuję aby osiągnąć cel, oraz staram się wyjaśniać różne aspekty danego zagadnienia.

Można więc powiedzieć, że jest to spore uzupełnienie teorii, w formie tekstowej, ponieważ prezentowane filmy również wyjaśniają sporo zagadnień!

struktura kursów

Podstawy React - struktura kursu

Poniżej przedstawiam, strukturę kursu wraz z krótkim opisem:

  • 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 - 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 - 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 react-router - struktura kursu

Poniżej przedstawiam strukturę kursu wraz z krótkim opisem:

  • 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

Podstawy Redux - struktura kursu

Poniżej przedstawiam strukturę kursu wraz z krótkim opisem:

  • 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

Podsumowanie

Na tę chwilę nie podam jeszcze sumarycznego czasu trwania wszystkich filmów objaśniających rozwiązania zadań, ponieważ praca nad nimi wciąż trwa. Być może podam taką informację na fanpage’u na Facebooku, jakoś w tym tygodniu. Jeśli masz jakieś pytania dotyczące lekcji czy zadań -zapraszam do kontaktu na priv (najlepiej poprzez formularz kontaktowy)!

Jednocześnie przypominam, że to juz w zasadzie ostatni tydzień przedsprzedaży i po 1 sierpnia, kiedy to nastąpi premiera kursów, cena kursów wzrośnie do wysokości wyjściowej (więcej na stronie z kursami)!