Chcesz pracować jako Frontend Developer? Dołącz do kursu React od podstaw React od podstaw to kurs online w formie 160 lekcji wideo, praktycznych ćwiczeń i zadań domowych. arrow-icon-down Sprawdź szczegóły i program kursu Co zyskasz? Kurs pomoże w rozwoju Twojej kariery Nauczysz się Reacta krok po kroku, od podstaw aż po zaawansowane zagadnienia

Czego się nauczysz?

Narzędzia projektowe
Obsługa formularzy,
Rozwiązywanie najczęstszych problemów w pracy z Reactem
Komunikacja z REST API
Przygotowanie aplikacji produkcyjnej
Techniki testowania komponentów
Rozwiązania w aplikacjach komercyjnych i ich deployment
Server-Side-Rendering oraz przygotowanie aplikacji pod SEO

Program

1. Wprowadzenie

lekcja

lekcje

lekcji

1.1 Twój cel

ondemand_video

06:58 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.2 Tematyka

ondemand_video

08:32 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.3 Narzędzia

ondemand_video

06:16 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.4 Ustawienia edytora

ondemand_video

13:09 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.5 Przygotowanie środowiska

ondemand_video

10:13 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.6 Korzystanie z NPM cz. 1

ondemand_video

15:21 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.7 Korzystanie z NPM cz. 2

ondemand_video

15:52 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.8 Stworzenie pierwszej aplikacji

ondemand_video

15:05 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.9 Zanim zaczniemy z ESLint

description

1. Wprowadzenie

lekcja

lekcje

lekcji

1.10 Konfiguracja ESLint

ondemand_video

11:38 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.11 Konfiguracja testów

ondemand_video

11:20 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.12 Startujemy projekt

07:33 min

1. Wprowadzenie

lekcja

lekcje

lekcji

1.13 Zadania do realizacji

mode

2. Komponenty

lekcja

lekcje

lekcji

2.1 Po co korzystać z komponentów?

ondemand_video

09:28 min

2. Komponenty

lekcja

lekcje

lekcji

2.2 Stworzenie pierwszego komponentu

ondemand_video

07:27 min

2. Komponenty

lekcja

lekcje

lekcji

2.3 Komponenty funkcyjne

ondemand_video

09:58 min

2. Komponenty

lekcja

lekcje

lekcji

2.4 Czym jest JSX?

ondemand_video

10:14 min

2. Komponenty

lekcja

lekcje

lekcji

2.5 Pisanie HTML w JSX

ondemand_video

17:41 min

2. Komponenty

lekcja

lekcje

lekcji

2.6 Stylowanie

ondemand_video

10:00 min

2. Komponenty

lekcja

lekcje

lekcji

2.7 Komponenty klasowe

ondemand_video

08:51 min

2. Komponenty

lekcja

lekcje

lekcji

2.8 Stan komponentów

ondemand_video

14:22 min

2. Komponenty

lekcja

lekcje

lekcji

2.9 DOM vs Virtual DOM

ondemand_video

08:05 min

2. Komponenty

lekcja

lekcje

lekcji

2.10 Zadania do realizacji

mode

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.1 Wprowadzenie

ondemand_video

05:13 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.2 Struktura plików i katalogów

ondemand_video

18:21 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.3 Struktura plików i katalogów - podział domenowy

ondemand_video

09:36 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.4 Struktura plików i katalogów - atomic design

ondemand_video

12:22 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.5 Struktura plików i katalogów - pages

ondemand_video

12:22 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.6 Barrels

ondemand_video

17:47 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.7 Kompozycja komponentów

ondemand_video

10:32 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.8 Tworzenie szablonu aplikacji za pomocą komponentów

ondemand_video

10:16 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.9 Komponenty bezstanowe

ondemand_video

03:05 min

3. Struktura aplikacji

lekcja

lekcje

lekcji

3.10 Zadania do realizacji

mode

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.1 Zdarzenia - wprowadzenie

ondemand_video

16:36 min

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.2 Zdarzenia

ondemand_video

18:48 min

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.3 Bindowanie zdarzeń

ondemand_video

16:29 min

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.4 Obsługa stanu komponentu

ondemand_video

09:48 min

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.5 Obsługa stanu komponentu - hooki

ondemand_video

16:16 min

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.6 Refy

ondemand_video

09:49 min

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.7 Refy - hooki, useRef

ondemand_video

04:47 min

4. Zdarzenia, Refy, Bindowanie

lekcja

lekcje

lekcji

4.8 Zadania do realizacji

mode

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.1 Komponenty kontrolowane

ondemand_video

07:32 min

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.2 Komponenty niekontrolowane

ondemand_video

05:10 min

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.3 Dumb components

