Moduł kursu o numerze 21, zatytułowany "Podstawy testowania komponentów w React", skupia się na nauce podstawowych technik testowania komponentów w React. W tym module odkryjesz różne biblioteki i narzędzia, które pomogą Ci pisać skuteczne testy jednostkowe i testy end-to-end dla Twoich komponentów React.

📚 Zawartość modułu

Moduł "Podstawy testowania komponentów w React" jest podzielony na 8 lekcji:

1. Wstęp: Zapoznaj się z tematyką testowania komponentów w React i dowiedz się, dlaczego jest to ważny element procesu tworzenia aplikacji.
2. JSDOM: Poznaj bibliotekę JSDOM, która umożliwia symulowanie środowiska przeglądarki w testach jednostkowych dla komponentów React.
3. Enzyme: Naucz się korzystać z biblioteki Enzyme, która zapewnia przyjazne API do testowania komponentów React poprzez manipulację ich strukturą i stanem.
4. Enzyme with hooks: Przejdź dalej i odkryj, jak testować komponenty używające hooków za pomocą biblioteki Enzyme.
5. React Testing Library: Poznaj inną popularną bibliotekę testową, React Testing Library, która promuje testowanie komponentów z perspektywy użytkownika końcowego.
6. React Testing Library – getByTestId: Dowiedz się, jak wykorzystać funkcję getByTestId z React Testing Library do wybierania elementów w testach i sprawdzania ich zawartości.
7. React Testing Library – Snapshot testing: Zapoznaj się z techniką testowania z użyciem snapshotów w React Testing Library, która pozwala na porównywanie wyników renderowania komponentów z oczekiwaniami.
8. E2E tests – Cypress: Przejdź do testów end-to-end (E2E) za pomocą narzędzia Cypress i dowiedz się, jak pisać testy, które symulują interakcje użytkownika z Twoimi komponentami React.

👀 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!

Ten moduł poświęcony jest rozwiązywaniu problemów związanych z asynchronicznymi operacjami w zarządzaniu stanem aplikacji za pomocą biblioteki Redux.

Nauczysz się, jak skutecznie obsługiwać operacje asynchroniczne w Redux, takie jak ładowanie danych z serwera czy wysyłanie żądań HTTP. Przejdziemy przez wszystkie istotne zagadnienia, które pozwolą Ci opanować efekty asynchroniczne w kontekście Redux.

Rozpoczniemy od wprowadzenia do tematu i zrozumienia, dlaczego obsługa operacji asynchronicznych w Redux może być wyzwaniem. Następnie skupimy się na praktycznych aspektach, takich jak tworzenie akcji asynchronicznych przy użyciu biblioteki Redux Thunk, która pozwolą Ci łatwo tworzyć akcje asynchroniczne w Redux.

W ramach modułu stworzysz również funkcję pomocniczą o nazwie createAsyncDuck, która ułatwi tworzenie asynchronicznych akcji w Redux, wraz z obsługą stanów ładowania i błędów – idealne narzędzie do wysyłania zapytań HTTP przy pomocy Redux i Redux Thunk oraz Redux Duck.

Będziesz miał/a również okazję praktycznie zastosować zdobytą wiedzę, uczestnicząc w projekcie praktycznym. Zaprojektujesz aplikację, która będzie sprawdzać, czy użytkownik jest administratorem, stworzysz routing dla panelu administracyjnego, zaprojektujesz układ administracyjny, a także będziesz obsługiwać różne operacje na lekcjach i kursach.

📚 Zawartość modułu

Moduł "Efekty asynchroniczne w Redux" jest podzielony na 16 lekcji:

1. Introduction + loading users app: Rozpocznijmy ten moduł od wprowadzenia do tematu oraz stworzenia aplikacji wczytującej asynchronicznie użytkowników, na której będziemy pracować dalej.
2. Loading users with Redux: Przeniesiemy ładowanie danych użytkowników do Redux.
3. Loading users with Redux Thunk: Skorzystamy z biblioteki Redux Thunk, aby usprawnić ładowanie danych użytkowników w Redux.
4. Redux flow on diagrams: Zobacz, jak przedstawić przepływ danych w Redux za pomocą diagramów, aby lepiej zrozumieć i wizualizować operacje wykonywane na stanach.
5. createAsyncDuck: Stworzymy również funkcję pomocniczą o nazwie createAsyncDuck, która ułatwi tworzenie asynchronicznych akcji w Redux, wraz z obsługą stanów ładowania i błędów.
6. Actions with setTimeout: Przeanalizujmy działanie funkcji setTimeout w kontekście akcji Redux, aby opóźniać i kontrolować wywołanie akcji.
7. Callback on createAsyncDuck: Wykorzystamy callbacki w createAsyncDuck.
8. Project 0.0 checking if user is admin: W projekcie praktycznym zaprojektujemy funkcjonalność sprawdzania, czy użytkownik jest administratorem.
9. Project 0.1 Admin routes: Skonfigurujemy routing dla panelu administracyjnego.
10. Project 0.2 Admin layout: Stworzymy funkcjonalny układ dla panelu administracyjnego w projekcie.
11. Project 0.3 Lessons – getAll: Zajmiemy się pobieraniem lekcji w projekcie z wykorzystaniem Redux.
12. Project 0.4 Lessons – create: Dowiemy się, jak tworzyć nowe lekcje i zintegrujemy te operacje z Redux.
13. Project 0.5 Lessons – update: Nauczymy się aktualizować istniejące lekcje w projekcie, wykorzystując Redux.
14. Project 0.6 Lessons – remove: Opanujemy operacje usuwania lekcji w projekcie, korzystając z Redux.
15. Project 0.7 Courses: Stworzymy panel do zarządzania kursami (zawierającymi lekcje).
16. Project 0.8 Deployment: Wdrożymy aplikację na serwer, aby była dostępna publicznie i gotowa do użytku.

👀 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!

Ten moduł kursu programowania poświęcony jest jednej z najpopularniejszych bibliotek do zarządzania stanem aplikacji w środowisku React — Redux.

Czy zdarzyło Ci się kiedyś utknąć w pułapce rozbudowanych komponentów, przekazywania stanu w dół drzewa komponentów, czy utraty kontroli nad zarządzaniem stanem aplikacji? Jeśli tak, to Redux może być rozwiązaniem, którego szukasz!

W ramach tego modułu nauczysz się, jak efektywnie korzystać z Redux w połączeniu z React, aby tworzyć skalowalne, łatwe w zarządzaniu i utrzymaniu aplikacje. Przejdziemy przez wszystkie istotne zagadnienia, które pozwolą Ci opanować Redux i w pełni wykorzystać jego potencjał.

