Nowoczesny React: Do czego używamy React?
od Podstaw
5 godz. 59 min · ReactJS · Full-stack i Programowanie
Michał JabłońskiCzego się nauczysz
- Podstawy React jako biblioteki UI
- Konfiguracja środowiska programistycznego
- Składnia i reguły JSX
- Komponenty React jako podstawowe bloki aplikacji
- Przekazywanie danych przez props
- Renderowanie list i kolekcji
- Renderowanie warunkowe elementów
- Stylowanie komponentów i moduły CSS
- Zarządzanie stanem aplikacji
- Hook useState do przechowywania danych
- Hook useEffect do efektów ubocznych
- Routing i nawigacja w aplikacji SPA
- Parametry dynamiczne w adresach URL
- Obsługa formularzy i walidacja danych
- Integracja z biblioteką Formik
- Komunikacja z API backendowym
- Obsługa operacji asynchronicznych
- Zarządzanie stanem ładowania i błędów
- Narzędzia deweloperskie do debugowania
- Konfiguracja środowiska produkcyjnego
- Deploy aplikacji na platformie hostingowej
Nowoczesny React
React przeszedł długą ścieżkę rozwoju i część z jego funkcjonalności nie są już powszechnie używane. Dlatego w tym kursie skupimy się na najnowszych technikach pracy z biblioteką - poznasz współczesne podejście do budowania komponentów z wykorzystaniem hooks (useState, useEffect), zrozumiesz zasady kompozycji i zarządzania stanem aplikacji. Pokażemy Ci też jak efektywnie korzystać z narzędzi deweloperskich, debugować kod i wdrażać aplikacje na produkcję z użyciem współczesnych platform jak Vercel.
Hooki
Hooki to fundament nowoczesnego Reacta, który całkowicie zmienił sposób tworzenia komponentów. W kursie nauczysz się efektywnie zarządzać stanem aplikacji używając useState, wykorzystywać useEffect do operacji lifecycle i side-effects, oraz poznasz reguły korzystania z hooków. Wszystko to przećwiczysz w praktycznych zadaniach, takich jak implementacja filtrowania listy elementów, gdzie zastosujesz zdobytą wiedzę w realnym scenariuszu.
Formularze
Obsługa formularzy to nieodłączny element każdej aplikacji webowej. Pokażemy Ci jak kontrolować wartości pól input, wykorzystać popularną bibliotekę Formik do zarządzania złożonymi formularzami oraz implementować walidację danych. Wiedza ta zostanie utrwalona poprzez praktyczne zadanie, w którym rozwiniesz formularz o dodatkowe pola i zastosujesz poznane techniki w rzeczywistym przypadku użycia.
Połączenie z back-endem
Większość aplikacji wymaga komunikacji z serwerem. Nauczysz się jak poprawnie wykonywać operacje asynchroniczne w komponentach React, obsługiwać stany ładowania i błędów, oraz efektywnie korzystać z klienta HTTP do zapytań AJAX. Zaczniesz od pracy z przygotowanym mockiem API, by następnie przejść do prawdziwej integracji z back-endem. W praktycznym zadaniu zaimplementujesz pełny przepływ danych - od pobrania, przez wyświetlenie, aż po wysłanie na serwer.
Deployment
Poza budową aplikacji React, w kursie znajdziesz także moduł poświęcony wdrażaniu aplikacji na produkcję. Poznasz prawidłową konfigurację serwera produkcyjnego dla architektury SPA, nauczysz się zarządzać zmiennymi środowiskowymi poprzez pliki .env oraz przeprowadzisz deployment na platformie Vercel. Dzięki temu Twoja aplikacja będzie nie tylko działać lokalnie, ale także będzie gotowa do użycia przez realnych użytkowników w internecie.
Dla kogo jest ten kurs?
Nowoczesny React stworzyliśmy z myślą o osobach, które chcą nauczyć się Reacta i jednocześnie znają JavaScript. Niezależnie od tego, czy React jest Twoim pierwszym frameworkiem, czy masz już doświadczenie w pracy np. ze Svelte czy Vue, ten materiał jest dla Ciebie. Wskazane jest również posiadanie ogólnej wiedzy na temat tworzenia interfejsów z HTML i CSS oraz obsługi narzędzi takich jak Git czy podstawy pracy z terminalem.
Aby zrozumieć, do czego używamy React.
Rozwiążmy sobie proste zadanie.
Gdybyśmy chcieli tutaj przygotować plik html'owy z podstawową strukturą i chcemy
teraz wyrenderować, pokazać na widoku listę owoców, będziemy
mieli to w postaci skryptu.
Gdzie tutaj Fruits będzie tablicą owoców.
Mamy tutaj trzy owoce.
Chcemy pokazać je na widoku.
Ja użyję do tego bulmy tak, żebyśmy mieli ładny widok, tak żebyśmy sobie
podrzucili jakiś framework CSS owy.
I naszym zadaniem będzie zaprezentowanie właśnie tych trzech owoców na liście.
Gdybyśmy sobie podeszli do tego tak bardzo spontanicznie, moglibyśmy stwierdzić, że
chcemy to wyświetlać w postaci htmlowej, więc taki HTML wystarczy nam do tego,
żeby pokazać właśnie tą listę owoców.
Nie jest to jeszcze rozwiązanie naszego zadania, ponieważ zobacz, że tutaj nie
korzystamy kompletnie z tego skryptu.
Nie korzystamy z JavaScriptu po to, żeby wyświetlić tą listę owoców.
Zahardkodowaliśmy to rozwiązanie w postaci htmlowej.
Jak uruchomić sobie właśnie ten plik HTML tak żeby można było z nim pracować?
Zauważ, że masz tutaj takie elementy i można kliknąć sobie odpowiednią
przeglądarkę tak aby otworzyć podgląd.
Można ten podgląd otworzyć również bezpośrednio tutaj w narzędziach typu
IntelliJ Web Store, żeby mieć go otwartego tutaj właśnie z boku.
Warto sobie skonfigurować te narzędzia.
Konfiguracja tych narzędzi w settingsach to jest po prostu wpisanie Web Browser
tutaj i skonfigurowanie w toolsach Web Browser and Preview.
Tu można odpowiednią przeglądarkę sobie wybrać i można sobie wybrać właśnie Reload
Page in browser on change polecam Ci zmienić tutaj na onChange i OnChange.
Wtedy strona przeładuje się sama z siebie w momencie, w którym będą
jakiekolwiek zmiany, których dokonamy.
Zobaczmy jak to działa.
Jeśli otworzę to sobie tutaj w przeglądarce.
Chciałbym Apple dodać sobie znak zapytania.
Zobacz, że to jest natychmiastowe.
Nie muszę jak gdyby odświeżać cały czas tej strony.
Tą stronę HTML moglibyśmy bezpośrednio otworzyć w przeglądarce w Local File
System, ale wtedy taki look and feel, takie właśnie automatyczne odświeżanie nie
byłoby możliwe tutaj natychmiastowo po tym jak coś dopiszemy.
Czasami trzeba kliknąć controls, żeby faktycznie coś zapisać.
Czasami nie odświeża się to aż tak jakbyśmy chcieli.
Natomiast generalnie działa to właśnie w ten sposób.
Bardzo podobnie będzie zachowywało się w naszym Visual Studio Kodzie.
Jeśli chcesz mieć Visual Studio Code, jedynym wymogiem jest
doinstalowanie wtyczki.
Ta wtyczka to jest live server, czyli Live Server.
To jest jedna z tych wtyczek, która powinna być zainstalowana u
Ciebie właśnie z tych recommended.
To jest właśnie to, czyli live server i ten live server.
On powinien pozwolić Ci na wystawienie tego właśnie tutaj, klikając
prawym Open Field Live Server.
Wtedy ta strona otworzy się na porcie 5500 na domyślnej przeglądarce i wtedy będziemy
mogli po prostu w bardzo podobny sposób, używając sobie tutaj chociażby autosave,
żeby natychmiastowo to zapisywać, żeby nie musieć klikać Ctrl+s.
Będziesz miał właśnie takie wrażenie, że on change.
Mamy zmianę.
Okej, ale nie rozwiązujemy tutaj naszego zadania.
Czyli wracając do tego naszego zadania mamy cały czas listę owoców
tutaj, w tym miejscu.
No i nie do końca jest to rozwiązanie zadania, dlatego że chcemy skorzystać z
tej listy owoców, którą mamy w JavaScripcie, czyli chcemy skorzystać z
naszych danych, a niekoniecznie chcemy za hardkodować to wszystko na widoku HTML.
Zobaczmy w takim wypadku inną solucję.
Ja to określę jako solution 2 i tutaj jakby żeby mieć pełen przekrój podejść,
które możemy zastosować, spróbujmy sobie to rozwiązać właśnie z
wykorzystaniem JavaScriptu.
Ja otworzę tą stronę, czyli każdą z takich nowych stron, którą sobie zrobisz
musisz sobie otworzyć ponownie.
Natomiast pożyczę cały ten HTML i teraz spróbuję go sobie tutaj
wrzucić do Document Body.
Zauważ, że innerHTML to po prostu string.
Natomiast w momencie, w którym ja wkleję ten kod HTML owy, webstorm rozpoznaje, że
jest to kod HTML owy i koloruje składnię.
Dlatego właśnie mamy tutaj kolorowanie, ale jest to prosty string.
Dla ułatwienia mamy tutaj kolorowanie składni.
I teraz jak przedstawić Apple z Mango i Harris w postaci właśnie
wykorzystania tej tablicy owoców?
Widzimy, że tutaj podmieniamy innerHTML, czyli generalnie to wszystko nam
się rysuje na naszej przeglądarce.
Warto sobie użyć tutaj narzędzia Zbadaj i zobaczyć sobie jak jest prezentowane
właśnie nasze drzewo dom.
I zobaczymy, że faktycznie te elementy rysują nam się tutaj w body.
Czyli ten innerHTML został zinterpretowany.
Dzięki temu w przeglądarce wygląda to niemalże tak samo.
Natomiast tutaj Fruits.
Nie używamy tego jakby to zrobić.
Można sobie chociażby wkleić tą listę owoców tutaj zobacz używając właśnie
interpolacji, która jest możliwa w template stringach.
Czyli tutaj korzystamy z backticów po to, żeby mieć multiline stringa, ale również
mamy tutaj dostęp do JavaScriptu.
Możemy sobie tutaj użyć tak zwanej interpolacji.
Teraz jeżeli przemapujemy tą listę owoców po nazwie na kolejnego stringa Tak, można
to zrobić właśnie w ten sposób, ale ponieważ będziemy chcieli też
interpolować, to niech to będą backtiki i tutaj jak gdyby pożyczymy sobie ten
anchor i będziemy chcieli sobie tutaj iść name po name.
Wtedy dostajemy po mapowaniu tablicę z owocami.
Ponieważ jest to tablica z owocami, to będziemy mieli te przecinki, ale możemy
się ich łatwo pozbyć dlatego, że zamiast array, który teraz jest rajem stringu,
który ma w sobie właśnie te anchorage i przemaowaliśmy to z nazw na
właśnie całe takie konstrukcje.
Możemy sobie zrobić tutaj join i połączyć to wszystko za pomocą pustego stringa.
Dzięki temu pozbędziemy się przecinków, dlatego, że teraz to co tutaj mamy, czyli
ten ten kod będzie ewaluował do postaci string.
Więc teraz po prostu wrzucamy sobie stringa tutaj właśnie w to miejsce.
Zobacz, że korzystamy z programowania funkcyjnego i bardzo ciekawie
już to nam zaczyna wyglądać.
Jednak to rozwiązanie ma zasadniczy problem.
Brakuje nam interaktywności. Co mam na myśli?
Gdybyśmy teraz na przykład chcieli kliknąć tu Apples, żeby pokazać alert z właśnie
nazwą tego Apples, nie jesteśmy w stanie tego zrobić, ponieważ wszystko
mamy w postaci stringowej.
Czyli generalnie tutaj mamy czysty string, który został zinterpretowany przez naszą
przeglądarkę, wrzucony do innerHTML i teraz nie jesteśmy w stanie
nic więcej z tym zrobić.
Co by było, gdybyśmy chcieli dorzucić takiej interaktywności, czyli zrobić to
bardziej natywnie, bardziej tak, jak powinniśmy w przeglądarce?
Okazuje się, że dowolny element, który jest tutaj renderowany właśnie w HTML,
można utworzyć za pomocą JavaScriptu.
Służy do tego specjalna metoda documentcreateElement i
zaraz sobie ją zobaczymy.
W tym trzecim podejściu zrobimy to nieco inaczej.
To znaczy chcielibyśmy, żeby każdy z tych elementów po prostu sobie zbudować.
Na podstawie documentcreateElement.
Zacznijmy od tego, że mamy tutaj main, który będzie miał klasę Container 5.
W takim wypadku robię sobie Create element jako container i ten container będzie
miał odpowiednią klasę, czyli np.
ClassName będzie właśnie tą wartością.
Container 5.
W tym układzie mamy jak gdyby element Container już gotowy, ale jeszcze nie
został on osadzony w strukturze Dom.
Dalej widzimy naszą listę owoców, ale to tylko i wyłącznie dlatego, że mamy
tutaj to document Body innerHTML.
Gdybyśmy na chwilę się tego pozbyli, okaże się, że po prostu nie będziemy
mieli tutaj nic więcej.
Zauważ, że to jest na razie renderowane tylko i wyłącznie przez ten kod.
Zaczniemy sobie tutaj kreować kolejne, kolejne elementy,
takie jak na przykład panel.
Zobacz, że panel jest tutaj typu article i tak można sobie to wrzucić.
Ten article będzie miał panel, jest info i to są elementy, które są
kreowane właśnie za pomocą bulmy.
Czyli to bulma sprawia, że mamy takie podejście do generowania tego widoku.
Tutaj będziemy mieli panel jako CreateElement.
Warto sobie tutaj też pokazać narzędzia deweloperskie, żebyśmy mieli tutaj
zbadaj i widzieli tą naszą strukturę.
I kolejny element to chociażby nasz panel heading, który jest typu paragraf.
Czyli mamy tutaj p.
Mamy tutaj List of Roots, to jest nasz inner text, który chcemy przedstawić.
I tutaj też trzeba zadbać o odpowiednie klasy.
Czyli mamy tutaj po prostu klasę panel heading, którą przenosimy
sobie w to miejsce.
Finalnie chcemy wyrenderować listę naszych owoców i tutaj też możemy
skorzystać z mapowania.
Jak najbardziej, ponieważ moglibyśmy sobie wyobrazić, że będziemy teraz mapować na
panel Block Elements i jeżeli przemapujemy sobie to panel Block Elements.
Na razie to są po prostu elementy typu string, a teraz będziemy chcieli
przemapować to sobie właśnie z wykorzystaniem CreateElement.
Możemy tutaj mieć coś takiego jak właśnie panel block i po prostu to zwrócić i wtedy
mamy tablicę elementów panel block, Ale ten panel block, który tutaj mamy będzie
jeszcze musiał dostać swoją własną klasę, czyli ten CSS owa klasa zostanie obsłużona
poprzez classname i tutaj wrzucimy jeszcze sobie innerText, czyli ten każdy z
panel bloków będzie miał innerText.
I oczywiście będzie to nazwa tego owocu, czyli coś z czego mapujemy,
czyli tutaj mamy name.
Mapujemy po owocach.
Wyłuskujemy sobie tego Neymara i tworzymy panel blog Element.
W takim wypadku mamy tablicę elementów panel blog.
Możesz to sobie zawsze podejrzeć logiem. Pamiętaj o tym.
Tutaj na konsoli zobacz, że to są po prostu elementy a panel blog panel blog.
Czyli tutaj mamy gotowe domowe elementy, które jeszcze nie zostały
osadzone na drzewie. Dom.
Żeby osadzić je na drzewie. Dom.
Musimy skorzystać z czegoś takiego jak Document Body, ale zamiast innerHTML
będziemy chcieli dorzucić sobie coś takiego jak append.
I tutaj tym naszym append, tym głównym elementem będzie container.
I zwróć uwagę, że pomimo tego, że tutaj nic się nie wyświetla, to możemy w body
zobaczyć, że ten container tutaj jest.
Czyli faktycznie go dołączyliśmy.
Teraz musimy tylko złożyć elementy, które będą tworzyły nasz widok, czyli
na przykład Container Append.
I teraz ten Container dodawał sobie panel, czyli zawierał w sobie panel.
Z kolei panel dodawał kilka elementów i miał je na tej samej wysokości.
Czyli mamy tutaj panel heading, który możemy dodać i będziemy tutaj mieli
rozpradowaną tablicę Panel Block Elements, czyli generalnie jak gdyby tu po przecinku
w append można podać nieskończenie wiele argumentów.
Zwróć uwagę tak jest zrobiony append, że mamy tutaj nieskończenie wiele nodów.
I teraz ja podaję jeden z nich, a później sprecyzuję tablicę tych logów tak, żeby
podać ją właśnie tutaj do panel napęd, co w efekcie daje mi taki właśnie
panel z panel headingiem.
Panel blokiem dla każdego z tych owoców.
W tym układzie zadanie jest rozwiązane i czym ono się różni od tego
podejścia, które mieliśmy?
Zobacz, mogę teraz dodać interaktywności do swojego rozwiązania.
To znaczy tutaj mogę wrzucić addEventListener click i tutaj ustalić, że
po kliknięciu pokaże się alert z owocem, który wybrałem jutro.
I tutaj, teraz, jeżeli kliknę na któryś z tych owoców, dostanę
komunikat z mojej strony.
Czyli generalnie mam tutaj uczuc i tak dalej, i tak dalej.
Widzimy, że to jest już interaktywne.
Tutaj już możemy się zacząć bawić po prostu w jakieś eventy,
które będą występowały w momencie, gdy użytkownik będzie poruszał
się po tym widoku.
I to już jest ciekawe, ale zobacz ile boilerplate u nas to kosztowało i ile
musieliśmy się napisać, żeby to wszystko zrobić.
No i tutaj właśnie wkracza cały na biało React.
Jak zrobi to React?
Jak React w ogóle daje nam warstwę abstrakcji do tego, żeby połączyć sobie
bardzo elegancko te widoki i żebyśmy mogli to zrobić dużo, dużo łatwiej, Żeby dużo
łatwiej na przykład złączyć te widoki.
Zobaczmy, jak to wygląda z Reactem.
Przekopijmy sobie to rozwiązanie. Numer 3.
Teraz najprostszym możliwym sposobem na wprowadzenie Reacta do naszej aplikacji
będzie dorzucenie sobie importów do Reacta.
Chodzi o to, że każdy script teraz w nowoczesnych przeglądarkach
może mieć type module. Co to znaczy?
Oznacza to, że masz dostęp do modułów EsM.
To znaczy, że nie musisz załączać skryptów do swojej strony właśnie za pomocą
script tagów, czyli script src.
Zamiast tego możemy zaimportować sobie reacta używając właśnie tych CDN.
I tutaj będzie to zaimportowane w postaci biblioteki SM.
Czyli innymi słowy używając składni import export.
Zobaczmy teraz jak możemy skorzystać z Reacta.
Przede wszystkim React pozwala nam na zrobienie rotowego elementu.
Czyli mamy tutaj Create root i ten create root może nam posłużyć do tego,
abyśmy właśnie w document body.
Czyli najpierw ustalamy gdzie i co chcemy wyrenderować.
Po to właśnie służy tzw. React ReactDom.
Powiemy sobie troszeczkę szerzej później o tej bibliotece, ale jest to biblioteka,
która pozwala nam podłączyć Reacta właśnie do naszej aplikacji.
W takim wypadku, jeśli chcemy coś utworzyć za pomocą Reacta, będziemy to
robić w następujący sposób.
Wystarczy nam jeden taki container, dlatego, że tutaj będziemy
stosować bardzo podobną składnię.
Otóż React CreateElement i tutaj jeśli wstawimy sobie main, to wybieramy
jaki element chcemy utworzyć.
Ale dużo łatwiej jest już teraz w przypadku tych options, które tutaj mamy,
dlatego że tutaj możemy sobie od razu skorzystać z klas name w ten
sposób i przerzucić te classname. Ok.
Wykonajmy to dla pozostałych elementów.
Ale uwaga pozostałe elementy będą po prostu wymienione po przecinku.
Dlatego, że w środku main zawiera się coś innego, to możemy po prostu po przecinku.
Czyli tutaj jako kolejny argument do tego Create element, czyli pierwszy to
jest nazwa elementu, który robimy.
Drugi to jest obiekt konfiguracyjny, tak jak tutaj widzisz, a trzeci
może być kolejnym elementem.
To znaczy, że możemy tutaj sobie wrzucić ReactCreateElement i
to będzie ten artykuł.
Czyli tutaj mamy właśnie ten panel jako panel jest info, a później z kolei w
środku tego artykułu zawierają się kolejne elementy.
Zobaczmy jak to wygląda tutaj, czyli w środku artykułu będzie P i trzy elementy.
A co sprawia, że będziemy mieli tutaj po prostu kolejne elementy
na tej samej wysokości?
W takim układzie dodajmy tutaj jeszcze jeden element P jako panel heading.
Zauważ, że tutaj mamy troszeczkę inną sytuację, dlatego że panel
Henning będzie miał innerHTML.
W takim wypadku ten innerHTML to będzie po prostu list of Fruits.
Mamy tutaj innerText List of Roots i teraz kolejne elementy będą na tej samej
wysokości, czyli będziemy mieli tutaj mapowanie tych elementów.
Roots to będzie cała tablica i całą tablicę możemy tutaj wkleić, ale
zamiast oczywiście stosowania tej składni będziemy stosować React Create Elements,
co pozwoli nam na wrzucenie elementu a z klasą panel block.
I tutaj możemy sobie wrzucić ten sam alert w obiekt konfiguracyjny.
Zobaczmy sobie tutaj jeszcze name dlatego, że będziemy mieli ten create element.
To możemy uprościć drastycznie, dlatego, że to może być jako one liner, czyli mamy
create element i mamy tutaj to nasze mapowanie.
Zobaczmy jak to kompletnie wygląda.
Czyli mamy Container, który będziemy chcieli tutaj podać jako render.
Będzie main, który ma w sobie article element P i tutaj na tej samej
wysokości tablicę z elementami.
Ok, zobaczmy jak to działa.
Skasujmy w takim wypadku kod, który tutaj appenduje nam te wszystkie elementy.
Skasujmy również ten kod, który mamy tutaj.
Zostawię sobie tylko jako punkt odniesienia tą funkcjonalność,
którą chcieliśmy wprowadzić.
Czyli po kliknięciu chcemy właśnie mieć ten alert.
Jest to niezmiernie proste.
Za chwilę zobaczmy sobie, czy nasz widok działa poprawnie.
Widzimy, że mamy tutaj listę.
Jest to właśnie ten wariant działający z reaktem i teraz on nie
będzie jeszcze działał.
Po kliknięciu, po kliknięciu nic się nie dzieje.
Musimy tutaj jeszcze dorzucić sobie w konfiguracji coś takiego jak onClick.
W tym układzie możemy zobaczyć, czy po kliknięciu faktycznie zobaczymy alert.
Widzimy, że wszystko działa tak jak do tej pory.
Masz więc teraz porównanie, jak wyglądałoby złożenie takiego widoku
w przypadku Vanilla JavaScript?
Ile musielibyśmy się napisać i w jaki sposób to zrobić?
Oczywiście tutaj można całą masę uproszczeń zastosować i to
jeszcze nie jest odchudzony kod.
Dałoby się troszeczkę inaczej to napisać, ale generalnie co do zasady musimy
zastosować tego naszego appenda.
Tutaj musimy to zrobić w ten sposób.
Natomiast tutaj możemy to wszystko sobie złożyć jako.
React create element create element w ten sposób.
Co więcej, moglibyśmy to zapisać jeszcze łatwiej.
To jeszcze łatwiej.
Za chwilę Ci pokażę.
Musimy tylko dorzucić sobie do całego rozwiązania Compiler.
Możemy to jeszcze uprościć.
Uprośćmy to stosując składnię JSX.
W tym układzie skopiowałem sobie rozwiązanie nr 4.
I teraz w rozwiązaniu nr 5 potrzebuję narzędzie, którym będzie Compiler po to,
aby móc wykorzystać składnię JSX w naszym rozwiązaniu Reactowym.
Żeby to zrobić wystarczy nam dorzucenie biblioteki, którą jest Babel.
Jednak musimy troszeczkę zmodyfikować nasz skrypt.
Chodzi tutaj o sposób, w jaki jest on przygotowany.
Musimy tutaj przerzucić to na text babel i Data type Module.
Taki jest sposób do tego, żeby standalone użyć sobie tego bubela jako biblioteki,
którą wepniemy sobie właśnie z takim.
Just in time compilerem.
I teraz przepisując sobie na składnię JSX będzie to wyglądało mniej więcej tak.
To znaczy jeszcze ta składnia nie jest dla ciebie znana.
Jeszcze jej sobie nie omawialiśmy.
Omówimy sobie ją w kolejnych lekcjach.
Natomiast chodzi mi o to, żeby zauważyć, że to rozwiązanie numer 4 możemy jeszcze
bardziej uprościć właśnie takim zapisem w tym układzie.
Jeśli podążymy to sobie teraz na naszej przeglądarce, zobaczymy,
że wszystko działa poprawnie.
Możesz stosować właśnie ten standalone bubble compiler po to, żeby próbować sobie
razem z JSXem używać zapisów związanych z React'em.
Natomiast standardowo, gdybyśmy próbowali na konsoli zobaczyć sobie co dzieje się z
naszą aplikacją w momencie, w którym nie będzie tego Bobola, czyli
jego tutaj nam zabraknie.
Okazuje się, że wtedy JavaScript totalnie nie będzie kojarzył tego zapisu,
który mamy chociażby w linii 24.
Czyli zapisywanie czegoś w ten sposób wygląda jakbyśmy w środku skryptu
JS stosowali zapis htmlowy.
I to oczywiście nie przejdzie.
Nawet jeżeli tutaj będziemy mieli Type module, zobaczymy, że ta składnia, którą
tutaj sobie stosujemy nie będzie znana dla JavaScriptu.
Dzieje się tak dlatego, ponieważ ten syntax wprowadza właśnie
do JavaScriptu React.
Ale żeby on nam działał, będziemy potrzebowali compilera.
Na razie stosuję to tylko jako element porównania, żebyśmy mogli sobie zobaczyć,
jak rozwiązanie nr 4 można jeszcze bardziej uprościć.
I finalna wersja, czyli to rozwiązanie nr 5, pozwala nam skomponować cały ten widok
właśnie w tak małej ilości kodu, w tak zwięzłej formie.