ondemand_video

12:02 min

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.4 Przepływ danych

ondemand_video

11:33 min

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.5 Cykl życia komponentów

ondemand_video

21:05 min

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.6 Cykl życia komponentów - hook useEffect

ondemand_video

06:21 min

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.7 React router v5

ondemand_video

14:04 min

5. Budowa interfejsu

lekcja

lekcje

lekcji

5.8 Zadania do realizacji

mode

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.1 Intro

ondemand_video

01:24 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.2 2

ondemand_video

08:52 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.3 3

ondemand_video

03:42 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.4 4

ondemand_video

07:07 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.5 5

ondemand_video

12:39 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.6 6

ondemand_video

11:33 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.7 7

ondemand_video

07:17 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.8 8

ondemand_video

07:41 min

6. Obsługa formularzy

lekcja

lekcje

lekcji

6.9 Zadania do realizacji

mode

7. Stylowanie

lekcja

lekcje

lekcji

7.1 Intro

ondemand_video

1:10

7. Stylowanie

lekcja

lekcje

lekcji

7.2 BEM

ondemand_video

15:35

7. Stylowanie

lekcja

lekcje

lekcji

7.3 SASS

ondemand_video

22:25

7. Stylowanie

lekcja

lekcje

lekcji

7.4 Props style

ondemand_video

06:21

7. Stylowanie

lekcja

lekcje

lekcji

7.5 CSS w JavaScript

ondemand_video

04:33

7. Stylowanie

lekcja

lekcje

lekcji

7.6 Biblioteka classnames

ondemand_video

06:36

7. Stylowanie

lekcja

lekcje

lekcji

7.7 Styled-components

ondemand_video

13:24

7. Stylowanie

lekcja

lekcje

lekcji

7.8 Material UI

ondemand_video

19:51

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.1 Wprowadzenie do CodeSandbox

ondemand_video

02:48 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.2 Wprowadzenie do REST API

ondemand_video

18:55 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.3 REST API vs GraphQL

ondemand_video

22:24 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.4 Szybka powtórka z Promisów

ondemand_video

22:24 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.5 Jak korzystać z publicznych API?

ondemand_video

28:47 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.6 Jak korzystać z API w projekcie?

ondemand_video

09:42 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.7 Interfejs dynamiczny i dane

ondemand_video

13:13 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.8 Własna biblioteka do API

ondemand_video

13:23 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.9 REST API i hooki

ondemand_video

15:56 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.10 REST API i routing

ondemand_video

15:05 min

8. Komunikacja z REST API

lekcja

lekcje

lekcji

8.11 Zadania do realizacji

mode

9. Wzorce w React

lekcja

lekcje

lekcji

9.1 Composition over inheritance

ondemand_video

17:09

9. Wzorce w React

lekcja

lekcje

lekcji

9.2 Context API

ondemand_video

21:51

9. Wzorce w React

lekcja

lekcje

lekcji

9.3 Komponenty wyższego rzędu (HoC)

ondemand_video

15:15

9. Wzorce w React

lekcja

lekcje

lekcji

9.4 Abstrakcja stanu od widoku

ondemand_video

14:12

9. Wzorce w React

lekcja

lekcje

lekcji

9.5 Compound Components

ondemand_video

20:07

9. Wzorce w React

lekcja

lekcje

lekcji

9.6 Własne hooki

ondemand_video

16:23

9. Wzorce w React

lekcja

lekcje

lekcji

9.7 Render Props

ondemand_video

10:58

9. Wzorce w React

lekcja

lekcje

lekcji

9.8 Popularne antywzorce

ondemand_video

10:49

9. Wzorce w React

lekcja

lekcje

lekcji

9.9 Zadania do realizacji

mode

10. Optymalizacja

lekcja

lekcje

lekcji

10.1 React Dev Tools i profilowanie

ondemand_video

12:12 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.2 Profiler API

ondemand_video

05:50 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.3 Property key – właściwe użycie

ondemand_video

13:55 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.4 Sterowanie renderowaniem za pomocą shouldComponentUpdate

ondemand_video

08:16 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.5 Pure components

ondemand_video

03:03 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.6 React.memo

ondemand_video

04:48 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.7 Hook useMemo

ondemand_video

05:11 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.8 Hook useCallback

ondemand_video

02:55 min

10. Optymalizacja

lekcja

lekcje

lekcji

10.9 React Lazy i Suspense

ondemand_video

04:17 min

11. Next.js

lekcja

lekcje

lekcji

11.1 Intro

ondemand_video

00:57

11. Next.js

lekcja

lekcje

lekcji

11.2 Wprowadzenie

ondemand_video

08:32

11. Next.js

lekcja

lekcje

lekcji

11.3 Frontend & Backend cz.1

ondemand_video

16:45

11. Next.js

lekcja

lekcje

lekcji

11.4 Frontend & Backend cz.2

ondemand_video

15:58

11. Next.js

lekcja

lekcje

lekcji

11.5 Elementy Next.js

ondemand_video

10:09

11. Next.js

lekcja

lekcje

lekcji

11.6 Yarn

ondemand_video

07:39

11. Next.js

lekcja

lekcje

lekcji

11.7 Pierwszy projekt

ondemand_video

17:48

11. Next.js

lekcja

lekcje

lekcji

11.8 Struktura aplikacji

ondemand_video

02:04

11. Next.js

lekcja

lekcje

lekcji

11.9 Routing cz. 1.

ondemand_video

12:35

11. Next.js

lekcja

lekcje

lekcji

11.10 Routing cz. 2

ondemand_video

17:36

11. Next.js

lekcja

lekcje

lekcji

11.11 Routing cz. 3

ondemand_video

10:24

11. Next.js

lekcja

lekcje

lekcji

11.12 Link cz. 1

ondemand_video

15:50

11. Next.js

lekcja

lekcje

lekcji

11.13 Link cz. 2

ondemand_video

08:09

11. Next.js

lekcja

lekcje

lekcji

11.14 Link cz. 3

ondemand_video

05:04

11. Next.js

lekcja

lekcje

lekcji

11.15 Layout

ondemand_video

16:21

11. Next.js

lekcja

lekcje

lekcji

11.16 Pobieranie danych

ondemand_video

08:45

11. Next.js

lekcja

lekcje

lekcji

11.17 Statyczne propsy

ondemand_video

15:29

11. Next.js

lekcja

lekcje

lekcji

11.18 Propsy z serwera

ondemand_video

13:08

11. Next.js

lekcja

lekcje

lekcji

11.19 API routes

ondemand_video

16:14

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.1 Wprowadzenie

ondemand_video

15:37

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.2 White box vs Black box

ondemand_video

05:07

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.3 Asercje testing library

ondemand_video

04:43

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.4 Test driven development

ondemand_video

04:03

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.5 Testy jednostkowe (unit tests)

ondemand_video

13:26

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.6 Implementacja na podstawie testów

ondemand_video

07:06

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.7 Aplikacja do testowania

ondemand_video

07:36

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.8 React Testing Library

ondemand_video

23:43

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.9 Refactor na podstawie testów

ondemand_video

13:25

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.10 Mockowanie API

ondemand_video

26:36

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.11 Testowanie komponentów w kontekście

ondemand_video

08:54

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.12 Mock Service Worker

ondemand_video

23:49

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.13 Cypress

ondemand_video

15:43

12. Testowanie aplikacji

lekcja

lekcje

lekcji

12.14 Zadania do realizacji

mode

13. TypeScript

lekcja

lekcje

lekcji

13.1 Intro

ondemand_video

01:37

13. TypeScript

lekcja

lekcje

lekcji

13.2 Dokumentacja

ondemand_video

03:08

13. TypeScript

lekcja

lekcje

lekcji

13.3 Wprowadzenie cz. 1

ondemand_video

14:57

13. TypeScript

lekcja

lekcje

lekcji

13.4 Wprowadzenie cz. 2

ondemand_video

20:23

13. TypeScript

lekcja

lekcje

lekcji

13.5 Pierwszy projekt

ondemand_video

12:09

13. TypeScript

lekcja

lekcje

lekcji

13.6 Typy i interfejsy

ondemand_video

15:36

13. TypeScript

lekcja

lekcje

lekcji

13.7 React i TypeScript cz. 1

ondemand_video

08:40

13. TypeScript

lekcja

lekcje

lekcji

13.8 React i TypeScript cz. 2

ondemand_video

13:42

13. TypeScript

lekcja

lekcje

lekcji

13.9 React i TypeScript cz. 3

ondemand_video

17:48

13. TypeScript

lekcja

lekcje

lekcji

13.10 React i TypeScript cz. 4

ondemand_video

21:24

13. TypeScript

lekcja

lekcje

lekcji

13.11 Outro

ondemand_video

01:15

14. Redux

lekcja

lekcje

lekcji

14.1 Wprowadzenie

description

14. Redux

lekcja

lekcje

lekcji

14.2 Flux i zarządzanie stanem aplikacji

ondemand_video

06:08

14. Redux

lekcja

lekcje

lekcji

14.3 Własny Redux w aplikacji

ondemand_video

06:51

14. Redux

lekcja

lekcje

lekcji

14.4 Architektura aplikacji a Redux

ondemand_video

04:25

14. Redux

lekcja

lekcje

lekcji

14.5 Action creators

ondemand_video

06:32

14. Redux

lekcja

lekcje

lekcji

14.6 Reducery

ondemand_video

13:06

14. Redux

lekcja

lekcje

lekcji

14.7 Zarządzanie stanem aplikacji

ondemand_video

09:19

14. Redux

lekcja

lekcje

lekcji

14.8 Biblioteka react-redux

ondemand_video

04:09

14. Redux

lekcja

lekcje

lekcji

14.9 Komponent Provider z react-redux

ondemand_video

02:34

14. Redux

lekcja

lekcje

lekcji

14.10 Funkcja Connect react-redux

ondemand_video

11:57

14. Redux

lekcja

lekcje

lekcji

14.11 Thunks i redux-thunk

ondemand_video

35:47

14. Redux

lekcja

lekcje

lekcji

14.12 Redux Dev Tools

ondemand_video

07:14

14. Redux

lekcja

lekcje

lekcji

14.13 Redux-persist

ondemand_video

15:00

14. Redux

lekcja

lekcje

lekcji

14.14 Redux-form

ondemand_video

19:24

14. Redux

lekcja

lekcje

lekcji

14.15 Redux-saga

ondemand_video

18:51

14. Redux

lekcja

lekcje

lekcji

14.16 Zadania do realizacji

mode

15. Deployment

lekcja

lekcje

lekcji

15.1 Budowanie projektów pod wykorzystanie produkcyjne

ondemand_video

09:31

15. Deployment

lekcja

lekcje

lekcji

15.2 Eject

ondemand_video

14:07

15. Deployment

lekcja

lekcje

lekcji

15.3 Deployment na GitHub Pages

ondemand_video

14:30

15. Deployment

lekcja

lekcje

lekcji

15.4 Deployment na Heroku

ondemand_video

11:07

15. Deployment

lekcja

lekcje

lekcji

15.5 Deployment na Firebase Hosting

ondemand_video

11:38

15. Deployment

lekcja

lekcje

lekcji

15.6 Inne destynacje deploymentu

ondemand_video

07:55

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.1 Jak zrobić profil na LinkedIn, który pokochają rekruterzy?

ondemand_video

2:00:27 min

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.2 Jak robić programistyczne CV

ondemand_video

53:17 min

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.3 Rozmowy rekrutacyjne

ondemand_video

1:27:55 min

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.4 Techniczne rozmowy rekrutacyjne

ondemand_video

38:53 min

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.5 Mini szkolenie z gita

ondemand_video

1:16:54 min

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.6 Wprowadzenie do gitflow

ondemand_video

42:49 min

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.7 React.js & Airtable cz. 1

ondemand_video

1:29:05 min

16. Materiały dodatkowe

lekcja

lekcje

lekcji

16.8 React.js & Airtable cz. 2

ondemand_video

1:29:56 min

Opis

Uwaga! Istnieje nowa wersja tego Kursu - Szkoła Reacta 2.0. Sprawdź, czy program z tego kursu jest dla Ciebie odpowiedni - jeśli pracujesz z legacy aplikacjami, to na pewno skorzystasz. Jeśli interesuje Cię bardziej nowoczesny stack, wybierz Szkołę Reacta 2.0.

Nauczysz się Reacta krok po kroku, od podstaw aż po zaawansowane zagadnienia
Zdobędziesz umiejętności potrzebne do awansu i podwyżki
Jeśli dopiero zaczynasz karierę w IT, to zmienisz pracę na lepszą - zdobędziesz wymagane doświadczenie

Dla kogo jest ten kurs?

Kurs kierowany jest dla osób, które chcą przejść przez pełną ścieżkę nauki React.js- od podstaw, aż po zaawansowane zagadnienia.

Autor

Autorzy

Patryk Omiotek

Jestem Senior Fullstack Developerem specjalizującym się w tworzeniu aplikacji internetowych w stacku TypeScript, React, Next.js, NestJS. Realizowałem wiele ciekawych i wymagających projektów m. in. dla znanej akademii filmowej z USA oraz startupów z Doliny Krzemowej.

Od 8 lat dzielę się swoją wiedzą jako ekspert na konferencjach i trener IT. Prowadzę też szkolenia dla programistów w Bottega IT Minds, firmie która zrzesza najlepszych ekspertów IT. Jestem także pomysłodawcą i założycielem Szkoły Reacta oraz kanału Web Amigos na YouTube.

Na codzień oprócz kodowania, zajmuję się weryfikacją IT, czyli w trakcie procesów rekrutacyjnych sprawdza poziom wiedzy kandydatów na stanowiska Junior, Regular, jak i Senior developerów.