0:00 / 0:00

ReactJS PROMO: Logika aplikacji, dane pochodne i projekcja

w Praktyce

17 godz. 9 min · Full-stack i Programowanie

Mateusz KuleszaSenior Software Developer, Konsultant, Trener

Czego się nauczysz

  • Praca z DOM i z ReactDOM
  • Najwazniejsze elementy EcmaScript6
  • Dynamiczny UI niezalezny od zródla danych
  • Budowanie konfigurowalnych komponentów React
  • Narzedzia i dobre praktyki, Serwer z WebPack
  • Single Page Applications z React Router
  • Twoja wlasna implementacja architektury Flux
  • Niemutowalne dane, Redux i “cofanie aplikacji w czasie"

Renderowanie z React DOM

Sposób działania biblioteki React dla osób niewtajemiczonych może wydawać się wręcz “magiczny”. I możesz zapytać - gdzie tkwi haczyk? Otóż React korzysta z bardzo sprytnego mechanizmu pracy z DOM która omówiona jest właśnie w tej sekcji.  Właśnie w niej pokazuję dokładny mechanizm działania “magii Reacta” i pokazuje dlaczego wbrew temu co podpowiada intuicja podejście React jest o wiele wiele szybsze niż klasyczne metody. Kurs ten zaczyna się od szybkiego przypomnienia podstaw pracy z przeglądarką i z obiektem dokumentu - czyli ze “stroną internetową” - przy użyciu JavaScript. Dla osób początkujących jest to świetne wprowadzenie, a dla osób które znają już dobrze JavaScript ta sekcja jasno i dokładnie pokazuje różnice w podejściu standardowym do renderowania HTML w przeglądarce a tym nowym, szybszym - deklaratywnym - podejściem jakie oferuje React.

Szablony JSX i JavaScript w wersji ES6

O ile pierwsza część pokazuje tajniki działania Reacta i jego API, tak kolejna sekcja skupia się na produktywności. Zobaczysz jak błyskawicznie przekonwertować kod HTML do kodu JSX dla React, a także nauczysz się jak dzięki dynamicznym szablonom możesz renderować dowolnie złożony kod HTML tak prosto i szybko jak nigdy dotąd. Czyż nie było by to super wygodne gdybyś mógł używać zmiennych i funkcji JavaScript bezpośrednio w HTML? Na takie podejście do renderowania HTML właśnie pozwala JSX. Transpilator Babel, którego będziemy używać w kolejnych sekcjach kursu daje także możliwość wykorzystania ogromnych możliwości i wygody pracy jaką daje nowa wersji JavaScript. Jeśli nie miałeś okazji z nią pracować - nie martw się - omawiam pokrótce wszystkie najbardziej przydatne elementy tego języka, z których będziemy korzystać w tym kursie!

Komponenty, Formularze i Interaktywny Interfejs

Dowiesz się jak deklaratywnie budować interfejsy użytkownika z komponentów. Możesz ich używać wielokrotnie co zaoszczędza czas, lub parametryzować i komponować je ze sobą by w bardzo prosty sposób uzyskać różne zaawansowane funkcjonalności. Zobaczysz, że tworzenie takich zaawansowanych funkcjonalności jak dodawanie do koszyka metodą “Przeciągnij i Upuść”, Dynamiczna Nawigacja, Interaktywne Formularze czy niestandardowe elementy jak można z pomocą React’a stworzyć błyskawicznie, a następnie wykorzystywać je wielokrotnie na różne sposoby w twoich aplikacjach.

Narzędzia, Dobre Praktyki, Aplikacje Single-Page

Te sekcje kursu kończą część wizualną pracy z React, a rozpoczynają omawianie narzędzi i bibliotek współpracujących doskonale z biblioteką React. Pokazuje krok po kroku jak zamienić prostą stronę internetową napisaną w React na pełnoprawną Single Page Application, czyli aplikacje internetową z prawdziwego zdarzenia. Dowiesz się jak strukturyzować dane i w prosty  sposób przekazywać je do komponentów by struktura aplikacji była przejrzysta i elastyczna. W kolejnej sekcji dowiesz się jak przekonwertować aplikacje z plików na moduły ES6, jak dynamicznie budować aplikacje przy każdej zmianie, a także zaawansowane tematy - jak skonfigurować super-szybki serwer developerski, oraz jak skonfigurować przeładowywanie modułów “na gorąco”, dzięki czemu zmiany w twoim kodzie będą widoczne w aplikacji natychmiast - bez odświeżenia strony przeglądarki!

Architektura Danych Flux i biblioteka Redux

Ponadto dowiesz się także jak dzięki podejściu funkcyjnemu można nie tylko tworzyć super-szybkie aplikacje internetowe, ale jak architektura Flux i jednokierunkowy przepływ danych pozwalają także uzyskać stabilny i przejrzysty kod aplikacji.  Jest to sekcja zaawansowana, ale jednocześnie bardzo istotna dla osób, które planują budować bardziej rozbudowane aplikacje z użyciem Reacta, chcą znać wysokopoziomowe koncepcje i nie chcą popełnić typowych błędów w swoich projektach. W tym kursie architektura Flux nie jest omówiona pobieżnie - budujemy własną prostą implementacje Flux - dzięki czemu refaktorując kod aplikacji uczysz się krok po kroku poznając zalety i wady poszczególnych rozwiązań. Pod koniec kursu pokazuje także jak skonfigurować zaawansowane narzędzia takie jak przeładowanie modułów “na gorąco” - bez odświeżania strony, zalety niemutowalnych stanów aplikacji, czy tzw. “time-travel debugger”, czyli niesamowite możliwości manipulacji stanem aplikacji płynące z zastosowania biblioteki Redux!

Dla kogo jest ten kurs?

Kurs jest przeznaczony dla wszystkich osób, które pracowały już lub pracują na co dzień z technologiami Front-End, czyli HTML,CSS i JavaScript. Kurs skonstruowany jest w taki sposób, że już podstawowa wiedza o tych trzech technologiach pozwala własnym tempem krok po kroku zagłębić się w ogrom możliwości jakie daje React. Jednocześnie dla osób bardziej doświadcznych, np. pracujących z Framework`ami JavaScript - kurs ten pokaże zupełnie inne podejście do tworzenia apliacji, niż znany powszechnie model Model-View-Controller. React dobrze zastosowany pozwala zwielokrotnić nie tylko szybkość tworzenia aplikacji i szybkość jej działania  - ale co najważniejsze - pozwala znacznie zwiększyć komfort pracy programisty i pewność co do stabilności każdej linijki stworzonego kodu. Nawet jeśli nie planujesz zmiany technologii na React, i tak warto poznać zasady jego działania - wiedza ta może być zastosowana w innych rozwiązaniach i na pewno otwiera ona umysł na wiele nowych możliwości.

React 14-15.3