Rozpoczniemy od wprowadzenia do Redux i zrozumienia, jaką rolę odgrywa w zarządzaniu stanem aplikacji. Następnie przejdziemy do praktycznych aspektów, takich jak tworzenie własnego kontenera stanu (store), integracja z React przy użyciu biblioteki react-redux, czy też wykorzystanie narzędzi developerskich Redux do debugowania i monitorowania stanu.

Poznasz również kluczowe zasady działania Redux, takie jak pojedyncze źródło prawdy, stan tylko do odczytu i czysta funkcja reducera. Dowiesz się, jak efektywnie korzystać z funkcji combineReducers, aby łączyć wiele reduktorów w jedno miejsce.

Podczas kursu będziesz miał/a okazję praktycznie zastosować zdobytą wiedzę, tworząc projekt listy zadań w Redux. Będziesz mógł/a doświadczyć, jak Redux ułatwia zarządzanie stanem aplikacji i zapewnia spójność danych.

📚 Zawartość modułu

Moduł "Redux i wykorzystanie go w React" jest podzielony na 14 lekcji:

1. Wstęp: Wprowadzenie do Redux i omówienie jego roli w zarządzaniu stanem aplikacji.
2. Simple state container – own store: Tworzenie własnej prostej implementacji kontenera stanu w czystym JavaScript.
3. Simple state container – refactor: Refaktoryzacja kontenera stanu w Redux w celu poprawy czytelności.
4. Instalacja: Proces instalacji biblioteki Redux i jej zależności.
5. Redux duck proposal: Zapoznania się z Redux Duck, które jest konwencją organizacji kodu, plików i katalogów w Redux.
6. Devtools: Wykorzystanie narzędzi developerskich Redux do debugowania i monitorowania stanu aplikacji.
7. Integracja z React: Integrowanie biblioteki Redux z React w celu zarządzania stanem komponentów i re-renderowania podczas zmian stanu.
8. react-redux: Wykorzystanie biblioteki react-redux do uproszczenia integracji Redux z React.
9. Three Redux principles: Przedstawienie trzech fundamentalnych zasad Redux: pojedyncze źródło prawdy, stan tylko do odczytu i czysta funkcja reducera.
10. Lista zadań w Redux: Tworzenie prostego projektu listy zadań z wykorzystaniem Redux do zarządzania stanem.
11. combineReducers: Wykorzystanie funkcji combineReducers w Redux do łączenia wielu reducerów.
12. State preloading and saving: Implementacja zapisywania i wczytywania wcześniej zapisanego stanu w Redux.
13. Project 0.0 – introducting redux to handle laoders: Wprowadzenie do projektu aplikacji kursowej biblioteki Redux do obsługi komponnetów ładowania (spinners/loaders).
14. Projekt 0.1 – refaktoryzacja: Refaktoryzacja kodu w projekcie.

👀 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!

Moduł kursu "Material UI — ekosystem Reacta" skupia się na wykorzystaniu biblioteki Material UI do tworzenia interfejsów w React.

📚 Zawartość modułu

Moduł "Material UI — ekosystem Reacta" jest podzielony na 24 lekcje:

1. Wstęp i instalacja: Wprowadzenie do Material UI i instalacja biblioteki.
2. Button component: Wykorzystanie komponentu Button w Material UI do tworzenia interaktywnych przycisków.
3. MUI Icons: Użycie ikon z biblioteki MUI Icons w naszych aplikacjach React.
4. Theme – wprowadzenie: Poznanie możliwości konfiguracji theme'ów (m.in. kolorystycznych) w Material UI i ich zastosowanie w projektach.
5. Theme – palette: Dostosowywanie palety kolorów w theme'ach Material UI.
6. Theme – Typography: Stylizacja typografii w theme'ach Material UI.
7. Grid: Wykorzystanie komponentu Grid w Material UI do tworzenia elastycznego i responsywnego układu komponentów na stronie.
8. Stack & Divider: Użycie komponentów Stack i Divider do uporządkowania i separacji elementów w interfejsie.
9. makeStyles – basics: Podstawowe korzystanie z hooka makeStyles w Material UI do definiowania niestandardowych stylów.
10. makeStyles – nested elements: Tworzenie zagnieżdżonych stylów za pomocą makeStyles w Material UI.
11. makeStyles – theme & props: Wykorzystanie tematu i propsów w hooku makeStyles w Material UI.
12. MUI System – Box & sx prop: Zastosowanie komponentu Box i właściwości sx do tworzenia stylowania komponentów.
13. MUI System – nested elements: Stylowanie zagnieżdżonych elementów w Material UI System.
14. MUI System – sx in custom props: Wykorzystanie właściwości sx w niestandardowych propsach w Material UI System.
15. MUI System – theme & props: Wykorzystanie tematu i propsów w Material UI System.
16. Shorthand properties and values in sx: Skrócone właściwości i wartości w stylach sx w Material UI.
17. React component MUI template: Tworzenie szablonu komponentu React z wykorzystaniem Material UI.
18. MUI System – styled function: Wykorzystanie funkcji styled w Material UI System.
19. Project 0.0 – data setup: Konfiguracja projetu wykorzystującego wiedze z modułu.
20. Project 0.1 – Routing: Obsługa routingu w projekcie.
21. Project 0.2 – CourseLayout: Tworzenie elementu odpowiadającego za pozycjonowanie (layout) w projekcie.
22. Project 0.3 – Course tile and sidebar: Tworzenie karty kursu i menu bocznego w projekcie.
23. Project 0.4 – Player and not found handling: Obsługa odtwarzacza wideo oraz obsługa błędów w projekcie.
24. Project 0.5 – Refactor: Końcowa refaktoryzacja kodu.

👀 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!

Moduł kursu "React Hook Form — ekosystem Reacta" wprowadza do używania gotowych rozwiązań w React do tworzenia formularzy. Sam React odpowiada wyłącznie za interfejs. Nie ma wbudowanych wielu elementów potrzebnych do stworzenia pełnoprawnej aplikacji. Możemy wymyślać koło na nowo albo... skorzystać z gotowych i sprawdzonych rozwiązań! :)

📚 Zawartość modułu

Moduł "React Hook Form — ekosystem Reacta" jest podzielony na 15 lekcji:

