Przejdź do treści
strefakursów

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

Zacznij przygodę z Reactem i stwórz swoją pierwszą aplikację krok po kroku. Poznaj sprawdzone metody pracy, które ułatwią Ci start w świecie nowoczesnego frontendu.

4,8 6 opinii Autor: Sebastian Machaj
53 lekcje 20 pytań testowych Poziom: Podstawowy Język: polski Certyfikat
159 zł

Dostęp od razu po zakupie

Płacisz raz i wchodzisz prosto do lekcji - bez subskrypcji, bez czekania na grupę.

Dodaj do listy życzeń

Szczegóły, które warto znać

8 godzin materiałów
Bezterminowy dostęp
Imienny certyfikat PDF
53 lekcje wideo
Poziom: Podstawowy
Testy i zadania
20 pytań testowych
Rekomendacje na LinkedIn
Napisy dostępne w językach: polski, angielski, ukraiński
Dostęp w aplikacji mobilnej

Opis szkolenia

Czego się nauczysz:

  • instalować i konfigurować środowisko do pracy z React

  • tworzyć własne komponenty i korzystać z hooków

  • rozumieć oraz zarządzać stanem aplikacji

  • budować responsywne interfejsy z TailwindCSS i ShadCN

  • wdrażać routing między stronami za pomocą React Router

  • typować projekt przy użyciu TypeScript

  • tworzyć i walidować formularze oraz obsługiwać błędy

  • wdrażać aplikacje na platformę produkcyjną

Znasz już podstawy JavaScript, HTML i CSS, ale odbiłeś się od Reacta, bo wydał Ci się za trudny? Dokumentacja była pełna niezrozumiałych pojęć, nie wiedziałeś, co, jak i gdzie doinstalować oraz skonfigurować? Masz dość tutoriali, które pokazują fragmenty kodu, ale nie wyjaśniają, jak stworzyć kompletną aplikację od A do Z? Ten kurs powstał z myślą o Tobie!

Zamiast teoretyzować, przeprowadzę w nim Cię krok po kroku przez cały proces tworzenia aplikacji z React - od instalacji narzędzi, przez pisanie pierwszych komponentów, po wdrożenie aplikacji do internetu. Zdobędziesz praktyczną wiedzę, która pozwoli Ci budować własne projekty od zera, zrozumieć zasady działania Reacta i wyeliminować typowe błędy początkujących.

Laptop z otwartym edytorem kodu React i podglądem aplikacji, obok logo React i Tailwind CSS

Dla kogo jest ten kurs?

  • osób zaczynających naukę React

  • początkujących frontend developerów

  • studentów informatyki i pokrewnych kierunków

  • freelancerów wchodzących w web development

  • osób przebranżawiających się do IT

  • osób, które chcą pewnie wejść w świat nowoczesnych technologii frontendowych

Co zyskasz po ukończeniu kursu?

Opanujesz pracę z komponentami, hookami i routingiem w React. Nauczysz się korzystać z bibliotek takich jak TailwindCSS, React Hook Form i Zod. Dzięki tej wiedzy będziesz potrafił budować i wdrażać aplikacje.

Praktyczny projekt aplikacji do zarządzania finansami

Zamiast uczyć się teorii bez praktyki, w kursie stworzysz ze mną kompletną aplikację - od pierwszego komponentu po rozbudowane funkcjonalności, takie jak

  • budowa i edycja portfeli finansowych

  • filtrowanie i sortowanie transakcji

  • wyświetlanie danych na wykresach

  • obsługa różnych widoków i podsumowań


Dzięki temu nie tylko nauczysz się Reacta, ale też stworzysz projekt, który pokażesz w swoim portfolio. Możesz go również wykorzystać np. w procesie rekrutacji.

Laptop i smartfon z otwartą aplikacją do zarządzania finansami, pokazujące listę transakcji i podsumowania

React krok po kroku - od instalacji po działającą aplikację

Wiem, jak łatwo się zniechęcić, gdy tutoriale są niejasne, a dokumentacja przytłacza trudnym językiem. W tym kursie każdy etap tłumaczę jasno, bez zbędnego żargonu i chodzenia “na skróty.” Pokażę Ci, jak zainstalować niezbędne narzędzia, skonfigurować środowisko i przygotować projekt do pracy.

Przestaniesz tracić czas na szukanie odpowiedzi w internecie, każdy krok jest wyjaśniony prostym językiem, a typowe błędy i problemy mają swoje konkretne rozwiązania.

