Moduł 14 – Podstawy React

Mateusz Choma -


Moduł kursu o numerze 14, o nazwie "Podstawy React", pozwoli Ci zapoznać się z React'em — biblioteką wydaną i utrzymywaną przez Facebooka, znacznie ułatwiającą tworzenie interfejsów użytkownika (UI aplikacji).

React pod względem popularności bije na głowę inne dostępne rozwiązania, a praca z nim jest bardzo zbliżona do pracy z czystym JS-em (z wyjątkiem drzewa DOM).

Nauczysz się jak działa React i jak pisać w nim kod, aby na końcu tej części własnoręcznie napisać dużą, pełnoprawną aplikację z rejestracją i logowaniem.

📚 Zawartość modułu

Moduł "Podstawy React" jest podzielony na 98 lekcji:

  1. Wstęp: Wprowadzenie do kursu i omówienie celów i korzyści płynących z nauki React'a.
  2. Co to jest React — framework a biblioteka: Wyjaśnienie różnicy między frameworkiem a biblioteką oraz przedstawienie roli React'a jako biblioteki do budowania interfejsów.
  3. Używanie React bez bundlera — React.createElement: Omówienie sposobu korzystania z React'a bez narzędzi budujących (bundlerów) i prezentacja funkcji React.createElement.
  4. Drzewo DOM vs Virtual DOM: Porównanie drzewa DOM z wirtualnym drzewem DOM i wyjaśnienie, dlaczego React używa wirtualnego DOM do efektywnego renderowania.
  5. JSX bez bundlera: Wyjaśnienie składni JSX oraz pokazanie, jak można korzystać z JSX bez użycia bundlerów.
  6. Create React App: Przedstawienie narzędzia Create React App, które ułatwia tworzenie nowych projektów React.
  7. ESLint: Omówienie narzędzia ESLint, które pomaga w utrzymaniu jednolitej i zgodnej składni w kodzie React.
  8. Emmet w JSX: Wykorzystanie skrótu Emmet w JSX do szybkiego i efektywnego tworzenia kodu.
  9. JSX vs HTML (różnice): Przedstawienie różnic między JSX a HTML i wyjaśnienie, jakie zmiany trzeba wprowadzić w kodzie HTML, aby go używać w React.
  10. Co JSX potrafi wyrenderować: Przedstawienie typów danych z JavaScript, które można bezpośrednio renderować przy użyciu JSX w React.
  11. Key i renderowanie tablic: Wyjaśnienie roli atrybutu "key" przy renderowaniu elementów z tablicy oraz omówienie najlepszych praktyk związanych z jego używaniem.
  12. Renderowanie zagnieżdżonych tablic: Omówienie technik renderowania zagnieżdżonych tablic w React i pokazanie, jak skutecznie zarządzać kluczami.
  13. Renderowanie warunkowe: Wykorzystanie instrukcji warunkowych do renderowania różnych elementów w zależności od określonych warunków.
  14. Filtrowanie elementów: Przedstawienie technik filtrowania elementów w React na podstawie określonych kryteriów.
  15. onClick: Wykorzystanie zdarzenia onClick do obsługi interakcji użytkownika w React.
  16. onChange: Wykorzystanie zdarzenia onChange do obsługi zmiany wartości formularza w React.
  17. Komponenty funkcyjne: Omówienie komponentów funkcyjnych w React i pokazanie, jak można je tworzyć i używać.
  18. Komponenty klasowe: Przedstawienie komponentów klasowych w React i wyjaśnienie, jak je tworzyć i zarządzać nimi.
  19. Stan w komponencie: Wyjaśnienie koncepcji stanu w komponencie React i pokazanie, jak go używać do przechowywania i aktualizowania danych.
  20. Pola klas: Omówienie pól klasowych w komponentach React i przedstawienie różnych technik ich używania.
  21. Mutowanie stanu bezpośrednio: Wyjaśnienie, dlaczego bezpośrednie mutowanie stanu w komponentach React jest niewłaściwe.
  22. forceUpdate: Wykorzystanie funkcji forceUpdate do wymuszenia ponownego renderowania komponentu w React.
  23. async setState: Wykorzystanie funkcji setState w asynchronicznych operacjach w React i omówienie najlepszych praktyk.
  24. Własny CRA template cz. 1: Tworzenie własnego szablonu projektu w Create React App (CRA), część 1.
  25. Własny CRA template cz. 2: Tworzenie własnego szablonu projektu w Create React App (CRA), część 2.
  26. Warunkowe renderowanie ze stanem: Wykorzystanie stanu w React do warunkowego renderowania elementów na podstawie określonych warunków.
  27. Filtrowanie oparte o stan: Implementacja filtrowania elementów w React na podstawie wartości stanu.
  28. React DevTools: Przedstawienie narzędzia React DevTools, które ułatwia debugowanie i inspekcję aplikacji React.
  29. Projekt 1 - ToDo lista w React: Praktyczne zastosowanie wiedzy z poprzednich lekcji do stworzenia aplikacji ToDo listy w React.
  30. Propsy: Wyjaśnienie koncepcji propsów w React i pokazanie, jak przekazywać dane do komponentów.
  31. Co można przekazać propsem: Przedstawienie różnych typów danych, które można przekazywać za pomocą propsów w React.
  32. Spread propsów — otherProps: Wykorzystanie operatora spread do przekazywania dodatkowych propsów do komponentów w React.
  33. Domyślna wartość propsów: Omówienie możliwości ustawienia domyślnej wartości propsów w React.
  34. prop-types: Wykorzystanie biblioteki prop-types do definiowania typów propsów i zapewnienia poprawności przekazywanych danych.
  35. Domyślne propsy dla komponentu: Ustalanie domyślnych wartości propsów dla komponentów w React.
  36. Counter z komponentów: Praktyczne zastosowanie wiedzy o propsach i stanach do stworzenia prostego licznika w React.
  37. Counter z propsami: Rozbudowanie poprzedniego projektu licznika o możliwość konfiguracji za pomocą propsów.
  38. Lifting state up — wynoszenie stanu do góry: Wyjaśnienie koncepcji "lifting state up" w React i przedstawienie korzyści płynących z przenoszenia stanu do wyższego poziomu komponentów.
  39. children: Wykorzystanie specjalnego propsa "children" w React do przekazywania zawartości wewnętrznej do komponentów.
  40. Inline styles: Użycie styli wewnętrznych (inline styles) w React do definiowania stylów bezpośrednio w kodzie komponentu.
  41. Inline styles based on props: Dynamiczne dostosowywanie styli wewnętrznych w React na podstawie wartości przekazywanych propsów.
  42. Importowanie CSS: Importowanie i stosowanie zewnętrznych plików CSS w projektach React.
  43. Prefixowanie klas: Automatyczne dodawanie prefiksów do klas CSS w celu uniknięcia konfliktów nazw i poprawnego działania w różnych przeglądarkach.
  44. CSS modules: Wykorzystanie CSS modułów w React do zapewnienia izolacji stylów dla poszczególnych komponentów.
  45. CSS in JS: Przedstawienie technik tworzenia stylów w JavaScript (CSS in JS) w projekcie React.
  46. Wstęp do metod cyklu życia (lifecycle): Omówienie podstawowych metod cyklu życia komponentów w React i wyjaśnienie, jak są one wywoływane.
  47. Mounting lifecycle methods: Przedstawienie metod cyklu życia związanych z montowaniem komponentu w drzewie DOM.
  48. Updating lifecycle methods: Wyjaśnienie metod cyklu życia związanych z aktualizacją komponentu w React.
  49. Unmounting lifecycle methods: Omówienie metod cyklu życia związanych z usuwaniem komponentu z drzewa DOM.
  50. Error boundaries: Wykorzystanie mechanizmu error boundaries w React do obsługi i zarządzania błędami w komponentach.
  51. Projekt 1 – obsługa losowych błędów: Implementacja obsługi losowych błędów w projekcie ToDo listy w React.
  52. Fetchowanie danych: Wykorzystanie funkcji fetch do pobierania danych z serwera w React.
  53. Stany ładowania: Obsługa stanów ładowania w czasie pobierania danych w React.
  54. Wyświetlanie pobranych tablic: Renderowanie pobranych danych w postaci tablicy w projekcie React.
  55. Projekt 2 – pobieranie z odstępami czasowymi: Wykorzystanie funkcji setInterval do okresowego pobierania danych w projekcie w React.
  56. Ikony SVG: Wykorzystanie ikon SVG w projekcie React.
  57. Projekt 3.0 – ToDo lista z komponentów: Rozbudowanie projektu ToDo listy o komponenty w React.
  58. Projekt 3.1 - ToDo lista z komponentów — usuwanie: Implementacja funkcjonalności usuwania elementów z ToDo listy w projekcie React.
  59. Projekt 3.2 - ToDo lista z komponentów — edycja: Implementacja funkcjonalności edycji elementów w ToDo liście w projekcie React.
  60. Projekt 3.3 - ToDo lista z komponentów — zakończenie: Finalizacja projektu ToDo listy z komponentów w React.
  61. Projekt 3.4 Publikowanie Firebase Hosting: Wykorzystanie Firebase Hosting do publikacji aplikacji Reactowej, umożliwiając udostępnienie aplikacji online.
  62. React.Fragment: Wykorzystanie React.Fragment do grupowania i renderowania elementów bez dodawania dodatkowych węzłów DOM.
  63. React DOM refs: Korzystanie z refs w React w celu uzyskania dostępu do węzłów DOM i manipulacji nimi.
  64. React components refs: Wykorzystywanie refs do odwoływania się do komponentów w React, umożliwiające bezpośrednie wywołanie ich metod i dostęp do danych.
  65. Projekt 4.0 Design w Figma: Projektowanie interfejsu aplikacji w narzędziu Figma, obejmujące tworzenie prototypów, projektowanie układu i stylizację komponentów.
  66. Projekt 4.1 Stan aplikacji: Zarządzanie globalnym stanem aplikacji w React za pomocą narzędzia takiego jak Redux lub Context API.
  67. Projekt 4.2 Loader: Implementacja animowanego wskaźnika ładowania (loadera) w celu informowania użytkownika o trwającym procesie.
  68. Projekt 4.3 Typografia: Stworzenie spójnego stylu typograficznego dla aplikacji, definiując rozmiary czcionek, odstępy między liniami i inne atrybuty tekstu.
  69. Projekt 4.4 Przyciski: Tworzenie wielu wariantów przycisków, takich jak przyciski podstawowe, przyciski akcji, przyciski wypełnione i puste itp., z odpowiednimi stylami i efektami.
  70. Projekt 4.5 Info messages: Wyświetlanie komunikatów informacyjnych (info messages) dla użytkowników, np. powiadomienia o sukcesie, ostrzeżenia lub błędy.
  71. Projekt 4.6 Kompozycja komponentów: Tworzenie bardziej zaawansowanych komponentów poprzez kompozycję i łączenie mniejszych komponentów w celu uzyskania większej elastyczności i łatwości użycia.
  72. Projekt 4.7 Szablony modułów: Stworzenie gotowych szablonów modułów, które mogą być wielokrotnie wykorzystywane w projekcie, zapewniając jednolity styl i funkcjonalność.
  73. Projekt 4.8 TextField: Implementacja pola tekstowego z możliwością wprowadzania i edycji tekstu oraz obsługą zdarzeń związanych z wprowadzaniem danych.
  74. Projekt 4.9 LoginForm: Stworzenie formularza logowania umożliwiającego użytkownikom wprowadzanie danych logowania i ich weryfikację.
  75. Projekt 4.10 CreateAccountForm: Implementacja formularza rejestracji umożliwiającego użytkownikom tworzenie nowych kont w aplikacji.
  76. Projekt 4.11 RecoverPasswordForm: Stworzenie formularza przywracania hasła, który umożliwia użytkownikom zresetowanie swojego hasła w przypadku jego zapomnienia.
  77. Projekt 4.12 Podstawowa nawigacja: Dodanie podstawowej nawigacji do aplikacji za pomocą biblioteki do routingu, takiej jak React Router.
  78. Projekt 4.13 Logowanie przez Firebase: Integracja funkcji logowania przez platformę Firebase, umożliwiającej uwierzytelnianie użytkowników przy użyciu konta Firebase.
  79. Projekt 4.14 Walidacja e-maila: Implementacja walidacji adresów e-mail, sprawdzając poprawność formatu i unikalność w systemie.
  80. Projekt 4.15 Walidacja pozostałych formularzy: Stworzenie mechanizmu walidacji innych pól formularzy, takich jak hasło, imię, nazwisko itp., z uwzględnieniem różnych reguł i wymagań.
  81. Projekt 4.16 Rejestracja i odzyskiwanie hasła: Implementacja funkcjonalności rejestracji i odzyskiwania hasła w aplikacji, umożliwiającej użytkownikom tworzenie konta i przywracanie dostępu do konta w przypadku utraty hasła.
  82. Projekt 4.17 AppBar: Stworzenie paska nawigacji (AppBar) na górnym panelu aplikacji, zawierającego logo, menu i inne elementy nawigacyjne.
  83. Projekt 4.18 UserDropdown: Implementacja rozwijanego menu użytkownika, które pozwala na wyświetlanie dodatkowych opcji i działań związanych z kontem użytkownika.
  84. Projekt 4.19 UserDropdown - przełączanie listy: Dodanie interaktywności do menu rozwijanego użytkownika, umożliwiając użytkownikowi otwieranie i zamykanie listy opcji.
  85. Projekt 4.20 UserDropdown - pozycja listy + wylogowanie: Dodanie elementu listy do menu rozwijanego użytkownika, który umożliwia wylogowanie z konta.
  86. Projekt 4.21 Faker Mockaroo: Wykorzystanie narzędzi takich jak Faker i Mockaroo do generowania fałszywych danych w celach testowych i demonstracyjnych.
  87. Projekt 4.22 Pobieranie kursów z Firebase: Integracja aplikacji z bazą danych Firebase w celu pobierania i wyświetlania listy kursów.
  88. Projekt 4.23 CourseCard: Stworzenie komponentu CourseCard, który reprezentuje pojedynczy kurs w aplikacji, wyświetlając jego tytuł, opis i inne informacje.
  89. Projekt 4.24 CoursesList: Implementacja komponentu CoursesList, który renderuje listę kursów z pobranej bazy danych.
  90. Projekt 4.25 MainLayout: Stworzenie podstawowego układu (layoutu) aplikacji, definiującego strukturę i rozmieszczenie głównych elementów interfejsu.
  91. Projekt 4.26 Wyszukiwanie: Dodanie funkcjonalności wyszukiwania, umożliwiającej użytkownikom znajdowanie kursów na podstawie wprowadzonych fraz lub kategorii.
  92. Projekt 4.27 Dopracowanie: Optymalizacja i dopracowanie interfejsu aplikacji, w tym poprawa wyglądu, dostosowanie responsywności i usuwanie błędów.
  93. Projekt 4.28.0 Refaktoryzacja - PageCoursesList: Refaktoryzacja komponentu PageCoursesList.
  94. Projekt 4.28.1 Refaktoryzacja - PageLogin: Przeprowadzenie refaktoryzacji komponentu PageLogin.
  95. Projekt 4.28.2 Refaktoryzacja - PageCreateAccount: Refaktoryzacja komponentu PageCreateAccount.
  96. Projekt 4.28.3 Refaktoryzacja - PageRecoverPassword: Przeprowadzenie refaktoryzacji komponentu PageRecoverPassword .
  97. Projekt 4.28.4 Refaktoryzacja — obsługa asynchronicznych akcji: Refaktoryzacja kodu w celu lepszej obsługi asynchronicznych akcji, takich jak pobieranie danych z serwera czy przetwarzanie zapytań HTTP.
  98. Projekt 4.29 Wdrożenie: Przygotowanie aplikacji do wdrożenia na serwerze produkcyjnym, konfiguracja środowiska i publikacja aplikacji online.

👀 Zobacz przykładową lekcję z tego modułu kursu:

👨‍💻 Zobacz przykładowy kod z tej lekcji:

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!