Masz już konto? Zaloguj się

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

5 (1 oceny)

Nowoczesny React - od Podstaw

Według raportu State of JS, React od lat pozostaje najpopularniejszym frontendowym frameworkiem JavaScript. Obecnie stanowi również podstawę dla frameworków takich jak Next.js i React Native, które umożliwiają rozwijanie aplikacji wykraczających poza przeglądarkę. Utrzymująca się popularność i rozwijające się wokół projekty wynikają m.in. z tego, jak bardzo React zmienił się na przestrzeni ostatnich wersji. Dlatego ten kurs wprowadzi Cię w nowoczesny React oraz budowanie frontendowych aplikacji w połączeniu z najnowszymi technikami i najbardziej popularnymi narzędziami.

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

    Wprowadzenie

    Podgląd lekcji

    2min

    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

Bio
Full-Stack Developer specjalizujący się w ekosystemie nowoczesnego JavaScriptu. Swoją karierę zaczynał od ECMAScript 3 oraz Adobe Flash, następnie PHP oraz Java GWT. Obecnie całą swoją uwagę kieruje na technologie takie jak Node.js, React i Angular oraz programowanie funkcyjne i reaktywne. Poza praktycznym doświadczeniem w roli programisty, od lat uczy JavaScriptu na sali szkoleniowej.
Inne kursy tego autora
Nowoczesny React Nowoczesny Node.js

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Ciekawa powtórka, natomiast wg. mnie jeśli ktoś rozpoczyna naukę, to zrobił był projekt już z .ts

Piotr Wybraniec

22 listopada 2024

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

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

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