Komponenty i hooki - naucz się myśleć jak React developer

Początkujący często gubią się w natłoku nowych pojęć i narzędzi React. Dlatego w tym kursie szybko przejdziemy do opanowania solidnych fundamentów tego frameworka.

Dowiesz się:

  • jak tworzyć własne komponenty i łączyć je w większą całość

  • jak stosować podstawowe i zaawansowane hooki (useState, useEffect, useContext, useReducer)

  • jak przekazywać dane i obsługiwać stan aplikacji w praktyce

  • jak optymalizować kod i unikać powielania błędów


Każda z tych umiejętności będzie rozwijana na prawdziwych przykładach, tak byś naprawdę zrozumiał ich zastosowanie i rolę w pracy z React.

Osoba pracuje na laptopie nad kodem React, ucząc się użycia hooków: useState, useEffect, useContext i useReducer

Formularze i walidacja

Większość początkujących obawia się formularzy, walidacji i obsługi danych użytkownika. To tematy, w których łatwo o błąd, nie tylko ze względu na bezpieczeństwo przesyłanych danych.

W kursie nauczysz się:

  • tworzyć formularze przy pomocy React Hook Form

  • walidować dane z biblioteką Zod

  • obsługiwać błędy i informować użytkownika o nieprawidłowych danych

  • typować dane, by uniknąć błędów już na etapie pisania kodu


Wszystko na jasnych, prostych przykładach, które przeniesiesz do każdego swojego projektu.

Nowoczesny wygląd aplikacji - stylowanie bez frustracji

Martwisz się, że Twoje projekty wyglądają zbyt surowo lub nieprofesjonalnie? Dzięki TailwindCSS oraz ShadCN nauczysz się budować atrakcyjne interfejsy, które świetnie prezentują się na każdym ekranie.

Dowiesz się:

  • jak używać gotowych komponentów

  • jak szybko zmieniać wygląd bez skomplikowanego CSS

  • jak tworzyć nowoczesne, responsywne strony
Nowoczesny interfejs aplikacji finansowej z wykresami i formularzem, obok fragment kodu CSS

Praca z API i wdrożenie

Podczas kursu pokażę Ci, jak wykorzystać React Query do pobierania i aktualizacji danych z zewnętrznych API. Nauczysz się też, jak sprawnie wdrożyć swoją aplikację na platformę produkcyjną, taką jak Vercel. Nauczysz się rozwiązywać najczęstsze problemy pojawiające się przy deploymencie oraz dbać o wydajność i stabilność projektu.

Co jeszcze powinieneś wiedzieć?

Aby w pełni skorzystać z kursu, wystarczy podstawowa znajomość JavaScript, HTML i CSS. Reszty nauczysz się od zera, bez konieczności wcześniejszego doświadczenia w pracy z frameworkami frontendowymi. Ten kurs to najlepszy start, jeśli chcesz zbudować solidne fundamenty pod dalszą naukę Reacta i nowoczesnego web developmentu.

Kup w pakiecie i oszczędź

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

4.8 (6)

159 zł

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Kurs Next.js od podstaw - praktyczny projekt aplikacji

4.6 (12)

169 zł

Cena za zakup pakietu

262 zł 328 zł −20%

Oszczędzasz w pakiecie: 66 zł

Zyskujesz 26.24 zł w punktach na kolejne zakupy.

Kup w pakiecie
Kurs React - koduj szybciej dzięki AI

Kurs React - koduj szybciej dzięki AI

5.0 (2)

199 zł

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

4.8 (6)

159 zł

Cena za zakup pakietu

286 zł 358 zł −20%

Oszczędzasz w pakiecie: 72 zł

Zyskujesz 28.64 zł w punktach na kolejne zakupy.

Kup w pakiecie
Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

4.8 (6)

159 zł

Kurs JavaScript od podstaw

Kurs JavaScript od podstaw

4.7 (31)

149 zł

Cena za zakup pakietu

246 zł 308 zł −20%

Oszczędzasz w pakiecie: 62 zł

Zyskujesz 24.64 zł w punktach na kolejne zakupy.

Kup w pakiecie
Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

4.8 (6)

159 zł

Kurs Programowanie funkcyjne w JavaScript

Kurs Programowanie funkcyjne w JavaScript

4.9 (96)

119 zł

Cena za zakup pakietu

222 zł 278 zł −20%

Oszczędzasz w pakiecie: 56 zł

