React: Czym jest JSX
od Podstaw
4 godz. 55 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorCzego 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
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?
- 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!
- 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.
- 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.
W poprzedniej lekcji stało się coś bardzo dziwnego. Zaimportowaliśmy do naszego
pliku React, ale nigdzie go nie wykorzystaliśmy. W przeciwieństwie do ReactDOM, którego
metody użyliśmy, żeby wyrenderować naszą aplikację. Stało
się tak dlatego, że użyliśmy tutaj takich tagów, które być może przypominają
ci HTML'a. W końcu wyglądają dokładnie tak samo, jednak HTML'em nie
są. Żeby to zrozumieć musimy wyjaśnić czym jest JSX,
czyli tak zwany cukier syntaktyczny, który ułatwia nam pisanie komponentów
w React'cie. Gdybyśmy zrezygnowali z JSX'a w naszej aplikacji, to
tworzenie komponentów wyglądałoby tak, że
używali byśmy metody React.createElement, która
przyjmuje następujące parametry: element, props'y,
o których dowiesz się później w tym kursie oraz tak
zwany children, czyli dzieci. Zacznijmy od tego pierwszego. Tutaj
możemy stworzyć sobie na przykład nasz znacznik H1. W props'ach, które
mogłyby być na przykład klasą, którą nadalibyśmy temu komponentami, na razie
nie zrobimy nic. Podamy null, natomiast w children zawrzemy
całą treść, całą zawartość naszego elementu. W tym
przypadku będzie to Hello World i teraz bez problemu
możemy podmienić nasze tag'i H1 w metodzie
render na naszą zmienną, a właściwie const'a - App. Jak
widzisz, strona wygląda dokładnie tak samo. Możemy
nawet zmienić tutaj tekst i on również się zmien, więc za każdym razem, kiedy
widzisz w React'cie tagi przypominające ci HTML'a, to tak naprawdę jest to cukier
syntaktyczny, czyli taka nakładka, która pozwala, żeby to wszystko wyglądało
ładniej,a tak naprawdę jest to po prostu wywołanie tej metody
i pewnie zastanawiasz się teraz, co jeśli przy użyciu tej metody createElement chciałbym
zrobić coś bardziej skomplikowanego, na przykład stworzyć diva, w którym miałbym
dwa head'y. Jeden to będzie H1, drugi to będzie H2. Nic
prostszego, po
prostu zagnieżdżamy te struktury i
nasz
element został poprawnie wyrenderowany. Zrozumienie, że tag'i HTML'owe w React'cie
tak naprawdę nie są HTML'em, tylko JSX'em, który jest później
kompilowany do takiej postaci. Jest kluczowe, żeby zrozumieć jak działa
React, ponieważ w trakcie trwania tego kursu, zauważysz wiele abstrakcji,
które wykorzystują tę możliwość, które pozwalają na robienie
rzeczy, które normalnie w HTML'u nigdy nie byłyby możliwe. Pamiętasz
jak chwilę temu wspominałem, że w tym miejscu podajemy props'y i że można by było
tutaj zawrzeć nazwę klasy dla elementu. Zróbmy to w tej chwili, ponieważ JSX
zawiera jeszcze jedną, dość dziwną rzecz, do której ciężko się przyzwyczaić i o
której łatwo zapomnieć. Żeby nadać klasę elementowi
w React'cie, musimy podać props'a o nazwie className. Zróbmy
to dla każdego elementu. Sprawdźmy
czy nasze elementy otrzymały te klasy. Jak
widzisz zarówno div oplatający nasze header'y ma klasę wrapper,
jak i H1 i H2 otrzymały klasy, które podaliśmy w tym miejscu. Warto
zauważyć, że props, który podawaliśmy, czyli className nie jest podany tutaj jako className,
tylko właśnie jako class. Natomiast jeśli podalibyśmy na przykład naszemu div'owi
innego props'a, nazwijmy go items, to
ten props pojawi się już jako własna nazwa, więc warto pamiętać
o tym, że zawsze kiedy chcemy dać klasę React'cie, używamy className. W
tej chwili nie jest istotne do czego służą props'y. Tym zajmiemy się za chwilę. Po
prostu chciałem ci pokazać, że to co podajemy tutaj jest
później interpretowane przez React'a i przekazywane do normalnej
aplikacji. Skoro już wyjaśniliśmy czym jest JSX, jak on działa, do
czego się kompiluje, jak on wygląda pod maską, to teraz
czas przejść do następnej lekcji, w której wyjaśnię jak zrobić dokładnie to samo, ale
przy wykorzystaniu właśnie JSX'a bez tej okropnej składni, która
jak zakładam, przy większych projektach, przyprawiła by niejednego dewelopera
zawrót głowy. Do zobaczenia w następnej lekcji.