1. Wstęp: Poznanie konceptu React Hook Form i potrzeby korzystania z gotowych rozwiązań w tworzeniu aplikacji React.
2. Registering fields: Rejestracja pól formularza, umożliwiająca ich manipulację.
3. Validation: Walidacja pól formularza w celu sprawdzenia poprawności wprowadzonych danych.
4. Displaying validation messages: Wyświetlanie komunikatów walidacyjnych informujących o błędach w formularzu.
5. Controller: Wykorzystanie komponentu "Controller" do zarządzania danymi pól formularza.
6. Validation and revalidation mode: Poznanie trybów walidacji i ponownej walidacji pól formularza.
7. Conditional fields: Tworzenie pól warunkowych w formularzu.
8. Lifting state up — FormProvider & useFormContext: Wynoszenie stanu formularza do komponentów-rodziców za pomocą "FormProvider" i "useFormContext".
9. Saving form state — default values: Zapisywanie stanu formularza — domyślne wartości pól.
10. Resetting form state: Resetowanie stanu formularza do wartości początkowych.
11. Project 0.0 – RecoverPasswordForm: Tworzenie komponentu formularza odzyskiwania hasła przy użyciu react-hook-form.
12. Project 0.1 – LoginForm: Tworzenie formularza logowania przy użyciu react-hook-form.
13. Project 0.2 – CreateAccountForm: Tworzenie formularza tworzenia konta przy użyciu react-hook-form.
14. Project 1.0 – ProfileForm: Tworzenie formularza profilu przy użyciu react-hook-form.
15. Project 1.1 – Uploading avatar: Obsługa wysyłania awatara przy użyciu react-hook-form.

👀 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!

Moduł kursu programowania o numerze 16 zatytułowany "React Router — ekosystem Reacta" wprowadza programistów w świat React Router, część ekosystemu biblioteki React, która umożliwia tworzenie dynamicznej nawigacji i zarządzanie trasami w aplikacjach React.

📚 Zawartość modułu

Moduł "React Router — ekosystem Reacta" jest podzielony na 13 lekcji:

1. Wstęp i instalacja — Wprowadzenie do tematu React Router i instrukcje instalacji.
2. Router Routes & Route — Wykorzystanie komponentów Router, Routes i Route do definiowania routów (ścieżek) w aplikacji.
3. Link & NavLink — Korzystanie z komponentów Link i NavLink do nawigacji między ścieżkami.
4. URL params & useParams — Wykorzystanie parametrów URL i hooka useParams do odczytywania i przekazywania danych w trasach.
5. Nested routes — Tworzenie zagnieżdżonych ścieżek w aplikacji.
6. Debouncing URL params change — Wprowadzenie funkcji debounce w celu opóźnionego reagowania na zmiany parametrów URL.
7. Dynamic routes — Tworzenie dynamicznych ścieżek w zależności od posiadanych/pobranych danych.
8. Index routes — Definiowanie głównych ścieżek w aplikacji.
9. 404 routes — Obsługa błędu 404 w przypadku braku pasującej ścieżki.
10. HashRouter vs BrowserRouter — Porównanie i wybór pomiędzy dwoma dostępnymi rodzajami ruterów.
11. Fetching on URL param change — Pobieranie danych przy zmianie parametrów URL.
12. Fetching on URL param change part 2 — Kontynuacja pobierania danych przy zmianie parametrów URL.
13. Project 0 - Implementacja aplikacji na podstawie wiedzy zdobytej w module.

👀 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!

Moduł kursu o numerze 15 zatytułowany "React — hooks + context" wprowadza uczestników w hooki i context, dwie znaczne nowości biblioteki React, które zdobyły popularność w 2019 roku, przedstawiając je jako niezbędne narzędzia przed nauką korzystania z kolejnych bibliotek w ekosystemie React'a.

📚 Zawartość modułu

Moduł "React — hooks + context" jest podzielony na 32 lekcje:

1. Wstęp — Wprowadzenie do tematu hooków i contextu w bibliotece React.
2. useState — Wykorzystanie - Wyorzystanie hooka useState do zarządzania stanem w komponentach funkcyjnych.
3. Hook vs Class — Porównanie hooków i klasowych komponentów w React.
4. Custom useState hook — Tworzenie własnej implementacji hooka useState w celu odkrycia jak działa on "pod maską".
5. Classes & reusable logic — Wykorzystanie klasowych komponentów i reużywalnej logiki.
6. Hooks & reusable logic — custom hooks — Wykorzystanie hooków i tworzenie niestandardowych hooków dla reużywalności logiki.
7. useEffect — Wykorzystanie hooka useEffect do zarządzania efektami ubocznymi w komponentach funkcyjnych.
8. useEffect — componentDidMount — Wykorzystanie hooka useEffect do emulowania metody componentDidMount.
9. useEffect — componentWillUnmount — Wykorzystanie hooka useEffect do emulowania metody componentWillUnmount.
10. useEffect — using dependencies — Wykorzystanie hooka useEffect zależnościami.
11. Fetch using hooks — Wykorzystanie hooków do wykonywania żądań fetch.
12. useCallback — Wykorzystanie hooka useCallback do zoptymalizowania wydajności komponentów.
13. Custom hook for loading states — Tworzenie niestandardowego hooka do zarządzania stanem ładowania.
14. react-use - Korzystanie z biblioteki react-use do wykorzystania gotowych hooków.
15. useMemo — Wykorzystanie hooka useMemo do zapamiętywania obliczeń.
16. useRef — Wykorzystanie hooka useRef do zarządzania referencjami do elementów w komponentach.
17. Rules of hooks – Zsady korzystania z hooków w React.
18. Stale closures in pure JS — Omówienie problemu występowania tak zwanych "stale closures" w czystym JavaScript.
19. Stale closures React components —  Omówienie problemu występowania stale closures w komponentach React.
20. Passing props multiple levels — theme — Przekazywanie propsów na wielu poziomach komponentów.
21. Context.Provider & Context.Consumer — Wykorzystanie Context.Provider i Context.Consumer w zarządzaniu stanem aplikacji.
22. Context default values — Ustawianie domyślnych wartości dla kontekstu.
23. Changing context dynamically — Dynamiczna zmiana kontekstu.
24. useContext — Wykorzystanie hooka useContext do odczytywania kontekstu.
25. Custom context providers — Tworzenie własnych dostawców kontekstu.
26. Project 0 — refactor PageRecoverPassword — Refaktoryzacja komponentu PageRecoverPassword z komponentów klasowych na hooki.
27. Project 0.1 — refactor PageCoursesList — Refaktoryzacja komponentu PageCoursesList z komponentów klasowych na hooki.
28. Project 0.2 — refactor PageLogin — Refaktoryzacja komponentu PageLogin z komponentów klasowych na hooki.
29. Project 0.3 — refactor PageCreateAccount — Refaktoryzacja komponentu PageCreateAccount z komponentów klasowych na hooki.
30. Project 0.4 – refactor App – Refaktoryzacja komponentu App z komponentów klasowych na hooki.
31. Project 0.5 — RouterContext — Wykorzystanie kontekstu routera w projekcie.
32. Project 0.6 — UserContext — Wykorzystanie kontekstu użytkownika w projekcie.

