Kurs React

Wprowadzenie

Lekcje
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

14 ocen

Lubię to! 336

Wprowadzenie

Wiele materiałów dostępnych w sieci zawiera wskazówki jak używać Reacta, jednak brakuje im praktycznego wymiaru. Stosowanie tej technologii w prawdziwym projekcie nieco różni się od prostych przykładów, które na ogół możemy znaleźć. Tak powstał pomysł na kurs React w Praktyce, w którym dowiesz się, z jakich technologii React developerzy korzystają na co dzień, jak konfigurują projekty, jak radzą sobie z problemami zarówno wynikającymi ze skomplikowania interfejsu, jak i logiki biznesowej zawartej w aplikacji.

  1. Higher Order Components
  2. Render Props
  3. Zaawansowane hooki reactowe
  4. Tworzenie własnych hooków
  5. Compound Components
  6. Testy jednostkowe
  7. Testy integracyjne
  8. Testowanie zapytań asynchronicznych
  9. Dobre praktyki tworzenia aplikacji
  10. Bulma

Higher Order Components

Jeden z pierwszych i najbardziej popularnych wzorców w React, który przez lata był traktowany jako najlepszy sposób na wydzielanie logiki z komponentów i współdzielenie jej w wielu miejscach aplikacji. W kursie na przykładzie dowiesz się w jaki sposób można wykorzystać HOC, a także jak łączyć je ze sobą tworząc bardziej zaawansowane struktury.

Render Props

Obecnie Render Props jest jedną z najczęściej wykorzystywanych praktyk pozwalającą, podobnie jak HOC, na tworzenie abstrakcji, z których możemy czerpać dane lub zachowania potrzebne w naszych komponentach. Na pierwszy rzut oka Render Props mogą przerażać, ale spokojnie – zaczniemy od prostego przykładu, który pozwoli Ci zrozumieć, że nie ma się czego bać.

Hooks

Hooks to temat niezwykle ciekawy i populary, ale rzadko poruszany w sposób bardziej zaawansowany. W tym kursie dowiesz się nie tylko jak używać takich hooków jak useState, useReducer, useEffect, useContext czy useRef, ale też jak napisać swoje własne hooki, które niesamowicie uprzyjemnią pracę z Reactem.

Compound Components

Compound Components to prawdziwa "ciężka artyleria" Reacta – stosowana w zadaniach wymagających sporej złożoności. Ewoluowała przez lata i kiedyś zawsze spotykana była w formie klas, natomiast w tym kursie proponujemy nieco lżejsze podejście. Dowiesz się jak wykorzystując hooki możesz stworzyć Compound Component wyłącznie przy użyciu komponentów funkcyjnych.

Testowanie aplikacji reactowych

Testy to hasło, które potrafi wzbudzić lęk u osób uczących się Reacta, lub jakiejkolwiek innej technologii. Rzadko kto jednak mówi to głośno – testy są przyjemne! Wystarczy tylko zrozumieć w jaki sposób środowisko testowe działa i jakimi rządzi się zasadami. Przerobimy to wszystko wspólnie, a na koniec kursu przekonasz się, że to faktycznie ciekawe i przyjemne zagadnienie.

Dobre praktyki

W kursie przygotowana jest też garść dobrych praktyk, które pozwolą Ci spojrzeć krytycznie na niektóre fragmenty kodu i ulepszać je w taki sposób, aby stanowiąc część większej całości miały więcej sensu i wdzięku. Dowiesz się czym jest Single Responsibility Principle, jak wydzielać odpowiednio logikę z komponentów i paru innych ciekawych wskazówek.

Dla kogo jest ten kurs?

Ten kurs został stworzony z myślą o programistach swobodnie poruszających się po podstawach i nieco bardziej skomplikowanych partiach Reacta, ale nadal czujących, że brakuje im czegoś, aby wynieść swoje aplikacje na jeszcze wyższy poziom. Rzeczy związane z zaawansowanym JavaScriptem będziemy tu wykorzystywać intuicyjnie, bez zbędnego tłumaczenia, dlatego zanim przystąpisz do tego kursu, upewnij się, że treści React od Podstaw oraz React w Praktyce są dla Ciebie jasne i zrozumiałe.

Dlaczego wybrać właśnie ten kurs?

  1. 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!
  2. 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.
  3. 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ń.
6 godzin

Kurs React
Techniki Zaawansowane

Higher Order Components, Render Props, Compound Components... React pełen jest wzorców i narzędzi, których nazwy potrafią przyprawić o ból głowy. Właśnie po to, by uniknąć tego przytłoczenia, został przygotowany ten kurs. Skupimy się w nim praktycznie wyłącznie na React'cie, który mimo że jest niepozorną biblioteką, to kryje w sobie ogromny potencjał i jeszcze większą swobodę działania dla developera. W dużych, komercyjnych aplikacjach wzorce, o których wspominamy, pojawiają się niesłychanie często, a ich poprawne zrozumienie to jedyna droga do tego, abyśmy nie czuli się nieswojo patrząc na nieco bardziej skomplikowany kod.

Adam Romanski

7 godzin

Kurs React
w Praktyce

Wiele materiałów dostępnych w sieci zawiera wskazówki jak używać Reacta, jednak brakuje im praktycznego wymiaru. Stosowanie tej technologii w prawdziwym projekcie nieco różni się od prostych przykładów, które na ogół możemy znaleźć. Tak powstał pomysł na kurs React w Praktyce, w którym dowiesz się, z jakich technologii React developerzy korzystają na co dzień, jak konfigurują projekty, jak radzą sobie z problemami zarówno wynikającymi ze skomplikowania interfejsu, jak i logiki biznesowej zawartej w aplikacji.

Adam Romanski

5 godzin

Kurs React
od Podstaw

Od kilku lat React niepodzielnie króluje wśród frameworków JavaScript. Ogromna swoboda jaką daje, intuicyjny sposób tworzenia komponentów i potężny ekosystem wspierający developera niemal w każdej sytuacji, to niewątpliwie największe zalety tej technologii. W tym kursie dowiesz się, w jaki sposób wycisnąć w Reacta jak najwięcej. Odkryjesz jego prawdziwy potencjał i dogłębnie poznasz zagadnienia, które stanowią trzon tego frameworka. Aby zrozumieć rzeczy zaawansowane, należy solidnie opanować podstawy – w tym własnie chcę Ci pomóc.

Adam Romanski

Autor: Adam Romanski

Frontend developer & YouTube Creator

Cześć! Nazywam się Adam Romański i sam siebie nazywam kreatywnym front-endowcem, ponieważ zanim dołączyłem do branży IT, wiele lat spędziłem pracując jako copywriter. Na co dzień pracuję w jednym z największych software house'ów w Polsce, realizując ambitne projekty dla zagranicznych klientów. Dzięki tej pracy zdobyłem sporo doświadczenia, którym chętnie się z Tobą dzielę. W moim przypadku pasja do uczenia innych przejawia się także w inny sposób. „Po godzinach” zajmuję się vlogiem Hello Roman na YouTube, który w kilka miesięcy zdobył prawdziwą rzeszę fanów. Możesz go odwiedzić klikając w ten link: https://youtube.com/helloroman Do tej pory zrealizowałem wiele projektów zarówno w React, Vue, Gatsby jak i innych technologiach, co pozwoliło mi nabrać pewności siebie a także poszerzyć nieco moje perspektywy. Liczę, że moje kursy dadzą Ci to samo! To dla mnie ogromne wyróżnienie, lecz także ogromna odpowiedzialność. Za pośrednictwem vloga opowiadam o moich przemyśleniach dotyczących programowania, branży IT, a także tworzę materiały z praktycznymi, technicznymi poradami. Do tej pory zrealizowałem wiele projektów zarówno w React, Vue, Gatsby jak i innych technologiach, co pozwoliło mi nabrać pewności siebie a także poszerzyć nieco moje perspektywy. Liczę, że moje kursy dadzą Ci to samo!

https://youtube.com/helloroman

Recenzje Kurs React

4

14 dodanych ocen

2019-05-18

OK

Krzysztof Walencik

2019-06-04

Kurs merytorycznie jest dobrej jakości natomiast jest kilka rzeczy, które obniżają jakość kursu jako całości. Jednym minusem jest pisanie kodu w edytorze zwężonym na ułamek szerokości ekranu co bardzo zmniejsza czytelność kodu podczas oglądania kursu. Druga rzecz, która jest już bardzo irytująca to to jak autor coś mówi i nagle przerywa po czym mówi znów to samo po 2 czy 3 razy. Dziwne są również nagłe kilkusekundowe przerwy gdzie najpierw autor opowiada ci robi, a za chwilę jest cisza i nic się nie dzieje. Nie wiem czy te zachowania są celowe czy to błędy w montażu, ale nie są to jednorazowe przypadki, ale powtarza się to w co najmniej połowie filmów z kursu.

Piotr Machacki

2019-06-09

Super kurs i bardzo polecam, masa informacji - warto było kupić i poświęcić czas na przerobienie tego materiału ;). Teraz czekam na kolejny (zaawansowany)

Małgorzata NG

2019-06-18

Najgorsze wydane 160zł...

Krzysztof Łakomy

2019-07-01

Merytorycznie bardzo dobry kurs. Próbowałem już kilku kursów Reacta, płatnych i darmowych i zdecydowanie ten kurs wygrywa. Przede wszystkim zagadnienia są tłumaczone na jednym, większym projekcie, który jest robiony od początku do końca i dopracowywany w szczegółach. Inne kursy często tłumaczą tematy na prostych przykładach niezwiązanych ze sobą i wprawdzie można z nich dużo zrozumieć, ale później jest problem z użyciem tej wiedzy w własnym, większym projekcie. Kurs Adama nie tylko tłumaczy zagadnienia, ale przygotowuje do realnej, praktycznej pracy. Pod tym względem bardzo polecam!! Niestety pod względem technicznym jest dużo niedociągnięć - w wielu lekcjach słychać powtórzenia zdań, dłuższe przerwy itp. - rzeczy, które prawdopodobnie miały być wycięte w montażu, ale widocznie umknęły. Do tego jedna lekcja urywa się w trakcie i nie jest w niej w zasadzie poruszony temat, o którym miała być (Dodawanie backendu - Ekran ładowania wyników). Ogólnie jak dla mnie najlepszy kurs Reacta, jaki znam. Polecam wszystkim! Jedną gwiazdkę odejmuję za wspomniane niedociągnięcia techniczne, ale mam nadzieję, że zostaną poprawione, a kurs będzie zaktualizowany.

Maciej Korolik

2019-07-02

@Maciej Korolik - dokładnie to samo chciałem napisać. Do tego uważam, że niedoróbki i niedociągnięcia powinny być naprawione a lekcja urwana wymaga dogrywki materiału. Testy zrobione bardzo pobieżnie.

Aleksander Jedynak

2019-07-07

Kurs ciekawy, pomysł na aplikację również. Generalnie dobry, wysokiej jakości merytorycznej ale jest kilka "ale", które składają się na duże utrudnienia: * autor zostawia nas z trywialnym zadaniem domowym, po czym w następnym odcinku okazuje się, że oprócz zadania trzeba było pozmieniać to, tamto, siamto, zaingerować w inne pliki i zaimplementować nowe rozwiązania, więc kolejny odcinek to zwykle ZONK i rozczarowanie, że moje rozwiązanie nie zadziałało, bo należało wykonać wiele dodatkowych manewrów. * co za tym idzie, a jednocześnie kolejny duży kłopot - autor komunikuje, że teraz zrobi coś tam coś, nagle przyśpieszając tempo i nie wiadomo skąd tworzą się w magiczny sposób dziesiątki dodatkowego kodu, który nie zostaje omówiony krok po kroku. Niby kurs w praktyce dla nieco zaawansowanych, ale metodyka z czasem/z kolejnymi odcinkami odbiega od standardu tłumaczenia co, skąd i dlaczego. Możliwe, że wynika to wszystko z dobrych chęci autora, aby zaoszczędzić nasz czas, ale właśnie takie smaczki i niedociągnięcia powinny zostać rozbijane na dodatkowe minuty/godziny i omawiane krok-po kroku co, skąd, dlaczego, w którym momencie nawet jeśli zagadnienie wystąpiło wcześniej, bo przecież powtarzalność (trening) czyni mistrza:)

Marek Kazimierczak

2019-07-09

Merytorycznie na plus. Bardzo doceniam działalność Pana Romana i Grzegorza. Jednak montaż zostawia sporo do życzenia. Zastanawiam się czy ktoś to obejrzał od początku do końca? Praktycznie w co drugim odcinku są jakieś powtórzenia prowadzącego albo dłuższe zawieszki, które wystarczyłoby powycinać.

Damian Duszynski

2019-07-12

Ilość powtórzeń i przerw jak dla mnie jest niedopuszczalna. Montaż i weryfikacja materiału leży po całości, co nie powinno mieć miejsca przy takiej klasie portalu oraz cenie kursu.

Piotr Skóra

2019-07-14

Działa Wam backend dołączony do kursu? Bo próbowałem już wszystkiego, metody HTTP nie działają. Przy metodzie GET np. ciągle dostaję w Postmanie 500. Po skopiowaniu kodu z plików źródłowych jest to samo. Pytanie czy mam jakiś lokalny problem czy coś poszło nie tak przy pisaniu backendu.

janusz coder

2019-07-31

@janusz, czy możesz napisać do nas maila, postaramy się pomóc. Zweryfikowaliśmy ponownie back-end i nie znaleźliśmy błędów. Może coś specyficznego w Twoim setupie. @Piotr i reszta osób - przepraszamy za to. Niestety zawiodła nasza recenzja, co połączone z lekką presją na wydanie kursu doprowadziło do tego, że znalazły się w nim błędy montażowe. Poprawki zostały wprowadzone, ale okazało się że finalnie zostały omyłkowo nadpisane przez wersję wcześniejszą i to z niej poszedł render :( Poprawiamy je na bieżąco i wgrywamy nowe lekcje. W tym momencie powinno być już dużo lepiej a za 2-3 dni - idealnie. Wyciągnęliśmy z tego wnioski i taka sytuacja już się nie powtórzy. Ogólnie, wiele drobnych rzeczy złożyło się na większy problem. Przepraszamy, bo mimo, że kurs merytorycznie jest super, nie powinniście od nas dostać czegoś, co nie jest też idealnie złożone! 🙌

Grzegorz Róg

2019-10-10

Oglądam kursy Romana odnośnie Reacta na eduweb od początku i ten, tak jak i pierwszy (od podstaw) oceniłbym na dobry merytorycznie. Jest w nich dużo pożytecznej wiedzy, którą ciężko by było momentami pozyskać z dokumentacji, a tworzone wspólnie projekty są z życia wzięte, więc uzyskujemy w tym kursie dobre propozycje rozwiązania codziennych problemów. Minusem jednak jest to, że w kursie często pojawiają się elementy, których autor nie tłumaczy dostatecznie dobrze i są jedynie wspominane, co czasami umyka podczas oglądania i kilka lekcji później można się zastanawiać dlaczego u nas nie działa to tak jak u autora. Ponadto pojawiają się również fragmenty, które nie są poruszane, a autor odwołuje się do swojego poprzedniego kursu, z którym nie każdy musiał mieć styczność, a w którym też nie zawsze występują, jak dla przykładu rzecz trywialna - zbudowanie projektu przy pomocy create-react-app. Ta nazwa jedynie pojawiła się w kursie, ale odbiorca uzyskał jedynie gotową templatkę projektu w plikach źródłowych. Ktoś, kto nie używał nigdy narzędzi pokroju npm mógłby mieć problem z instalacją, która nie została pokazana. Jak dla mnie kurs jest wybrakowany i za krótki w odniesieniu do tematyki, którą porusza. W ramach abonamentu można jak najbardziej obejrzeć, ale za cenę trzech kursów wolałbym zaopatrzyć się w dobrą lekturę.

Patryk Janas

2019-10-24

Trochę naciągana piątka bo testy zrobione bardzo pobieżnie.

Marcin Koszykowski

2019-11-20

Jest to najlepszy kurs z całej serii. Po pierwsze prowadzony jest projektowo, co pokazuje jak budować realną aplikację end-to-end, po drugie - używane są najlepsze praktyki i najnowsze narzędzia. Koncepcje dotyczące Reduxa, wytłumaczone są tak przystępnie, że nie da się tego nie zrozumieć. Nikt nigdy nie wytłumaczył mi tak Reduxa, jak Roman. Testowanie dość po macoszemu, ale o wiele więcej jest w kolejnym kursie. Dzięki za to złoto! Polecam z całego serduszka.

Bartosz Ligęza

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje
Wykup w abonamencie od 79zł
Przetestuj za darmo przez 7 dni!

Autor: Adam Romanski

Czas: 7 godzin

Wersja:

  • Pliki źródłowe
  • Certyfikat Ukończenia
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół

Wstęp

  • Wprowadzenie

  • Dlaczego React w praktyce?

  • Co będziemy tworzyć?

  • Czego nauczysz się w tym kursie?

Setup projektu

  • Konfiguracja projektu

  • Konfiguracja ESlint

  • Zmiana reguł ESlint

  • Konfiguracja Prettiera

  • Konfiguracja Husky i Lint-staged

Styled components

  • Wstęp do styled components

  • Styled components – konfiguracja

  • Struktura projektu

  • Przekazywanie propsów

  • Przekazywanie propsów cz.2

  • Tworzenie globalnych stylów

Storybook

  • Konfiguracja storybooka

  • Pierwszy komponent

  • Storybook knobs

  • Wstęp do atomic design

  • Theme Provider

  • Globalne zmienne

Tworzenie interfejsu

  • Komponent Input

  • Podawanie ikony jako props

  • Tworzenie molekuły karty

  • Rozbudowa komponentu karty

  • Rozbudowa komponentu karty cz.2

  • Dodawanie react router

  • Stworzenie sidebara

  • Osadzanie sidebara w aplikacji

  • Przygotowanie szablonu dla notatek

  • Przygotowanie szablonu dla notatek cz.2

  • Widok szczegółów notatki

  • Widok szczegółów notatki cz.2

  • Widok szczegółów notatki cz.3

React Redux

  • Wprowadzenie do Reduxa

  • Jak działa reducer

  • Czym jest action creator

  • Konfiguracja React Redux

  • Łączenie store z komponentem

  • Instalacja narzędzi developerskich

  • Tworzenie akcji usunięcia elementu

  • Usuwanie elementów ze store

  • Refactoring aplikacji

  • Wprowadzenie do Higher Order Component

  • Ulepszanie aplikacji dzięki HOC

  • Tworzenie panelu dodawania notatek

  • Renderowanie warunkowe i animacje

  • Dodawanie notatek

  • Konfiguracja formika

Dodawanie Backendu

  • Czym jest API

  • Lokalna konfiguracja backendu

  • Bonus - MongoDB Atlas

  • Czym jest Axios

  • Akcja logowania

  • Logowanie użytkownika

  • Pobieranie danych z backendu

  • Ekran ładowania wyników

  • Wyświetlanie pojedynczej notatki

  • Wyswietlanie pojedynczej notatki cz. 2

  • Usuwanie elementów

  • Dodawanie elementów

Podstawy testowania

  • Rodzaje testów

  • Czym jest JEST?

  • Piszemy pierwszy test