React dla średnio zaawansowanych
4.0 (120 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
997 students enrolled

React dla średnio zaawansowanych

Styled-components, Redux, Middlewares, Portals, Hooks, React.memo, React.lazy, Suspense, Context API, JSON Server i inne
4.0 (120 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
997 students enrolled
Last updated 4/2020
Polish
Current price: $13.99 Original price: $19.99 Discount: 30% off
30-Day Money-Back Guarantee
This course includes
  • 17.5 hours on-demand video
  • 1 article
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Redux
  • Redux middlewares
  • Styled-components
  • React hooks
  • React memo
  • React lazy i Suspense
  • Portals
  • React Query
  • React Final Form
  • Context API
  • JSON Server
Course content
Expand all 73 lectures 17:22:53
+ Wprowadzenie do bibliotek i narzędzi używanych w projekcie
11 lectures 03:14:01
Styled components w React
20:17
Redux - cz. 1
35:25
Redux - cz. 2
30:41
Middlewares w Reduxie
10:28
Hooki useState, useEffect, useMemo i useCallback
32:44
Portale w React
12:42
Dzielenie kodu (code-splitting) z użyciem React.lazy i Suspense
05:11
Wykorzystanie biblioteki React Query w połączeniu z React Suspense
12:03
React Final Form
08:45
Context API
19:26
JSON Server
06:19
+ Wstęp do projektu aplikacji, stworzenie struktury plików i komponentu nawigacji
7 lectures 01:20:25
Zarys aplikacji tworzonej w kursie i stworzenie podstawowej struktury plików
08:38
Kod aplikacji do pobrania
00:06
Stworzenie komponentu nawigacji
05:45
Stylowanie komponentu nawigacji
29:48
Dokończenie komponentu, instalacja React Router, dodanie elementow nawigacji
13:24
Wyjaśnienie potrzeby nadania unikalnego klucza - reconciliation w React
06:37
Typowanie aplikacji React, biblioteka Prop Types
16:07
+ Internacjonalizacja aplikacji za pomocą serwisu POEditor
3 lectures 42:07
Integracja z serwisem POEditor - cz. 1: podstawowa konfiguracja modułu
14:50
Integracja z serwisem POEditor - cz. 2: dostosowanie do potrzeb aplikacji
16:33
Załączenie modułu translacyjnego i użycie hooków do translacji
10:44
+ Komponenty loading indicator i button
4 lectures 49:52
Komponent loading indicator z użyciem styled-components
11:48
Stworzenie i ostylowanie komponentu button
21:54
Uzależnienie buttonu od propsa to do generowania linka z biblioteki React Router
05:47
Optymalizacja komponentu button, hook useMemo, styled-components, zadanie domowe
10:23
+ Zarządzanie stanem aplikacji przy pomocy Reduxa
8 lectures 02:07:44
Setup Reduxa w projekcie
14:47
Reducer dla budżetu
27:11
Stworzenie reducera trzymajacego dane o wszystkich dostępnych kategoriach
06:27
Podpięcie biblioteki redux-thunk, tworzenie własnego middleware do Reduxa
09:09
Stworzenie akcji pobierajacych dane budżetu za pomocą akcji asynchronicznych
27:56
Użycie hooka useEffect
10:58
Uzupełnienie akcji fetchBudgetedCategories
06:13
Stworzenie własnego middleware do obsługi promisów
25:03
+ Strona budżetu - menu z kategoriami
10 lectures 02:28:06
Budowanie komponentów pod stronę budżetu
32:17
Stworzenie listy kategorii w budżecie, użycie biblioteki Lodash
14:15
Budowa komponentu do wyświetlenia rozwijanej listy kategorii i hook useState
11:45
Wyświetlenie parent categories
12:08
Wyświetlanie listy rozwijanej kategorii
11:31
Wyświetlanie budżetu dla parent category
18:35
Wyświetlanie waluty
04:17
Wyświetlanie budżetu dla poszczególnych kategorii
06:47
Wyświetlenie nazwy budżetu i całkowitej kwoty budżetu
05:55
Wyświetlenie kwoty pozostałej w budżecie
30:36
+ Strona budżetu - lista transakcji dostosowana do wyboru kategorii, optymalizacja
6 lectures 01:25:27
Wyświetlenie listy transakcji
29:44
Zapisanie wybranej kategorii do store Reduxa
07:26
Filtrowanie listy transakcji w zależności od wybranej kategorii
10:15
Obsługa kliknięcia nazwy budżetu i kategorii niezabudżetowanych
11:45
Użycie hooka useRef
08:44
Optymalizacja wydajności przy pomocy hooka useMemo
17:33
+ Strona budżetu - komponent formularza do dodawania nowych transakcji
6 lectures 02:05:43
Modal na formularz dodawania transakcji
30:02
Budowa formularza do dodawania transakcji za pomocą biblioteki React Final Form
27:30
Stworzenie w formularzu select field do wyboru kategorii
18:08
Stworzenie akcji reduxowej do potwierdzania formularza
27:11
Notyfikacja informująca użytkownika o pomyślnym dodaniu transakcji
17:17
Zadania do samodzielnego przećwiczenia
05:35
+ Zastąpienie Reduxa hookiem z biblioteki react-query, poprawa wydajności, UX i UI
15 lectures 02:59:19
Biblioteka react-query - wprowadzenie
09:38
Wykorzystanie opcji suspense i hooka useQuery
20:37
Poprawa indykatorów ładowania
05:21
Przechwytywanie błędów aplikacji przy pomocy error boundary i obsługa błędów
23:00
Poprawienie cache'owania danych
10:31
Czyszczenie kodu
13:31
Zastąpienie akcji reduxowej hookiem useMutation
18:43
Czyszczenie Reduxa
04:49
Optymalizacja komponentów z użyciem React.memo
13:09
Optymalizacja aplikacji z użyciem code splittingu
09:30
Użycie context API - wstęp
06:46
Stworzenie contextu dotyczącego budżetu z użyciem hooka useState
19:37
Użycie hooka useReducer zamiast hooka useState
10:57
Context API vs Redux
02:27
Podsumowanie kursu i propozycje rozbudowy aplikacji
10:43
Requirements
  • Dobra znajomość JavaScript
  • Podstawowa znajomość HTML i CSS
  • Podstawowa znajomość biblioteki React
Description

Kurs React dla osób uczących się i pracujących w bibliotece React. W kursie budujemy aplikację "Budżet domowy". Dowiesz się, jak stworzyć szkielet takiej aplikacji oraz wiedzę, jak rozwinąć tę aplikację w ramach ćwiczenia do rozmiarów pełnoprawnej aplikacji. Poznasz przy tym bardziej zaawansowane koncepty powiązane z biblioteką React oraz całym jej ekosystemem.

Podczas kursu nauczysz się i wykorzystasz takie biblioteki i rozwiązania jak:

- Styled-components

- Redux

- Redux middlewares (logger, notyfikacje, akcje asynchroniczne, obsługa błędów)

- React hooks

- React.memo

- Code-splitting z użyciem React.lazy i Suspense

- Portals

- React Query

- React Final Form

- Context API

- JSON Server


Podstawowym wymaganiem przed dołączeniem do kursu jest znajomość czystego JavaScriptu oraz podstaw biblioteki React (ten kurs to nie jest React od podstaw!). Oczywiście, potrzebna jest też (podstawowa) znajomość CSS i HTML.


Docelowym odbiorcą kursu jest osoba znająca podstawy biblioteki React, która chce pójść o krok dalej. Udział w kursie da takiej osobie wiedzę na poziomie średnio zaawansowanym oraz otworzy drogę do pozyskania wiedzy bardziej zaawansowanej w tematyce tworzenia aplikacji webowych z użyciem biblioteki React. Wiedza ta może być dla Ciebie podstawą do zostania samodzielnym React developerem.

Who this course is for:
  • Osoba znająca podstawy biblioteki React, która chciałaby poznać bardziej zaawansowane koncepcje, rozwiązania i biblioteki powiązane z React