Zyskujesz 22.24 zł w punktach na kolejne zakupy.

Kup w pakiecie
Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku

4.8 (6)

159 zł

Junior Front-end Developer - pierwsza praca

Junior Front-end Developer - pierwsza praca

4.9 (74)

119 zł

Cena za zakup pakietu

222 zł 278 zł −20%

Oszczędzasz w pakiecie: 56 zł

Zyskujesz 22.24 zł w punktach na kolejne zakupy.

Kup w pakiecie

Program kursu

8 modułów · 53 lekcje

1 · Wprowadzenie
  • Wstęp 01m 43s
  • Jak korzystać z materiałów? 02m 23s
  • Czym jest React? 02m 24s
  • Omówienie projektu 01m 08s
2 · Przygotowanie do pracy
  • Przygotowanie do pracy 08m 37s
  • Instalacja środowiska i wstępna konfiguracja 05m 46s
  • Omówienie plików i folderów 03m 28s
  • Konfiguracja oraz wtyczki edytora kodu 08m 19s
3 · Podstawy Reacta
  • Wprowadzenie do Reacta 15m 49s
  • Stan komponentów - hook useState 14m 03s
  • Podstawowe założenia Reacta 05m 34s
  • Rendering w React oraz cykl życia komponentów 05m 58s
  • Hook useRef 11m 50s
  • Hook useEffect 13m 09s
  • Kontekst w aplikacji - hook useContext 07m 36s
  • Hook useReducer 09m 47s
  • funkcje wpływające na wydajność - memo(), useMemo(), useCallback() 14m 22s
  • Debugowanie aplikacji w React - React Developer Tools oraz Strict Mode 07m 26s
  • React Compiler 03m 56s
4 · Landing Page
  • TailwindCSS oraz ShadCN - omówienie 05m 41s
  • TailwindCSS oraz ShadCN - instalacja i praktyczne wprowadzenie 08m 41s
  • Przygotowanie do pracy 06m 35s
  • Pierwszy komponent 10m 24s
  • Komponent intro oraz dodatkowe biblioteki 13m 06s
  • Baner 11m 11s
  • Moduł opinii 14m 32s
  • Cennik 10m 34s
  • Kliencki routing w aplikacji - biblioteka React Router 11m 43s
  • Komponent nawigacji 09m 16s
  • Tworzymy portal - nawigacja na mobilu 13m 41s
5 · Portfele
  • Szybkie wprowadzenie do Typescript 14m 44s
  • Karta portfela 08m 37s
  • Pierwszy formularz z pomocą biblioteki React Hook Form oraz Zod cz. 1 08m 01s
  • Pierwszy formularz z pomocą biblioteki React Hook Form oraz Zod cz. 2 14m 47s
  • Szersze omówienie biblioteki Zod oraz mapa błędów 11m 21s
  • Logika działania portfeli 08m 46s
  • Lista portfeli 09m 36s
  • Tworzymy własne hooki - useLocalStorage oraz useWallets 09m 56s
6 · Transakcje
  • Panel kategorii 11m 22s
  • Karta transakcji 07m 22s
  • Formularz cz. 1 06m 19s
  • Formularz cz. 2 12m 23s
  • Logika działania transakcji 13m 14s
  • Lista transakcji 08m 29s
  • Filtrowanie po miesiącu i podkategorii 14m 50s
7 · Strona podsumowania
  • Karta podsumowania 04m 31s
  • Dane do wykresów 11m 10s
  • Wykresy kategorii 13m 06s
  • Wykres roczny 05m 58s
8 · Zakończenie
  • Praca z API - wprowadzenie do React Query 13m 19s
  • Praca z API - komponent kursu walut 16m 36s
  • Końcowa konfiguracja i deploy aplikacji 06m 08s
  • Zakończenie 01m 00s

Twój instruktor

Sebastian Machaj

Sebastian Machaj

Full Stack Web Developer

Swoją przygodę z profesjonalnym programowaniem rozpocząłem w 2017 roku. Uwielbiam tworzyć, moją pasją jest przekuwanie ludzkich idei w działające aplikacje szczególnie w środowisku webowym oraz mobilnym. Ta radość z tworzenia zmotywowała mnie do założenia własnego biznesu skupiającego się na budowaniu aplikacji internetowych - Black Red Studio. Przez moje ręce przewinęło się sporo różnych technologii jednak moimi ulubionymi i tymi które bym polecił są: Typescript, React, Next.js, Laravel, a także Tailwind. Prywatnie uwielbiam różne sporty, np. tenis czy piłkę nożną, podróże, gry planszowe / komputerowe, interesują mnie takie tematy jak finanse, astrofizyka czy dietetyka.

Opinie kursantów

5,0 Zweryfikowana
„Chyba wszystko :)"
Sebastian Nagraba zweryfikowany kursant
5,0 Zweryfikowana
„Kocham ten kurs pozdrawiam dzięki temu zostanę programistą (box stop baczność ja się kunia boje)(Pozdrawiam panią KP)"
M Mateusz Bondaruk zweryfikowany kursant
5,0 Zweryfikowana
„klasa mega ogien!!!!!"
F Franciszek Karamon zweryfikowany kursant
5,0 Zweryfikowana
„ok"
M Maciej Potrz zweryfikowany kursant

Najczęściej zadawane pytania

Jak wygląda uczestnictwo w kursie online?

Kursy online w strefakursów.pl to kompletne pakiety materiałów wideo przygotowane przez zespół naszych specjalistów. Po zakupie otrzymujesz natychmiastowy dostęp do wszystkich lekcji, testów i materiałów dodatkowych na swoim koncie - możesz zacząć się uczyć od razu, bez czekania. Konto jest bezpłatne i możesz założyć je w dowolnym momencie lub w trakcie dokonywania pierwszego zakupu w serwisie strefakursów.pl. Materiały, do których otrzymasz dostęp, pozwolą Ci rozwinąć się zawodowo i podnieść swoje kwalifikacje. Każdy kurs przepełniony jest praktyczną wiedzą, która ułatwi Ci osiągnięcie wymarzonych życiowych celów. Zdobytą wiedzę i postępy możesz w łatwy sposób zweryfikować za pomocą licznych testów i ćwiczeń dołączonych do każdego kursu.

Czy otrzymam certyfikat ukończenia kursu?

Do każdego ukończonego przez Ciebie kursu wystawiamy imienny certyfikat w formacie PDF - będzie on dostępny na Twoim koncie w zakładce Certyfikaty. Warunkiem jego otrzymania jest zaliczenie testów dołączonych do kursu oraz obejrzenie wszystkich lekcji. Na certyfikacie znajduje się Twoje imię oraz nazwisko, nazwa ukończonego kursu, data wystawienia i unikalny numer certyfikatu. Certyfikat możesz wydrukować lub opublikować w Internecie za pośrednictwem specjalnego odnośnika np. na LinkedIn lub innych portalach społecznościowych, jak również dołączyć do swojego CV. Pamiętaj, że certyfikatów nie wysyłamy w formie papierowej.

Czy otrzymam fakturę VAT za zamówienie?

Tak, do każdego zamówienia wystawiamy fakturę VAT (23%) lub paragon - w zależności od danych podanych przy zakupie. Pobierzesz ją z zakładki Historia zamówień na swoim koncie. Powiadomimy Cię mailowo, gdy dokument będzie gotowy.
Potrzebujesz proformy? Zaznacz pole "Chcę otrzymać dokument proforma" przy składaniu zamówienia lub napisz: biuro@strefakursow.pl


Zakup w aplikacji mobilnej? Jeśli kupujesz przez App Store lub Google Play, sprzedawcą jest odpowiednio Apple lub Google. Fakturę otrzymasz od nich zgodnie z ich zasadami:



Możesz również pobrać dokument przez stronę Apple. Przejdź pod ten adres: https://reportaproblem.apple.com/, następnie zaloguj się swoim Apple ID, znajdź zakup na liście i kliknij, aby zobaczyć szczegóły i ewentualnie pobrać dokument. Apple zwykle wystawia fakturę jako dostawca usług cyfrowych. Jeśli potrzebujesz faktury VAT, możesz skontaktować się z pomocą techniczną Apple, aby uzyskać dodatkowe informacje na temat zgodności faktury z przepisami w Twoim kraju.

Zakup w Google Play(Android)