👀 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!

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!

Moduł kursu programowania o numerze 13, zatytułowany "Testy asynchroniczne", składa się z lekcji, które połączą naszą wiedzę na temat asynchroniczności i testowania kodu. Dowiemy się, jak pisać testy dla kodu obsługującego zapytania asynchroniczne, gdzie czas ich trwania jest nieznany zanim zapytanie nie zostanie zakończone.

📚 Zawartość modułu

Moduł "Testy asynchroniczne" jest podzielony na 12 lekcji:

1. Konfiguracja create-react-app - empty template: Poznamy konfigurację początkową projektu przy użyciu create-react-app i pustego szablonu.
2. expect.assertions: Nauczymy się korzystać z metody expect.assertions do tworzenia asercji (założeń) w testach.
3. callbacks: Poznamy jak testować kodu wykorzystujący callbacki.
4. promises: Poznamy sposób testowania kodu wykorzystującego obietnice.
5. multiple promises: Nauczymy się testować kod obsługujący wiele obietnic jednocześnie.
6. resolves rejects: Dowiemy się, jakie funkcje pomocnicze oferuje Jest do testowania obietnic.
7. async await: Poznamy jak testować kod oparty na składni async/await.
8. mocking fetch: Nauczymy się symulować wywołania fetch przy pomocy mocków w testach.
9. Mocking setTimeout: Poznamy technikę mockowania funkcji setTimeout w testach.
10. Mocking setInterval: Dowiemy się, jak mockować funkcję setInterval w testach.
11. Testowanie mini aplikacji ładującej dane — część 1: Przećwiczymy testowanie małej aplikacji, która pobiera dane — część 1.
12. Testowanie mini aplikacji ładującej dane — część 2: Kontynuacja testowania małej aplikacji, która pobiera dane — część 2.

👀 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!

Moduł kursu o numerze 12 nosi nazwę "Asynchroniczność" i jest jednym z najważniejszych tematów, który zostanie omówiony.

W tej części kursu dowiesz się, jak pobierać dane z serwera oraz jak radzić sobie z asynchronicznym wykonywaniem kodu w języku JavaScript. Będziemy również analizować zdarzenia związane z komunikacją z serwerem i jak odpowiednio zareagować na odpowiedzi serwera.

Wcześniej skupialiśmy się wyłącznie na pracy z kodem i danymi, które sami wcześniej napisaliśmy lub reagowaliśmy na działania użytkownika naszej aplikacji. W tym rozdziale dowiemy się, jak pobierać dane z serwerów, przetwarzać je i wyświetlać, a także jak postępować, gdy nie uda się pobrać danych. Poznamy również standardy komunikacji z serwerem, takie jak REST.

📚 Zawartość modułu

Moduł "Asynchroniczność" jest podzielony na 93 lekcji:

1. Kolejność wykonywania kodu – przypomnienie: Przypomnienie o kolejności, w jakiej wykonywany jest kod w języku JavaScript.
2. setTimeout: Wykorzystanie funkcji setTimeout do opóźnienia wykonywania kodu.
3. Event loop: Poznanie zasady działania pętli zdarzeń (event loop) w przeglądarkach.
4. Callbacki w praktyce: Zastosowanie callbacków w praktyce przy obsłudze asynchronicznych operacji.
5. Koncepcja obietnic w JS: Zapoznanie się z koncepcją obietnic (promises) i ich roli w asynchronicznym kodzie.
6. new Promise: Tworzenie własnych obietnic przy pomocy konstruktora Promise.
7. Zamawiamy piwo: Anegdota przedstawiająca koncepcje promisów przy pomocy zamawiania piwa w barze.
8. Callback hell: Omówienie problemu callback hell i sposobów na jego uniknięcie.
9. then(): Korzystanie z metody then() do obsługi wyników zakończonych obietnic.
10. catch(): Obsługa błędów przy użyciu metody catch() dla obietnic.
11. Chaining – łańcuchowanie: Łączenie wielu operacji asynchronicznych.
12. Microtasks and Macrotasks: Różnica między microtasks a macrotasks w kontekście kolejności wykonywania kodu.
13. Fetch: Wykorzystanie funkcji fetch do pobierania danych z serwera.
14. Custom fetch: Implementacja własnej funkcji fetch dla lepszej kontroli nad zapytaniami sieciowymi.
15. Aplikacja ładująca dane: Tworzenie aplikacji, która pobiera i wyświetla dane z serwera.
16. Aplikacja ToDo ładująca dane: Rozbudowa aplikacji ToDo o funkcję pobierania danych z serwera.
17. Aplikacja ToDo ładująca dane - część 2: Kontynuacja rozbudowy aplikacji ToDo o funkcję pobierania danych z serwera.
18. Aplikacja przeładowująca użytkowników: Implementacja funkcjonalności wyświetlania i przeładowywania użytkowników w nowej aplikacji.
19. Filtrowanie użytkowników: Dodanie możliwości filtrowania użytkowników w aplikacji.
20. Podstawy HTTP: Omówienie podstawowych pojęć związanych z protokołem HTTP.
21. HTTP - status codes & headers: Poznanie różnych kodów statusu i nagłówków HTTP oraz ich znaczenia.
22. HTTP - REST API & CRUD: Zrozumienie REST API i operacji CRUD (Create, Read, Update, Delete) w kontekście HTTP.
23. HTTP - Postman - instalacja: Instrukcja instalacji narzędzia Postman do testowania i debugowania interfejsów HTTP.
24. Open Weather Map API: Wykorzystanie Open Weather Map API do pobierania informacji o prognozie pogody.
25. Aplikacja pogodowa - część 1: Tworzenie aplikacji pogodowej, która korzysta z Open Weather Map API.
26. Konfiguracja webpacka przez create-react-app: Konfiguracja środowiska developerskiego z użyciem narzędzia create-react-app.
27. Aplikacja pogodowa - część 2: Kontynuacja rozbudowy aplikacji pogodowej o nowe funkcje.
28. Aplikacja pogodowa - część 3: Dalsze ulepszanie aplikacji pogodowej, dodawanie animacji i stylizacji.
29. Debounce: Zastosowanie debouncingu do lepszej obsługi zdarzeń asynchronicznych.
30. Aplikacja pogodowa - część 4: Rozbudowa aplikacji pogodowej o funkcję wyszukiwania i filtrowania danych.
31. Aplikacja pogodowa - część 5: Finalizacja aplikacji pogodowej, optymalizacja i testowanie.
32. Firebase – wprowadzenie: Wprowadzenie do platformy Firebase i jej możliwości.
33. Firebase – REST API - PUT: Wykorzystanie metody PUT w REST API Firebase do aktualizacji danych.
34. Firebase – REST API - POST: Dodawanie nowych danych za pomocą metody POST w REST API Firebase.
35. Firebase – REST API - PATCH: Aktualizacja wybranych pól danych przy użyciu metody PATCH w REST API Firebase.
36. Firebase – REST API - DELETE: Usuwanie danych z bazy przy użyciu metody DELETE w REST API Firebase.
37. Firebase – REST API - GET & filtrowanie: Pobieranie danych z bazy Firebase i filtrowanie ich zgodnie z określonymi kryteriami.
38. Counter z bazą danych 1: Implementacja licznika z wykorzystaniem bazy danych w Firebase.
39. Counter z bazą danych 2: Kontynuacja rozbudowy licznika z wykorzystaniem bazy danych w Firebase.
40. Własny "Postman" część 1 – Textarea: Tworzenie własnej aplikacji podobnej do Postman z wykorzystaniem elementu textarea.
41. Własny "Postman" część 2 – App state: Implementacja stanu aplikacji w aplikacji typu "Postman".
42. Własny "Postman" część 3 – Select: Dodanie elementu Select do aplikacji "Postman" dla wyboru typu żądania.
43. Własny "Postman" część 4 – Input & Button: Dodanie pól Input i przycisku do aplikacji "Postman" w celu wprowadzania danych.
44. Własny "Postman" część 5 – Wysyłanie żądań: Implementacja funkcji wysyłania żądań w aplikacji "Postman".
45. Własny "Postman" część 6 – Dopracowanie aplikacji "Postman".
46. ToDo lista z bazą danych: Tworzenie aplikacji ToDo listy z wykorzystaniem bazy danych.
47. ToDo lista z bazą danych – część 2: Kontynuacja rozbudowy aplikacji ToDo listy z bazą danych.
48. ToDo lista z bazą danych – część 3: Dalsza rozbudowa aplikacji ToDo listy z bazą danych.
49. ToDo lista CRUD – część 1: Wprowadzenie do operacji CRUD (Create, Read, Update, Delete) w aplikacji ToDo listy.
50. ToDo lista CRUD – część 2 - READ: Implementacja operacji odczytu (READ) w aplikacji ToDo listy.
51. ToDo lista CRUD – część 3 - CREATE: Implementacja operacji tworzenia (CREATE) w aplikacji ToDo listy.
52. ToDo lista CRUD – część 4 - UPDATE: Implementacja operacji aktualizacji (UPDATE) w aplikacji ToDo listy.
53. ToDo lista CRUD – część 5 - DELETE: Implementacja operacji usuwania (DELETE) w aplikacji ToDo listy.
54. ToDo lista CRUD – część 6: Rozbudowywanie aplikacji ToDo listy z operacjami CRUD.
55. Jak działa autoryzacja w sieci – anegdota: Przykładowa anegdota ilustrująca działanie mechanizmu autoryzacji w sieci.
56. Jak działa autoryzacja w sieci – diagram: Przedstawienie diagramu, który obrazuje działanie autoryzacji w sieci.
57. Jak wygląda JWT: Omówienie struktury i wyglądu tokena JWT (JSON Web Token).
58. Konfiguracja autentykacji w Firebase: Instrukcja konfiguracji mechanizmu autentykacji w Firebase.
59. Konfiguracja autoryzacji w Firebase: Omówienie procesu konfiguracji mechanizmu autoryzacji w Firebase.
60. Rejestracja przez REST API: Implementacja funkcjonalności rejestracji użytkownika przez REST API.
61. Logowanie przez REST API: Implementacja funkcjonalności logowania użytkownika przez REST API.
62. Dostęp do autoryzowanego zasobu przez REST API: Przedstawienie sposobu uzyskiwania dostępu do autoryzowanego zasobu przy użyciu REST API.
63. Logowanie w JS: Przykład implementacji funkcjonalności logowania użytkownika w języku JavaScript.
64. Rejestracja w JS: Przykład implementacji funkcjonalności rejestracji użytkownika w języku JavaScript.
65. Dekodowanie tokenu JWT: Przykład dekodowania tokenu JWT w celu uzyskania informacji o użytkowniku.
66. Pobieranie danych użytkownika: Przykład implementacji funkcjonalności pobierania danych użytkownika z bazy danych.
67. Zmiana danych użytkownika: Przykład implementacji funkcjonalności zmiany danych użytkownika w bazie danych.
68. Zmiana hasła: Przykład implementacji funkcjonalności zmiany hasła użytkownika w bazie danych.
69. Usuwanie użytkownika: Przykład implementacji funkcjonalności usuwania użytkownika z bazy danych.
70. Autoryzowane zapytania w JS: Przykład implementacji autoryzowanych zapytań do serwera w języku JavaScript.
71. Zapisywanie tokenów w localStorage: Przedstawienie sposobu zapisywania tokenów autoryzacyjnych w pamięci przeglądarki za pomocą localStorage.
72. Sprawdzanie stanu zalogowania użytkownika: Implementacja funkcjonalności sprawdzania stanu zalogowania użytkownika w aplikacji.
73. Wylogowywanie: Przykład implementacji funkcjonalności wylogowywania użytkownika z aplikacji.
74. Odświeżanie tokenów podczas wykonywania zapytań: Przedstawienie sposobu odświeżania tokenów autoryzacyjnych podczas wykonywania zapytań do serwera.
75. Wylogowywanie gdy serwer zwróci 401: Implementacja automatycznego wylogowywania użytkownika w przypadku otrzymania odpowiedzi 401 od serwera.
76. Zmienne środowiskowe: Omówienie używania zmiennych środowiskowych w aplikacjach webowych.
77. Komponent Auth cz.1: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 1.
78. Komponent Auth cz. 2: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 2.
79. Komponent Auth cz. 3: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 3.
80. Komponent Auth cz 4: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 4.
81. Komponent logowania: Implementacja komponentu logowania w aplikacji.
82. Komponent rejestracji: Implementacja komponentu rejestracji w aplikacji.
83. ToDo lista z autoryzacją cz. 1: Rozszerzanie aplikacji ToDo listy o funkcje autoryzacji — część 1.
84. ToDo lista z autoryzacją cz. 2: Rozszerzanie aplikacji ToDo listy o funkcje autoryzacji — część 2.
85. Ustawianie reguł autoryzacji w Firebase: Omówienie procesu konfiguracji reguł autoryzacji w Firebase.
86. Promise.all(): Wykorzystanie funkcji Promise.all() do równoczesnego wykonywania wielu obietnic.
87. Promise.all() - rejection: Obsługa odrzucenia obietnic w funkcji Promise.all().
88. Promise.all() - własna implementacja: Implementacja własnej funkcji Promise.all().
89. Promise.allSettled(): Wykorzystanie funkcji Promise.allSettled() do obsługi wielu obietnic niezależnie od ich stanu.
90. Promise.race(): Wykorzystanie funkcji Promise.race() do obsługi wielu obietnic i zwrócenie wartości najwcześniej zakończonej.
91. Promise.any(): Wykorzystanie funkcji Promise.any() do obsługi wielu obietnic i zwrócenie wartości pierwszej zakończonej sukcesem.
92. async await: Wykorzystanie składni async/await do obsługi asynchronicznych operacji.
93. Async await catching errors: Obsługa błędów przy użyciu składni async/await.

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

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!

Moduł "Wprowadzenie do testowania kodu" koncentruje się na znaczeniu i podstawach testowania kodu. Dowiemy się, dlaczego warto testować nasze skrypty i jak testowanie może pomóc nam w zabezpieczaniu naszego kodu przed błędami. Poznamy różne metody i narzędzia, które umożliwią nam testowanie naszych projektów. Upraszczając, można powiedzieć, że testy będą za nas "klikać" i sprawdzać, czy nasz kod działa poprawnie :)

📚 Zawartość modułu

Moduł "Wprowadzenie do testowania kodu" jest podzielony na 14 lekcji:

1. Wstęp: Zapoznamy się z tematyką testowania kodu i dowiemy się, dlaczego jest to ważne w procesie programowania.
2. Pierwszy test w czystym JS: Poznamy podstawy tworzenia prostych testów w czystym JavaScript.
3. orderTotal: Stworzymy funkcje liczącą sumę zamówienia w sklepie internetowym i nauczymy się tworzyć testy dla tej funkcji.
4. Test helpers: Stworzymy w czystym JS funkcje pomocnicze, które pomogą nam w tworzeniu czytelnych i efektywnych testów.
5. orderTotal + free shipping: Rozszerzymy nasze testy dla funkcji orderTotal o przypadki, w których mamy darmową wysyłkę.
6. Jest: Przedstawimy narzędzie Jest, popularny framework do testowania w języku JavaScript.
7. orderTotal + Jest: Nauczymy się tworzyć testy dla funkcji orderTotal przy użyciu narzędzia Jest.
8. Testowanie klas: Dowiemy się, jak testować klasy w naszych projektach i tworzyć testy dla ich metod.
9. Setup and teardown: Poznamy koncepty setup i teardown, które pozwalają nam przygotować środowisko testowe przed wykonaniem testów i posprzątać po nich.
10. Functions mocks: Omówimy technikę mockowania funkcji i jak może ona być przydatna w testowaniu.
11. Class methods mocks: Nauczymy się mockować metody klas i jak można to wykorzystać w testowaniu.
12. Testowanie paczki NPM - część 1: Przeanalizujemy, jak testować kod paczki, którą w poprzednim module opublikowaliśmy w NPM.
13. Testowanie paczki NPM - część 2: Kontynuacja tematu testowania własnej paczki NPM.
14. Git Hooks – Husky: Przedstawimy użycie hooków w GIT, co umożliwi nam uruchamianie testów np. tuż przed zapisaniem commita bu upewnić się, że kod, który chcemy zapisać w repozytorium działa poprawnie.

👀 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!

JavaScript, od 1995 roku, kiedy został opublikowany, przeszedł bardzo długą drogę do stanu, w którym jest dziś. Największe zmiany zaszły stosunkowo niedawno, w 2015 roku, gdy wydana została wersja 6 znana jako ECMAScript 6 lub w skrócie ES6. Za pomocą nazwy ES6+ lub ESNext określa się wszystkie nowe wersje JS-a, czyli te wydane od 2015 roku. Dowiemy się, jakie zmiany zaszły, z czego możemy swobodnie korzystać, na co trzeba uważać i co najważniejsze — jaką wersję JS-a obsługują przeglądarki.

📚 Zawartość modułu

Moduł "Moduły, NPM i ES6+" jest podzielony na 42 lekcje:

