Kurs React

Wprowadzenie

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

13 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ń.

Autor: Adam Romanski

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!

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!

5

Średnia ocen autora

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

}