Gdy dokonujesz zakupu w aplikacji strefakursów.pl na Android za pośrednictwem Google Pay sprzedawcą jest Google. Fakturę lub dokument zakupu znajdziesz zgodnie z poniższą instrukcją:

  • Otwórz aplikację Google Play.
  • Kliknij ikonę swojego profilu w prawym górnym rogu.
  • Wybierz Płatności i subskrypcje > Historia zakupów.
  • Znajdź interesujący Cię zakup i kliknij na niego, aby zobaczyć szczegóły. Jeśli chcesz pobrać fakturę, kliknij przycisk Faktura (jeśli jest dostępny).

    • Możesz również znaleźć fakturę na stronie Google Pay. Przejdź pod ten adres: pay.google.com i zaloguj się na swoje konto Google, z którego dokonano zakupu. W sekcji Aktywność znajdziesz wszystkie transakcje dokonane w Google Play. Kliknij daną transakcję, aby zobaczyć szczegóły i pobrać fakturę.

Ile mam czasu na przerobienie materiałów?

Tyle, ile potrzebujesz! Uczysz się we własnym tempie - bez presji i bez abonamentu. Płacisz raz i zachowujesz dostęp do zakupionego kursu na swoim koncie bez z góry określonej daty końcowej. Przez pierwsze 12 miesięcy od zakupu dbamy o aktualność materiałów i zapewniamy pełną dostępność testów oraz certyfikatu. Później kurs nadal pozostaje na Twoim koncie - wracasz do lekcji, kiedy masz ochotę. Szczegółowe zasady dostępu znajdziesz w regulaminie.

Dla firm
Uczysz się do pracy? Kup ten kurs przez firmę
Dla siebie, pracownika lub zespołu – z fakturą i opcją ceny zespołowej.
Sprawdź zakup firmowy
Sprawdź zakup firmowy

Powiązane tematy

Tworzenie stron internetowych Tworzenie aplikacji webowych JavaScript

Zobacz też

Podobne kursy

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Programowanie

Kurs Next.js od podstaw - praktyczny projekt aplikacji

4.6 (12)

169 zł

Kurs React - koduj szybciej dzięki AI

Programowanie

Kurs React - koduj szybciej dzięki AI

5.0 (2)

199 zł

Kurs JavaScript od podstaw

Programowanie

Kurs JavaScript od podstaw

4.7 (31)

149 zł

Programowanie obiektowe w Python

Programowanie

Programowanie obiektowe w Python

4.9 (8)

169 zł

Fundamenty programowania w Python

Programowanie

Fundamenty programowania w Python

4.9 (185)

179 zł

Kurs Programowanie w Python dla średniozaawansowanych

Programowanie

Kurs Programowanie w Python dla średniozaawansowanych

4.9 (72)

169 zł

AI w praktyce - techniki i narzędzia dla każdego

Biznes i marketing

AI w praktyce - techniki i narzędzia dla każdego

4.8 (70)

159 zł

Kurs Laravel od podstaw - praktyczny projekt aplikacji

Programowanie

Kurs Laravel od podstaw - praktyczny projekt aplikacji

5.0 (2)

169 zł

Kurs Power Query - przetwarzanie danych w Excelu

IT i oprogramowanie

Kurs Power Query - przetwarzanie danych w Excelu

4.9 (205)

169 zł

Kurs Git dla początkujących

Programowanie

Kurs Git dla początkujących

4.8 (89)

129 zł

Dostęp od razu po zakupie

159 zł

Zwiastun kursu

Wszystkie opinie

6 zweryfikowanych opinii

4,8

5 83%
4 17%
3 0%
2 0%
1 0%

Zwrot w 3 krokach

Masz 30 dni na zwrot od daty zakupu.

  1. 1

    Zleć zwrot jednym kliknięciem

    Przejdź do Historii zamówień i wybierz „Dokonaj zwrotu" przy zamówieniu, które chcesz zwrócić.

  2. 2

    Potwierdzamy zwrot

    Dostajesz potwierdzenie przyjęcia zwrotu - zwykle w 1 dzień roboczy.

  3. 3

    Pieniądze wracają

    Tą samą metodą, którą zapłacono - zwykle w 3-5 dni roboczych, maksymalnie 14 dni.

Pełne warunki znajdziesz w regulaminie zakupów.

Kod na pierwszy zakup

Odbierz 10% rabatu na pierwsze zamówienie

Dołącz do newslettera z promocjami i odbierz kod rabatowy.

Jest z nami już ponad 106 tys. subskrybentów

Podając adres e-mail zapisujesz się do newslettera i akceptujesz politykę prywatności. W każdej chwili możesz się wypisać.

Ups! Coś poszło nie tak

Zabezpieczenie antybotowe uznało, że Twoje ostatnie zgłoszenie mogło pochodzić od bota, i je zablokowało. Spróbuj ponownie. W razie problemów skontaktuj się z nami.