1. Wstęp: Lekcja wprowadza do tematu modułów, NPM i ES6+, prezentując ich znaczenie i wpływ na rozwój języka JavaScript.
2. Podstawy działania modułów: Omawia podstawowe koncepcje modułów w JavaScript, takie jak eksportowanie i importowanie funkcji i zmiennych.
3. Importy i exporty nazwane i domyślne: Pokazuje różne sposoby eksportowania i importowania elementów w modułach, zarówno za pomocą nazwanych, jak i domyślnych eksportów.
4. Symulacja działania modułu za pomocą funkcji: Odczarowujemy "czarną skrzynkę" jaką dla wielu są moduły, przedstawiając metodę ich działania za pomocą starej dobrej funkcji w czystym JS!
5. Import całej zawartości modułu na raz: Wyjaśnia możliwość importowania całego modułu jednocześnie, co ułatwia korzystanie z niektórych bibliotek i zestawów narzędzi.
6. Projekt 0 - counter z użyciem modułów: Praktyczne zastosowanie modułów w prostym projekcie licznika, aby zaprezentować ich działanie w praktyce.
7. Projekt 1 - counter z interfejsem z użyciem modułów: Kontynuacja poprzedniego projektu, dodając interfejs użytkownika przy użyciu modułów.
8. Instalacja NodeJS: Instrukcje dotyczące instalacji środowiska Node.js na Windows, MacOS i Linux.
9. NPM inicjalizacja i instalacja zależności: Omawia inicjalizację projektu przy użyciu NPM oraz proces instalacji i zarządzania zależnościami.
10. Użycie modułów zainstalowanych przez NPM: Pokazuje, jak korzystać z zewnętrznych modułów zainstalowanych przez NPM w naszym projekcie.
11. Webpack: Wprowadzenie do narzędzia Webpack, które umożliwia pakowanie i budowanie aplikacji JavaScript.
12. Webpack - HtmlWebpackPlugin: Wyjaśnia, jak skonfigurować HtmlWebpackPlugin w Webpacku, aby generować dynamicznie pliki HTML.
13. Webpack - DevServer: Przedstawia DevServer w Webpacku, który zapewnia szybkie środowisko deweloperskie z automatycznym odświeżaniem strony.
14. Webpack - importowanie CSS: Demonstruje, jak importować i zarządzać stylami CSS w projekcie za pomocą Webpacka.
15. Webpack - importowanie zdjęć lub innych zasobów: Wyjaśnia, jak importować i obsługiwać grafiki, zdjęcia i inne zasoby w projekcie za pomocą Webpacka.
16. Webpack - bundle hash i CleanWebpackPlugin: Omawia techniki tworzenia unikalnych hashów dla plików wynikowych i czyszczenia folderu wyjściowego za pomocą CleanWebpackPlugin w Webpacku.
17. Babel - wprowadzenie: Przedstawia narzędzie Babel, które umożliwia transpilację kodu ES6+ na wcześniejsze wersje JavaScript.
18. Babel - transpilacja za pomocą CLI: Wyjaśnia, jak używać Babela z interfejsem wiersza poleceń (CLI) do transpilacji kodu JavaScript.
19. Webpack - babel-loader: Pokazuje, jak skonfigurować babel-loader w Webpacku, aby automatycznie transpilować kod przy budowaniu.
20. Webpack - struktura folderów: Przedstawia sugerowaną strukturę folderów dla projektu opartego na Webpacku, zapewniającą czytelność i skalowalność.
21. Webpack - source maps: Wyjaśnia, jak skonfigurować source maps w Webpacku, aby ułatwić debugowanie kodu w przeglądarce.
22. ES6 - lista zmian: Przegląd zmian wprowadzonych w ES6, takich jak nowe składnie, metody i funkcje, które znacząco ulepszają JavaScript.
23. ES6 - extended object literals: Omawia rozszerzone literały obiektowe w ES6, które umożliwiają bardziej wyrafinowane tworzenie i inicjalizację obiektów.
24. ES6 - template strings: Wyjaśnia template strings w ES6, które umożliwiają łączenie dynamicznych wartości z ciągami znaków w bardziej czytelny sposób.
25. ES6 - destrukturyzacja tablic: Pokazuje destrukturyzację tablic w ES6, umożliwiając wygodne wyodrębnianie wartości z tablicy do oddzielnych zmiennych.
26. ES6 - destrukturyzacja tablic w parametrach: Wyjaśnia, jak destrukturyzować tablice w parametrach funkcji, co ułatwia przekazywanie danych do funkcji.
27. ES6 - destrukturyzacja obiektów: Przedstawia destrukturyzację obiektów w ES6, umożliwiając wygodne wyciąganie wartości z obiektu do zmiennych o odpowiadających nazwach.
28. ES6 - destrukturyzacja obiektów z innymi nazwami zmiennych: Omawia technikę destrukturyzacji obiektów z przypisaniem do zmiennych o innych nazwach niż oryginalne właściwości.
29. ES6 - użycie default, rest i spread w funkcjach: Przedstawia zastosowanie konstrukcji default, rest i spread w funkcjach w ES6, które wprowadzają nowe możliwości manipulacji danymi.
30. ES6 - nowe właściwości wbudowanych obiektów: Wyjaśnia nowe właściwości i metody dodane do wbudowanych obiektów w ES6.
31. ES7 - lista zmian: Przegląd zmian wprowadzonych w ES7, takich jak metoda includes dla tablic.
32. ES8 - lista zmian: Omawia zmiany wprowadzone w ES8.
33. ES9 - lista zmian: Przedstawia zmiany wprowadzone w ES9.
34. ES10 - lista zmian: Wyjaśnia nowości w ES10.
35. ES11 - globalThis: Przedstawia dodanie globalThis w ES11, co umożliwia łatwiejszy dostęp do globalnego obiektu niezależnie od środowiska wykonawczego.
36. ES11 - optional chaining: Omawia operator optional chaining wprowadzony w ES11, który ułatwia dostęp do zagnieżdżonych właściwości obiektów, eliminując potrzebę sprawdzania null lub undefined.
37. ES11 - nullish coalescing: Wyjaśnia operator nullish coalescing w ES11, który umożliwia wybór wartości domyślnej tylko w przypadku, gdy wartość jest null lub undefined.
38. Publikacja w NPM — przygotowanie: Przedstawia proces przygotowania paczki do publikacji w rejestrze NPM, w tym konfigurację pliku package.json.
39. Publikacja w NPM: Wyjaśnia kroki niezbędne do opublikowania pakietu w rejestrze NPM, aby inni programiści mogli go instalować i używać.
40. Wersjonowanie w NPM: Omawia zasady wersjonowania w NPM, w tym semantyczną wersję i zarządzanie zależnościami między paczkami.
41. Łatwiejsza publikacja z NP: Pokazuje narzędzie NP, które ułatwia proces publikacji w NPM, zapewniając automatyczną aktualizację wersji i wykonywanie innych rutynowych zadań.
42. Instalacja nowych wersji paczek: Wyjaśnia, jak instalować nowe wersje paczek zależności i zarządzać ich aktualizacjami w projekcie.

👀 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!

OOP, czyli programowanie obiektowe, to sposób tworzenia kodu za pomocą obiektów, które łączą stan (dane) i akcje (operacje). W tej lekcji nauczysz się podstaw programowania obiektowego, które jest standardem w wielu językach, i choć JavaScript nie wymusza tego stylu, często spotykamy się z elementami programowania obiektowego w praktyce.

📚 Zawartość modułu

Moduł "OOP" jest podzielony na 30 lekcji:

