Kurs React

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

64 ocen

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. Praktyczne zastosowanie React
  2. Konfiguracja projektu
  3. Konfiguracja ESlint, Prettier, Husky
  4. Wykorzystanie Styled Components
  5. Stworzenie Storybooka
  6. Stworzenie zaawansowanego interfejsu aplikacji
  7. Łączenie frontendu z backendem za pomocą API
  8. Wprowadzenie do testów

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.

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ń.
3 godziny 17 minut

Kurs Apollo Client z React.js

w Praktyce

Apollo to jeden z największych graczów w ekosystemie GraphQL, zarówno od strony Backendu jak i Frontendu. Ogromna społeczność oraz genialne rozwiązania technologiczne dają możliwość pisania aplikacji opartych o GraphQL w błyskawicznym tempie. W tym kursie poznasz czym jest Apollo Client i jak go używać razem z Reactem.

Przemysław Nowak

40 minut

React Server Components

Przegląd Konceptu

React Server Components to koncepcja wykorzystania komponentów React.js po stronie serwera w celu przyspieszenia działania aplikacji oraz zmniejszenia rozmiaru wygenerowanej paczki. Obecnie RSC są na wczesnym etapie koncepcji i do dyspozycji mamy wyłącznie wersję demo. W tym warsztacie przyjrzymy się temu bliżej i porozmawiamy o tym, co oznacza przenoszenie ciężaru aplikacji na stronę serwera. Czy wkrótce każdy z nas będzie full-stack developerem?

Adam Gospodarczyk

5 godzin 51 minut

Kurs React Native

Mobilne Aplikacje z React

Tworzenie aplikacji mobilnych zawsze kojarzyło się z czymś trudnym i wymagającym. Jednak mimo pewnych różnic względem tworzenia stron internetowych mobile to dalej front-end, który przy pomocy React Native możesz tworzyć tak samo prosto i wygodnie, jak wersje webowe! W tym Kursie dowiedz się jak wykorzystać tę technologię, tak, by już wkrótce być w stanie stworzyć swoją pierwszą aplikację mobilną.

Piotr Szaciński

31 minut

Formularze w Gatsby.js

Z Firebase i SendGrid

W tym Warsztacie w ciągu zaledwie 30 minut dowiesz się, jak stworzyć prosty i bezpieczny mechanizm wysyłania maili przez formularz osadzony na stronie internetowej. A wystarczą do tego trzy kroki - przekonaj się jakie!

Adam Romanski

4 godziny 29 minut

Kurs Gatsby.js

Szybkie i Nowoczesne Strony

# Wielki Gatsby Gatsby.js wdarł się na frontendowe salony niczym prawdziwa gwiazda! Unikalne rozwiązania dające ogromną swobodę developerom, w połączeniu z potężnym ekosystemem reactowym sprawiły, że już dawno żadna technologia nie wzbudziła takiego entuzjazmu i zainteresowania. Bądź na bieżąco z najnowszymi frontendowymi trendami i dowiedz się, na czym polega sekret tej fenomenalnej technologii. W kursie dowiesz się w jaki sposób poprawnie używać Gatsbyego, jak działa jego routing, w jaki sposób obsługiwać obrazki przy użyciu GraphQL, a także jak budować warstwę danych zasilającą aplikację w odpowiednie treści.

Adam Romanski

6 godzin 6 minut

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

30 minut

Hooks w React

Twórcy Reacta już jakiś czas temu oddali w ręce developerów potężne hooksy – rozwiązanie, które pewnego dnia może zastąpi komponenty klasowe. Zanim jednak wybiegniemy w przyszłość aż tak daleko, warto je po prostu poznać i zrozumieć. Zapraszam na warsztaty o podstawach React Hooks, podczas których pokażę kilka praktycznych zastosowań hooksów, dzięki którym lepiej zrozumiesz, czym tak naprawdę są i dlaczego tak wiele osób o nich mówi. Dowiesz się w jaki sposób możesz tworzyć stan w komponentach funkcyjnych przy użyciu hooka useState(), a także pokażę Ci, jak w prosty sposób możesz wykorzystywać useRef() do tworzenia refów, tak przydatnych podczas pracy z bibliotekami manipulującymi DOM.

Adam Romanski

4 godziny 55 minut

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

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

Autor: Adam Romanski

Czas: 6 godzin 51 minut

Wersja: 16.8.x

Aktualizacja: 25.05.2020

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

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

}