Kurs React

Wprowadzenie do kursu React:

• Słowa wstępne.

• Czym jest React i trochę o historii biblioteki.

• Nacisk na pracę z systemem kodu źródłowego.

Podstawowy składnik React:

• Poznawanie czym jest JSX w React.

• Jak napisać podstawowy pierwszy komponent.

• Budowanie komponentu ze statycznymi danymi i zrozumienie podstaw.

Tworzenie listy z dynamicznymi danymi:

• Dynamiczne tworzenie elementów.

• Wykorzystanie możliwości Array.prototype.map do dynamicznego budowania.

• Importowanie i eksportowanie komponentów z pliku.

Tworzenie tabeli z dynamicznymi danymi:

• Struktura tabeli i jej komponenty w HTML.

• Użycie zagnieżdżonej pętli do budowania tabeli.

• Użycie funkcji map w zagnieżdżony sposób.

• Użycie dynamicznych danych z importowanego pliku.

Stylowanie za pomocą obiektu Style:

• Zrozumienie różnicy między HTML a JSX.

• Nauka stylowania elementów na stronie.

• Praktykowanie dynamicznego tworzenia elementów w wymagający sposób z wykorzystaniem nauczonych stylów.

Integracja plików CSS w React:

• Włączanie świata stylów jako integralnej części budowania komponentów.

• Zrozumienie czym jest className oraz różnice między HTML a JSX.

• Włączenie kompleksowego ćwiczenia ze wszystkiego materiału przyswojonego do tego momentu w kursie.

• Podkreślenie reguł CSS i jak są one integrowane w nasz zbudowany system.

Integracja Props w Komponentach:

• Czym są props w React i kiedy ich używać.

• Budowanie komponentów z props i powszechne metody pisania.

• Używanie komponentów, które napisaliśmy w dynamicznym budowaniu.

Tworzenie tabeli z użyciem props:

• Budowanie tabeli przy użyciu props.

• Tworzenie inteligentnego komponentu przy konstrukcji tabeli.

• Łączenie dynamicznego budowania z wieloma komponentami używając props oraz stylizacji za pomocą CSS.

Używanie zdarzeń i useState:

• Jak połączyć zdarzenia typu onClick z elementami.

• Czym są inteligentne komponenty i dlaczego są nam potrzebne.

• Czym jest react hook typu useState i jak go używać.

• Tworzenie warunków boolowskich w JSX komponentu.

• Łączenie tworzenia zdarzeń i przechowywania stanu w celu budowania inteligentnych komponentów React.

Używanie zdarzenia onChange:

• Jak dodać input na stronę i używać useState do przechowywania wartości inputów.

• Tworzenie dynamicznej listy z danymi wprowadzonymi przez użytkownika.

• Szczegółowe wyjaśnienie tablic i różnicy między wartością a referencją.

• Zrozumienie jak pracować z tablicami przechowywanymi w stanie komponentu.

Tworzenie dynamicznej tabeli z wydarzeniami:

• Zrozumienie, jak zintegrować wszystko, czego się do tej pory nauczyliśmy, aby dynamicznie zbudować tabelę.

• Używanie useState do przechowywania liczby wejść.

• Przykład użycia złożonego stanu z tablicą obiektów.

Używanie hooka useEffect:

• Czym jest reactowy hook typu useEffect oraz jak i kiedy go używać.

• Wykonywanie komunikacji z serwerem przy użyciu fetch.

• Pokazywanie metod zabezpieczania naszego kodu, aby uniknąć niepotrzebnych błędów.

• Budowanie inteligentnego komponentu, który łączy hooki useState i useEffect.

Przykład użycia useEffect w wyszukiwaniu po stronie serwera:

• Odkrywanie dodatkowych zastosowań dla useEffect.

• Zrozumienie, jak cykl życia komponentu wpływa na naszą implementację kodu.

• Prezentacja skomplikowanego przykładu użycia useEffect.

Używanie dodatkowych wejść:

• Czym jest pole wyboru checkbox i jak z niego korzystać.

• Czym jest pole wyboru radio i jak z niego korzystać.

• Czym są wejścia datetime i datetime-local i kiedy ich używać.

Tworzenie tabeli z API z filtrowaniem wyników:

• Wykonywanie żądania API w celu pobrania danych o tabeli.

• Dynamiczne budowanie tabeli.

• Nauka przeprowadzania wyszukiwania za pomocą inteligentnego filtrowania wyników.

• Dyskusja na temat architektury kodu.

Używanie zaawansowanych filtrów:

• Tworzenie tabeli wyświetlającej informacje o lotach.

• Rozbudowa funkcjonalności tabeli o inteligentny komponent wiersza.

• Użycie pól wejściowych do budowania filtrów dla tabeli, wykorzystując checkbox, datetime i text inputs.

Biblioteka Bulma do Zaawansowanego Stylowania:

• Nauka osadzania gotowych stylów.

• Używanie pakietu bulma do dodawania kolorów i stylów do wspólnie budowanych projektów React.

• Osadzanie stylów w istniejącym komponencie i przechodzenie przez dokumentację biblioteki, której będziemy używać.

Sortowanie w JavaScript:

• Ulepszanie istniejącego komponentu tabeli i dodawanie do niego możliwości sortowania.

• Dogłębne zrozumienie działania sortowania na tablicach z liczbami, ciągami znaków i obiektami.

• Zobaczenie, jak radzić sobie ze specjalnym sortowaniem, gdy nasze pole nie jest prostym porównaniem.

Kanały komunikacji między komponentami:

• Nauka, jak komponent potomny może komunikować się z komponentem nadrzędnym.

• Implementacja stylowania bulma w kilku komponentach.

• Budowanie wszechstronnego komponentu, który pozwala na osadzenie zakładek w aplikacji.

• Przykłady użycia propsów typu function.

Podsumowanie