1. Wstęp: Wprowadzenie do programowania obiektowego i znaczenia OOP w kontekście tworzenia kodu.
2. Krótkie przypomnienie właściwości obiektów: Przypomnienie podstawowych pojęć i właściwości obiektów w programowaniu.
3. Counter — przykładowa aplikacja z wieloma instancjami: Tworzenie aplikacji licznika jako przykładu obiektu z możliwością tworzenia wielu instancji.
4. this - kontekst wywołania funkcji: Zrozumienie działania słowa kluczowego "this" i jego zastosowania w funkcjach.
5. Factory functions: Wykorzystanie fabryk funkcji do tworzenia obiektów.
6. Funkcje konstruktora: Użycie funkcji konstruktora do tworzenia obiektów.
7. proto i prototype: Omówienie prototypów i ich roli w dziedziczeniu w JavaScript.
8. Projekt 0 - licznik w drzewie DOM: Implementacja licznika w drzewie DOM jako praktycznego zastosowania OOP.
9. Zmiana kontekstu - bind, call i apply: Zmiana kontekstu funkcji za pomocą metod bind, call i apply.
10. Zmiana kontekstu i argumenty: Omówienie zmiany kontekstu oraz przekazywania argumentów w funkcjach.
11. Funkcje strzałkowe — arrow functions: Wykorzystanie funkcji strzałkowych w JavaScript.
12. Funkcje strzałkowe — różnice w działaniu: Przedstawienie różnic w działaniu funkcji strzałkowych w porównaniu do tradycyjnych funkcji.
13. Wartość this w funkcjach wyższego rzędu — część 1: Omówienie zachowania słowa kluczowego "this" w funkcjach wyższego rzędu.
14. Wartość this w funkcjach wyższego rzędu — część 2: Kontynuacja omawiania zachowania "this" w funkcjach wyższego rzędu.
15. Wartość this w funkcjach wyższego rzędu — część 3: Ostatnia część omawiania zachowania "this" w funkcjach wyższego rzędu.
16. Projekt 0.1 - funkcja strzałkowa: Zastosowanie funkcji strzałkowej w projekcie licznika.
17. Tworzenie nowych obiektów na podstawie innych — spread i Object.assign: Wykorzystanie operatora spread i metody Object.assign do tworzenia nowych obiektów.
18. Object.prototype: Zrozumienie roli Object.prototype w dziedziczeniu w JavaScript.
19. Object.create: Wykorzystanie metody Object.create do tworzenia obiektów na podstawie innego obiektu.
20. Projekt 0.2 - toString i valueOf: Implementacja metod toString i valueOf w projekcie licznika.
21. Projekt 1 - dziedziczenie na przykładzie licznika: Przykład dziedziczenia w projekcie licznika.
22. Projekt 1.1 - reużywanie obiektów w projekcie: Wykorzystanie reużywalności obiektów w projekcie licznika.
23. Łańcuch prototypów: Omówienie pojęcia łańcucha prototypów w dziedziczeniu obiektów.
24. Słowo kluczowe new — własna implementacja: Tworzenie własnej implementacji słowa kluczowego "new" w JavaScript.
25. Klasy — słowo kluczowe class i constructor: Wykorzystanie słowa kluczowego "class" i konstruktora do tworzenia klas.
26. Klasy — pola klas i ciekawe właściwości: Przedstawienie pól klas i innych ciekawych właściwości klas w JavaScript.
27. Dziedziczenie z użyciem klas — extends i super: Implementacja dziedziczenia za pomocą słów kluczowych "extends" i "super".
28. Projekt 1.2 - użycie klas: Praktyczne zastosowanie klas w projekcie licznika.
29. Podsumowanie metod tworzenia obiektów: Podsumowanie różnych metod tworzenia obiektów w JavaScript.
30. Dodatek — Aplikacja w JavaScript: Dodatkowe informacje na temat tworzenia aplikacji w JavaScript.

👀 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!

Nie da się napisać kodu bez błędów, więc musimy sobie z nimi radzić. Do takich zadań jesteśmy "uzbrojeni" w narzędzie o nazwie "debugger", który pomaga nam te błędy zlokalizować. Umysł człowieka jest bardzo "jednowątkowy" - nie potrafi skupić się na wielu rzeczach naraz. Często zdarza się, że pisząc nowy kod, zepsujemy stary, albo nie mamy pojęcia, dlaczego kod, który w jednym miejscu działał, w innym nie działa. Za pomocą wbudowanego w przeglądarkę narzędzia debuggera, dowiemy się jak rozwiązywać takie problemy! 🐛

📚 Zawartość modułu

Moduł "Debugger" jest podzielony na 15 lekcji:

1. Wstęp: Wprowadzenie do debuggowania kodu i znaczenia narzędzia debugger.
2. Aplikacja do debuggowania: Stworzenie aplikacji z błędami do omówienia w dalszej części kursu.
3. Log, info, dir, warn, error: Wykorzystanie różnych funkcji logowania i wyświetlania komunikatów diagnostycznych.
4. Group, groupEnd, groupCollapsed: Wykorzystanie grupowania komunikatów diagnostycznych dla lepszej organizacji i czytelności.
5. Time, timeEnd: Mierzenie czasu wykonywania konkretnych fragmentów kodu w celu optymalizacji.
6. Table, assert: Wykorzystanie tabel i asercji do prezentowania danych i sprawdzania warunków w procesie debuggowania.
7. Kolorowanie logów CSS-em: Wykorzystanie stylów CSS do kolorowania komunikatów diagnostycznych dla lepszej czytelności.
8. Błędy w JS: Omówienie różnych rodzajów błędów w języku JavaScript i sposobów ich obsługi.
9. try .... catch ... finally: Wykorzystanie bloków try, catch i finally do przechwytywania i obsługi wyjątków w kodzie.
10. Obsługa błędów w aplikacji: Omówienie strategii obsługi błędów w aplikacjach, w tym logowania, wyświetlania komunikatów użytkownikowi i zabezpieczania aplikacji przed awariami.
11. Zakładka sources, debugger, breakpoints, scope, watch: Wykorzystanie zakładki "sources" w przeglądarce, debuggera, punktów przerwania, zakresu zmiennych (scope) i obserwowania wartości zmiennych (watch) w procesie debuggowania.
12. Śledzenie wykonania kodu — call stack: Poznanie mechanizmu śledzenia wywołań funkcji w kodzie (call stack) w celu zrozumienia kolejności wykonywania instrukcji.
13. Śledzenie wykonania kodu — step, step in or out of next function call: Wykorzystanie krokowego śledzenia wykonania kodu, wchodzenia do funkcji lub wychodzenia z funkcji w celu dokładnego analizowania działania kodu.
14. Modyfikacja aplikacji do debugowania: Naprawianie błędów w aplikacji stworzonej na początku modułu.
15. Drzewo DOM, omówienie tutorialu z Google: Omówienie tutorialu od Google na temat debuggowania i inspekcji elementów strony poprzez drzewo DOM (Document Object Model).

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

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!