Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Lekcja 6/ 48Czym jest JSX

0:00 / 0:00

React: Czym jest JSX

4 godz. 55 min wideo48 lekcji7 modułów

Adam RomanskiFrontend developer & YouTube Creator
Wszystkie kursy autora

Czego się nauczysz

  • Doglebne wyjasnienie zasad rzadzacych Reactem
  • Stworzenie aplikacji wykorzystujacej potencjal Reacta
  • Wykorzystanie React Router i jego komponentów w praktyce
  • Przygotowanie do pracy w nowych projektach i z legacy code
  • Stworzenie struktury aplikacji w oparciu o najlepsze praktyki
  • Rozwiazania pochodzace z prawdziwej pracy nad wieloma projektami

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.

Wszystkie tresci podzielilem na piec rozdzialów, w których bedziemy rozwijac wymyslona przeze mnie aplikacje sluzaca do kolekcjonowania najciekawszych artykulów, notatek oraz kont twitterowych znalezionych w sieci.

Twoje pierwsze kroki w React

Zaczniemy od prostych widoków, na podstawie których wyjasnie Ci, co stoi u podstaw Reacta – dowiesz sie czym jest JSX, oraz poznasz pojecie komponentu funkcyjnego. Dzieki temu oswoisz sie ze skladnia Reacta, która poczatkowo moze wydawac sie nieco obca.

Witaj w swiecie komponentów

W React niemal wszystko opiera sie o komponenty. Czym one sa? Dowiesz sie tego w drugim rozdziale. Opowiem Ci jak je tworzyc oraz jak tworzyc relacje miedzy nimi. Wyjasnie Ci bardzo szczególowo jak dzialaja propsy oraz w jakich sytuacjach nalezy je wykorzystywac. Zobaczysz tez, jak w Reactcie pracujemy z danymi, jak mozemy je przetwarzac a nastepnie stosujac kilka strategii stylowania komponentów, wszystko wyswietlic w atrakcyjny sposób.

Komponenty z klasa

W trzecim rozdziale poznasz sposób konstruowania komponentów klasowych, posiadajacych wlasny stan, dzieki któremu stworzysz miedzy innymi dynamiczny, inteligentny formularz, a takze wiele innych interaktywnych elementów. Dzieki temu szybko zrozumiesz róznice miedzy komponentami funkcyjnymi a klasowymi.

Wytyczamy nowe sciezki

Kiedy juz poczujesz sie dosc pewnie budujac komponenty, dodamy tzw. routing w rozdziale czwartym, który pozwoli nam na stworzenie wielu podstron, które urozmaica nasza aplikacje – dowiesz sie dzieki temu jak integrowac dodatkowe narzedzie w naszym projekcie, oraz jak budowac bardziej skomplikowana strukture aplikacji.

Odkryj potencjal Reacta

Na sam koniec zostaimy sobie tzw. state managment, czyli zarzadzanie informacjami wspóldzielonymi przez wiele komponentów i podstron. Nie wykorzystamy jednak ani Reduxa ani Mobxa, poniewaz chce Ci pokazac, ze w samym Reactcie kryje sie ogromny potencjal nawet przy tak kompleksowych zadaniach. W tym przypadku uzyjemy Context API, który w latwy sposób pozwala nam teleportowac dane z jednego miejsca naszej aplikacji do drugiego. Podczas rozbudowywania naszej aplikacji o Context API dopracujemy tez wszystkie inne jej elementy, aby na samym koncu kursu wydeployowac nasz gotowy produkt w serwisie Netlify – zobaczysz, ze wypuszczenie aplikacji Reactowej do sieci i udostepnienie jej innym, jest niezwykle proste.W tym kursie skupiamy sie wylacznie na Reactcie z uzyciem jedynie niezbednych narzedzi. Wierze, ze doskonale opanowanie fundamentów, na których opiera sie ta technologia pozwoli Ci pózniej latwiej wkroczyc w swiat setek pluginów i paczek dostepnych w jego ekoystemie.

