Kurs Nowoczesny React
Ten kurs wprowadzi Cię w nowoczesny React oraz budowanie frontendowych aplikacji w połączeniu z najnowszymi technikami i najbardziej popularnymi narzędziami.
41 lekcji
5h 59min
Nowoczesny React - od Podstaw
Nowoczesny React
React przeszedł długą ścieżkę rozwoju i część z jego funkcjonalności nie są już powszechnie używane. Dlatego w tym kursie skupimy się na najnowszych technikach pracy z biblioteką - poznasz współczesne podejście do budowania komponentów z wykorzystaniem hooks (useState, useEffect), zrozumiesz zasady kompozycji i zarządzania stanem aplikacji. Pokażemy Ci też jak efektywnie korzystać z narzędzi deweloperskich, debugować kod i wdrażać aplikacje na produkcję z użyciem współczesnych platform jak Vercel.
Hooki
Hooki to fundament nowoczesnego Reacta, który całkowicie zmienił sposób tworzenia komponentów. W kursie nauczysz się efektywnie zarządzać stanem aplikacji używając useState, wykorzystywać useEffect do operacji lifecycle i side-effects, oraz poznasz reguły korzystania z hooków. Wszystko to przećwiczysz w praktycznych zadaniach, takich jak implementacja filtrowania listy elementów, gdzie zastosujesz zdobytą wiedzę w realnym scenariuszu.
Formularze
Obsługa formularzy to nieodłączny element każdej aplikacji webowej. Pokażemy Ci jak kontrolować wartości pól input, wykorzystać popularną bibliotekę Formik do zarządzania złożonymi formularzami oraz implementować walidację danych. Wiedza ta zostanie utrwalona poprzez praktyczne zadanie, w którym rozwiniesz formularz o dodatkowe pola i zastosujesz poznane techniki w rzeczywistym przypadku użycia.
Połączenie z back-endem
Większość aplikacji wymaga komunikacji z serwerem. Nauczysz się jak poprawnie wykonywać operacje asynchroniczne w komponentach React, obsługiwać stany ładowania i błędów, oraz efektywnie korzystać z klienta HTTP do zapytań AJAX. Zaczniesz od pracy z przygotowanym mockiem API, by następnie przejść do prawdziwej integracji z back-endem. W praktycznym zadaniu zaimplementujesz pełny przepływ danych - od pobrania, przez wyświetlenie, aż po wysłanie na serwer.
Deployment
Poza budową aplikacji React, w kursie znajdziesz także moduł poświęcony wdrażaniu aplikacji na produkcję. Poznasz prawidłową konfigurację serwera produkcyjnego dla architektury SPA, nauczysz się zarządzać zmiennymi środowiskowymi poprzez pliki .env oraz przeprowadzisz deployment na platformie Vercel. Dzięki temu Twoja aplikacja będzie nie tylko działać lokalnie, ale także będzie gotowa do użycia przez realnych użytkowników w internecie.
Dla kogo jest ten kurs?
Nowoczesny React stworzyliśmy z myślą o osobach, które chcą nauczyć się Reacta i jednocześnie znają JavaScript. Niezależnie od tego, czy React jest Twoim pierwszym frameworkiem, czy masz już doświadczenie w pracy np. ze Svelte czy Vue, ten materiał jest dla Ciebie. Wskazane jest również posiadanie ogólnej wiedzy na temat tworzenia interfejsów z HTML i CSS oraz obsługi narzędzi takich jak Git czy podstawy pracy z terminalem.
Czego się nauczysz?
-
Podstawy React jako biblioteki UI
-
Konfiguracja środowiska programistycznego
-
Składnia i reguły JSX
-
Komponenty React jako podstawowe bloki aplikacji
-
Przekazywanie danych przez props
-
Renderowanie list i kolekcji
-
Renderowanie warunkowe elementów
-
Stylowanie komponentów i moduły CSS
-
Zarządzanie stanem aplikacji
-
Hook useState do przechowywania danych
-
Hook useEffect do efektów ubocznych
-
Routing i nawigacja w aplikacji SPA
-
Parametry dynamiczne w adresach URL
-
Obsługa formularzy i walidacja danych
-
Integracja z biblioteką Formik
-
Komunikacja z API backendowym
-
Obsługa operacji asynchronicznych
-
Zarządzanie stanem ładowania i błędów
-
Narzędzia deweloperskie do debugowania
-
Konfiguracja środowiska produkcyjnego
-
Deploy aplikacji na platformie hostingowej
Zawartość
Nowoczesny React
8 rozdziały 41 lekcji 5h 59min
-
Wprowadzenie
1h 7min
Dlaczego warto zacząć naukę React?
5min
Konfiguracja środowiska pracy
8min
Do czego używamy React?
21min
Składnia JSX
8min
Sposoby dołączania React do aplikacji web
10min
Przygotowanie szkieletu projektu
14min
-
Budowanie widoków
1h 19min
Pierwszy komponent
10min
Elementy i reguły JSX
14min
Props, przekazywanie danych do komponentu
10min
Renderowanie kolekcji danych
6min
Renderowanie warunkowe
6min
Używanie klasy, style i moduły CSS
10min
Zagnieżdżanie komponentów, kompozycja i PropTypes
11min
Zadanie: Zbuduj własny komponent
11min
-
Zmiana stanu i hooks
46min
Podstawy użycia stanu
10min
useState dla danych obiektowych
7min
useEffect i lifecycle komponentu
12min
Reguły używania hook'ów
8min
Zadanie: filtrowanie listy elementów
9min
-
Routing w aplikacji
43min
Dodanie tablicy routingu
7min
Nawigowanie pomiędzy widokami - pages
4min
Dynamiczne parametry routingu, obsługa 404
8min
Child routing
6min
Nawigacja w kodzie
11min
Zadanie: dodaj brakującą stronę
7min
-
Obsługa formularzy
22min
Kontrola wartości w input
6min
Biblioteka Formik
6min
Walidacja danych formularza
6min
Zadanie: rozwiń fomularz
4min
-
Korzystanie z back-end API
35min
Operacje asynchroniczne w komponentach
9min
Mock dla back-end API
3min
Użycie klienta HTTP, zapytania AJAX
7min
Zadanie: wysyłanie danych na serwer, loading i error state
17min
-
Narzędzia deweloperskie
29min
React Dev Tools
10min
Debugger w WebStorm / Idea
11min
Debugger w Visual Studio Code
8min
-
Deployment aplikacji
38min
Konfiguracja serwera na produkcji - architektura SPA
10min
Używanie plików .env
7min
Deployment na Vercel
20min
Zakończenie
1min
Autor kursu
Michał Jabłoński
Średnia ocen autora: 5
Kurs Nowoczesny React
-
41 lekcji wideo
-
5h 59min materiału
-
Ostatnia rewizja 13.11.2024
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
Wiedza ekspertów
Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
Praktyczne przykłady
Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.
Adam Romański
helloroman.com
Zacznij naukę w Nowoczesny React
-
41 lekcji wideo
-
5h 59min materiału
-
Ostatnia rewizja 13.11.2024
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowoczesny React
Michał Jabłoński
Podstawy pracy z Cursor IDE
Adam Gospodarczyk
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk