Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 22/ 64Komponent Input
React: Komponent Input
Czego się nauczysz
- Praktyczne zastosowanie React
- Konfiguracja projektu
- Konfiguracja ESlint, Prettier, Husky
- Wykorzystanie Styled Components
- Stworzenie Storybooka
- Stworzenie zaawansowanego interfejsu aplikacji
- Łączenie frontendu z backendem za pomocą API
- Wprowadzenie do testów
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.
Zróbmy to jak trzeba!
Narzędzia typu ESlint, Prettier, Husky czy lint-staged niezmiernie pomagają nam w pracy. Problem jednak polega na tym, że ich konfiguracja bywa kłopotliwa. W tym kursie dowiesz się, jak poprawnie skonfigurować te narzędzia, tak, aby nie wchodziły ze sobą w konflikty i pomagały nam pisać lepszy kod.
CSS in JS?!
Brzmi jak zły pomysł? Wcale nie! CSS in JS to rewolucyjne podejście, które pozwala nam tworzyć style bezpośrednio w komponentach. Dzięki bibliotece Styled Components możesz wpływać na ich stan, wygląd i wiele innych rzeczy. To niezwykłe narzędzie, wprowadzające powiew świeżości dla ludzi zmęczonych czystym CSS.
Storybook – czyli opowieść o komponentach
Dokumentowanie wyglądu i zachowania naszych komponentów bywa kłopotliwe. Jeśli jednak użyjemy odpowiednich narzędzi, staje się banalne! Storybook w połączeniu z podejściem atomic design pozwoli nam na stworzenie świetnie udokumentowanych komponentów.
Problemy z layoutem
React w Praktyce nie byłby... praktyczny, gdyby nie pokazanie tego, w jaki sposób rozwiązuje się problemy z layoutem aplikacji. Sidebary, szablony, powtarzalne komponenty – to wszystko poznasz w tym kursie.
Poznaj Reduxa
Tworzenie store, czyli warstwy z danymi w naszej aplikacji dla wielu bywa wyzwaniem dość trudnym. Wynika to często z tego, że przykłady Reduxa bywają niepraktyczne. W tym kursie dowiesz się, w jaki sposób działa Redux – zaczniemy od podstaw, a skończymy na rozbudowanej strukturze danych. Dzięki temu zobaczysz, że nie taki Redux straszny jak go malują.
Halo, backend?
Aplikacja frontendowa bez backendu może istnieć, choć jej możliwości będą zdecydowanie ograniczone. A już na pewno będzie ona miała kiepską pamięć. Dlatego w tym kursie stworzymy lokalną wersję backendu połączoną z MongoDB na mLab. W ten sposób będziemy mogli dłużej przechowywać dane zapisane w naszych komponentach.
Wprowadzenie do testów
O testach można mówić wiele. To niezwykle rozległy temat, dlatego zanim zaczniesz je pisać na poważnie, chcę Ci pokazać jak możesz poćwiczyć podstawowe rzeczy. Poznasz narzędzie JEST, które odpowiada za uruchamianie testów, oraz wprowadzę Cię do react-testing-library, jednej z najpopularniejszych bibliotek do testowania aplikacji reactowych.
Dla kogo jest ten kurs?
Ten kurs przeznaczony jest dla osób, które lada dzień będą aplikować na stanowiska juniorskie jako React developer. Zawarłem w nim wiele aspektów pracy z React, które zdarzają się w prawdziwej pracy. Ponadto skorzystać mogą z niego osoby, które znają inny framework JS i chcą nauczyć się Reacta, jednak kursy od podstaw są dla nich zbyt proste.
Wersja oprogramowania: 16.8.x
Kurs React
8 rozdziałów64 lekcje6h 51min
Wstęp
17min
- Wprowadzenie4min(zablokowana)
- Dlaczego React w praktyce?5min(zablokowana)
- Co będziemy tworzyć?5min(zablokowana)
- Czego nauczysz się w tym kursie?3min(zablokowana)
Setup projektu
34min
- Konfiguracja projektu6min(zablokowana)
- Konfiguracja ESlint7min(zablokowana)
- Zmiana reguł ESlint5min(zablokowana)
- Konfiguracja Prettiera7min(zablokowana)
- Konfiguracja Husky i Lint-staged9min(zablokowana)
Styled components
33min
- Wstęp do styled components5min(zablokowana)
- Styled components – konfiguracja4min(zablokowana)
- Struktura projektu7min(zablokowana)
- Przekazywanie propsów6min(zablokowana)
- Przekazywanie propsów cz.25min(zablokowana)
- Tworzenie globalnych stylów7min(zablokowana)
Storybook
34min
- Konfiguracja storybooka7min(zablokowana)
- Pierwszy komponent5min(zablokowana)
- Storybook knobs7min(zablokowana)
- Wstęp do atomic design5min(zablokowana)
- Theme Provider6min(zablokowana)
- Globalne zmienne4min(zablokowana)
Tworzenie interfejsu
1h 42min
- Komponent Input7min(zablokowana)
- Podawanie ikony jako props7min(zablokowana)
- Tworzenie molekuły karty11min(zablokowana)
- Rozbudowa komponentu karty7min(zablokowana)
- Rozbudowa komponentu karty cz.26min(zablokowana)
- Dodawanie react router7min(zablokowana)
- Stworzenie sidebara9min(zablokowana)
- Osadzanie sidebara w aplikacji8min(zablokowana)
- Przygotowanie szablonu dla notatek6min(zablokowana)
- Przygotowanie szablonu dla notatek cz.27min(zablokowana)
- Widok szczegółów notatki7min(zablokowana)
- Widok szczegółów notatki cz.29min(zablokowana)
- Widok szczegółów notatki cz.39min(zablokowana)
React Redux
1h 49min
- Wprowadzenie do Reduxa8min(zablokowana)
- Jak działa reducer7min(zablokowana)
- Czym jest action creator4min(zablokowana)
- Konfiguracja React Redux6min(zablokowana)
- Łączenie store z komponentem10min(zablokowana)
- Instalacja narzędzi developerskich7min(zablokowana)
- Tworzenie akcji usunięcia elementu7min(zablokowana)
- Usuwanie elementów ze store7min(zablokowana)
- Refactoring aplikacji10min(zablokowana)
- Wprowadzenie do Higher Order Component9min(zablokowana)
- Ulepszanie aplikacji dzięki HOC3min(zablokowana)
- Tworzenie panelu dodawania notatek7min(zablokowana)
- Renderowanie warunkowe i animacje6min(zablokowana)
- Dodawanie notatek8min(zablokowana)
- Konfiguracja formika11min(zablokowana)
Dodawanie Backendu
1h 8min
- Czym jest API8min(zablokowana)
- Lokalna konfiguracja backendu4min(zablokowana)
- Bonus - MongoDB Atlas5min(zablokowana)
- Czym jest Axios5min(zablokowana)
- Akcja logowania9min(zablokowana)
- Logowanie użytkownika5min(zablokowana)
- Pobieranie danych z backendu8min(zablokowana)
- Ekran ładowania wyników4min(zablokowana)
- Wyświetlanie pojedynczej notatki5min(zablokowana)
- Wyswietlanie pojedynczej notatki cz. 26min(zablokowana)
- Usuwanie elementów6min(zablokowana)
- Dodawanie elementów4min(zablokowana)
Podstawy testowania
14min
- Rodzaje testów3min(zablokowana)
- Czym jest JEST?6min(zablokowana)
- Piszemy pierwszy test5min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Autor kursu
Bio
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!