Dlaczego wybrac wlasnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, bys caly czas mógl go sledzic z zainteresowaniem i zaangazowaniem, a takze czerpac satysfakcje ze zdobytej wiedzy!
  2. Wiedza, która otrzymujesz w tym kursie, to nie tylko sucha teoria, ale równiez wskazówki od praktyka z wieloletnim doswiadczeniem, dzieki którym duzo latwiej bedzie Ci opanowac material.
  3. Uczysz sie na praktycznych przykladach. Kurs, który masz przed soba to esencja praktycznej wiedzy i doswiadczenia a takze wzorów, które oszczedza Ci godziny pracy i poszukiwan.

Dla kogo jest ten kurs?

Ten kurs powstal z mysla o osobach chcacych zaczac swoja przygode z frameworkami JavaSript. Zaklada on wiedze na temat podstaw JavaScript (w tym ES6), jednak przy bardziej skomplikowanych rozwiazaniach zawsze pojawia sie slowo wyjasnienia. \n\nPoziom kursu zostal dopasowany do osób, które maja za soba juz kilka projektów w czystym JavaScript i chca wejsc na wyzszy poziom, przygotowujac sie tym samym do pracy z ta technologia.

Kurs React

7 rozdziałów48 lekcji4h 55min

Wstęp do kursu

16min
  • Wprowadzenie5min(zablokowana)
  • Czym jest React6min(zablokowana)
  • Jakie problemy rozwiązuje React2min(zablokowana)
  • Czego dowiesz się w tym kursie3min(zablokowana)

Pierwsze kroki

23min
  • Render po raz pierwszy5min(zablokowana)
  • Czym jest JSX6min(zablokowana)
  • Tworzenie komponentu funkcyjnego5min(zablokowana)
  • Przygotowanie struktury aplikacji7min(zablokowana)

Podstawy komponentów

42min
  • Omówienie struktury projektu3min(zablokowana)
  • Przygotowanie pierwszych komponentów7min(zablokowana)
  • Stylowanie komponentu ListItem7min(zablokowana)
  • Dodawanie propsów8min(zablokowana)
  • Mapowanie tablicy5min(zablokowana)
  • Refactoring komponentu6min(zablokowana)
  • Czym są PropTypes6min(zablokowana)

Komponenty klasowe i stan

1h 22min
  • Nowe funkcje aplikacji4min(zablokowana)
  • Pierwszy komponent klasowy5min(zablokowana)
  • Modyfikowanie stanu komponentu5min(zablokowana)
  • Stary zapis komponentów klasowych5min(zablokowana)
  • Stworzenie rodzica ze stanem aplikacji6min(zablokowana)
  • Pobieranie danych od komponentów dzieci8min(zablokowana)
  • Dodawanie nowego elementu listy7min(zablokowana)
  • Dodawanie CSS Modules i SCSS8min(zablokowana)
  • CSS Modules w praktyce7min(zablokowana)
  • Refactoring formularza7min(zablokowana)
  • Ekstrakcja komponentu10min(zablokowana)
  • Renderowanie warunkowe10min(zablokowana)

Podstawy routingu

1h 13min
  • Nowe funkcje aplikacji - routing4min(zablokowana)
  • Czym jest React Router3min(zablokowana)
  • Rozbudowa struktury aplikacji7min(zablokowana)
  • React Router - pierwsze kroki6min(zablokowana)
  • Czym jest Switch6min(zablokowana)
  • Tworzenie menu z komponentem NavLink7min(zablokowana)
  • Stylowanie headera10min(zablokowana)
  • Tworzenie modala7min(zablokowana)
  • Otwieranie i zamykanie modala6min(zablokowana)
  • Tworzenie dynamicznego formularza8min(zablokowana)
  • Renderowanie warunkowe pól formularza8min(zablokowana)

Stan aplikacji z Context API

50min
  • Czym jest Context API9min(zablokowana)
  • Context API w praktyce7min(zablokowana)
  • Tworzenie inteligentnego formularza9min(zablokowana)
  • Instalujemy React Dev Tools4min(zablokowana)
  • Dynamiczne przypisywanie notatek do kategorii8min(zablokowana)
  • Wyświetlanie notatek w kategoriach8min(zablokowana)
  • Ostatnie poprawki5min(zablokowana)

Podsumowanie

11min
  • Deployment aplikacji na Netlify4min(zablokowana)
  • Podsumowanie kursu6min(zablokowana)
  • Zakończenie1min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Średnia ocen autora: 4,6

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!