Nowoczesny React: Sposoby dołączania React do aplikacji web

0:00Zobaczmy, jak to się stało, że w naszej aplikacji React działa.

0:04Przede wszystkim został on zaimportowany tutaj.

0:06Zwróć uwagę na SMS a.

0:08Jest to specjalne źródło, dzięki któremu możemy sobie w nowoczesny

0:12sposób pobrać pakiety RSM.

0:15Polecam Ci do prototypowania, jeśli chcemy sobie coś zobaczyć.

0:19Jak to będzie działać?

0:20Chcemy sobie zaimportować bezpośrednio na stronę HTML.

0:24Możemy to zrobić właśnie w ten sposób.

0:26Tutaj jest przykład z Reactem na wersji 182.0. Moglibyśmy to nawet zapisać.

0:30Tak byłoby jeszcze prościej i wtedy dostalibyśmy tak zwaną wersję Latest,

0:34czyli najnowszą wersję Reacta.

0:36Gdybyśmy to zapisali w ten sposób.

0:37Więc na tym polega sztuczka.

0:39Jak dołączony został React?

0:41Właśnie w tym konkretnym przypadku.

0:43Dodatkowo zauważ, że React potrzebuje coś takiego jak React Dom.

0:47Tutaj mamy Create root.

0:48Zasada działania Create root to jest poleganie na tym, że w momencie, w którym

0:53uruchomimy sobie create root to jest po prostu zwykła funkcja.

0:56Tak jak tutaj widzisz, to przekazujemy sobie node'a, na którym

0:59ma się osadzić React.

1:01I to jest ciekawe, ponieważ nie musi być to konkretnie dokument body.

1:05Gdybyśmy chcieli sobie zobaczyć jak osadzić Reacta i wygenerować sobie tutaj

1:10nowy plik z lekcji 5, to zauważ, że potrzebowalibyśmy sobie tak

1:15naprawdę idąc od początku pożyczyć kilka elementów z tego przykładu.

1:20Tutaj przede wszystkim chcielibyśmy sobie właśnie obsłużyć ScriptType Module.

1:26I to tutaj zaimportować React i React Dom.

1:30Możemy spróbować to zrobić w najnowszej dostępnej wersji.

1:34Wyglądałoby to właśnie w ten sposób i możemy sobie otworzyć ten podgląd, żeby

1:38zobaczyć, jak to będzie funkcjonowało.

1:40Chcę Ci teraz udowodnić, że React niekoniecznie musi być jak gdyby

1:45osadzony na całości naszej strony.

1:47Wręcz przeciwnie, możemy sobie wyobrazić coś takiego, że tutaj będziemy

1:51mieli fragment strony.

1:53Ten fragment strony nie będzie totalnie używał Reacta, natomiast tutaj będziemy

1:58mieli część, w której chcemy faktycznie Reacta Użyć.

2:01Gdybyśmy sobie wyobrazili, że to jest jakiś div z licem root, możemy

2:05mieć do niego odpowiednio dostęp.

2:08Chociażby jeśli sobie zrobimy document getElementById.

2:13I w tym momencie zauważ createRoot, który sobie tutaj zrobimy może osadzić się po

2:19prostu na tym rucie, który mamy tutaj w tym miejscu, a dodatkowo możemy tutaj

2:24zrobić sobie właśnie tą komendę, którą mamy w tym miejscu, czyli render.

2:29I do tego rendera wrzucić test.

2:32Jedyny problem jaki tutaj mamy to to, że oczywiście mamy wyświetlone not using

2:37React here, czyli tutaj widok nam się odświeżył.

2:40Natomiast ten test JSX nie jest tutaj widoczny.

2:43Gdybyśmy chcieli sobie sprawdzić to w przeglądarce okaże się, że mamy problem,

2:49który mieliśmy wcześniej przy osadzeniu JSXa, czyli annexpected token.

2:54Dzieje się tak, ponieważ mamy tutaj do czynienia z JSX i to jest ten problem,

2:58który mieliśmy w lekcji czwartej.

2:59To znaczy tak, to nie zadziała, dlatego, że przeglądarka nie

3:03rozumie JS out of the box.

3:05Żeby to zrobić, potrzebujemy jeszcze jednego narzędzia.

3:07Tym narzędziem jest Babel.

3:10Babel to JavaScript, Compiler i ten JavaScript Compiler pomoże nam w tym,

3:15żeby przeglądarka zrozumiała JSX.

3:18Żeby to jednak zrobić, potrzebujemy mieć tutaj skorzystać z pewnych integration

3:23packages i Babel standalone.

3:25Czyli to jest sposób, w jaki ja dorzuciłem sobie bubble jako standalone do projektu.

3:31Można to zrobić właśnie w ten sposób, czyli pożyczam sobie tutaj ten skrypt z

3:34dokumentacji, wrzucam go tutaj w to miejsce dlatego, że możemy mieć tego Babel

3:39dużo, dużo wcześniej, nawet w Chedzie.

3:42W tym układzie jeśli Babel jest dostępny, to potrzebuję jeszcze zastosować

3:46odpowiednią modyfikację tego skryptu, który był tutaj.

3:48Zobaczmy sobie jak to wyglądało w przykładzie wcześniej, ale chcę Ci

3:52udowodnić, że nie wziąłem sobie tego tutaj z pamięci, tylko z dokumentacji.

3:57W takim układzie, jeśli przejdziemy do dokumentacji tego narzędzia.

4:01Zauważysz, że można sobie tutaj właśnie określić jako typ bubble

4:05i odpowiedni preset.

4:07Czyli będziemy chcieli mieć script text bubbles i DataType moduł

4:13w tym przykładzie 5.

4:14Używamy więc TypeText, Bubbles i DataType Module.

4:18I jak widzisz elegancko test JSX nam się udał.

4:21W takim wypadku widzimy, że całość tego przykładu działa i w ten sposób

4:25dołączyliśmy sobie React do strony.

4:28Zauważ, że React jest tylko częścią naszej strony.

4:31Mamy tutaj inny element, który kompletnie nie używa Reacta i on działa poprawnie.

4:37Natomiast tutaj poniżej będziemy mieli element, który osadza

4:41właśnie aplikację Reactową.

4:43Docelowo będziemy starać się robić jeden główny komponent, czyli powinniśmy mieć

4:48funkcję na przykład nazwaną App, która będzie takim rootem naszej aplikacji.

4:54Tutaj w tym przypadku będzie to komponent, który zwraca IAM root

4:58i możemy go sobie osadzić właśnie w ten sposób, żeby sobie elegancko

5:03zobaczyć, jak to będzie funkcjonować.

5:05I mamy tutaj I'm root i mamy not using React here.

5:09Gdybyśmy uruchomili to sobie w przeglądarce.

5:11Wtedy mamy dostęp do narzędzi deweloperskich i do inspektora.

5:14Dużo fajniej jest to zrobić, jeśli korzystasz z Visual Studio Code.

5:18Pamiętaj o tym rozszerzeniu LifeServer.

5:20Tam też możesz zrobić taką sztuczkę.

5:22I tutaj mamy I'm root.

5:24Czyli widzimy, że tutaj w id root faktycznie od tego node'a, którego mamy w

5:29domie będzie osadzał się tutaj React i sterował całą tą aplikacją właśnie React.

5:35Cała ta część aplikacji będzie sterowana przez React.

5:38Natomiast nie dotykamy pozostałej części strony.

5:41Możesz sobie w takim układzie bardzo łatwo wyobrazić, że React da się dołączyć do już

5:46istniejącego kodu, do już istniejącej strony.

5:48I jest to prawda.

5:49Natomiast mamy tutaj jeden problem.

5:51Mamy problem z tym standalonem.

5:53To jest nasz słoń w składzie porcelany, ponieważ nie chcemy kompilować

5:57za każdym razem tego widoku.

5:59To, że używamy JSX a pomaga nam, deweloperom.

6:02To pomaga w tym, żebyśmy bardzo szybko, bardzo zwięźle pisali nasze widoki.

6:08Żebyśmy nie musieli używać tej składni, którą kojarzysz z lekcji trzeciej, czyli

6:12tutaj ta solucja numer cztery React Create Element.

6:16Pisanie tego w ten sposób jest troszeczkę bardziej rozwlekłe niż to, co mamy tutaj.

6:22To jak możemy ten sam widok zapisać ze składnią JSX?

6:25JSx pomaga więc nam, ale problem polega na tym, że JSX, który mamy tutaj

6:30powinien kompilować się jednorazowo.

6:33Masz o tym wspomniane w przypadku właśnie tego narzędzia standalone.

6:37Gdybyśmy wrócili do dokumentacji, okaże się, że będziemy mieli tutaj ostrzeżenie,

6:42kiedy nie mamy używać standalone.

6:45I tutaj mamy not use in production, dlatego, że generalnie chcemy, żeby

6:50nasze widoki były prekompilowane.

6:53I tutaj jest sugestia, żeby użyć narzędzi typu webpack, roll up albo parcel, żeby

6:58przekompilować nasz kod head of time, czyli żeby ta kompilacja zachodziła

7:03jednorazowo, a nie za każdym razem, gdy uruchamiamy stronę.

7:06Jest to po prostu niewydajne.

7:08W tym układzie musisz traktować standalone i ten przykład, który mamy tutaj jako albo

7:14jedynie przykłady do nauki, albo jakieś przykłady do prototypowania.

7:18Zauważ, że mamy tutaj kolejny problem, bo chcielibyśmy, żeby ten

7:21komponent był zupełnie osobno.

7:23Chcielibyśmy go sobie zaimportować, jeżeli chcielibyśmy go sobie zaimportować i

7:28skorzystać właśnie z modułów, czyli żeby jeden komponent był na jeden

7:32plik i zrobić sobie osobny plik.

7:34Jest to absolutnie możliwe, dlatego, że mamy tutaj składnię import i możemy sobie

7:38komponent wydzielić do osobnego pliku JS.

7:41Natomiast w momencie gdy korzystasz ze standalone okaże się, że gdybyśmy to

7:45zrobili i zaimportowali właśnie ten komponent jako zewnętrzny plik, mielibyśmy

7:49ten sam problem, że przeglądarka nie rozumie tego znaku mniejszości.

7:53Jakim cudem on się tam pojawia nam w kodzie?

7:56No i wynik jest oczywiście prosty, dlatego, że Babel będzie kompilował, ale

8:01tylko to, co jest tutaj w środku tego oznaczonego text bubble Script

8:05natomiast pominie wszystkie importy.

8:07Do importów już nie wchodzi, więc cały ten setup byłby bardzo, bardzo uciążliwy i

8:12docelowo będziemy chcieli właśnie skorzystać z narzędzi,

8:15które są tutaj wspomniane.

8:17Jest to albo webpack, albo roll up, albo parcel.

8:21Polecam Ci odwiedzić Osom React.

8:22Jest to źródło, które zawiera wszystkie elementy z ekosystemu React, a

8:28na które warto zwrócić uwagę.

8:30Być może nie wszystkie, które istnieją, ale tutaj jest to bardzo fajne źródło

8:35informacji na temat jak na przykład przygotować sobie taką

8:38aplikację Reactową od podstaw.

8:40I tutaj w React Development Tools mamy trzy propozycje Create,

8:44React App, Vid i Parcel.

8:46My skorzystamy z Next Generation Frontend Tooling z Vita, który jest już sprawdzony

8:51na produkcji i on pod spodem tak naprawdę używa roll upa, czyli docelowo jak gdyby

8:56vid narzędzie, z którego będziemy korzystać.

8:58Tutaj zobacz Vidjs dev narzędzie, którego uruchomimy sobie za pomocą jednej

9:03komendy i zeskadujemy cały projekt.

9:06Będziemy mieli cały setup i zrobimy sobie taki projekcik właśnie od podstaw, tak

9:11żeby zobaczyć sobie jak dołączyć Reacta w sposób prawidłowy do projektu.

9:16Co więcej, nie zabiera nam to tej możliwości, którą mamy tutaj, czyli

9:20elastyczność i powoduje, że nawet jeśli skompilujemy to sobie i przerobimy

9:26narzędziem typu roll up na produkcję, to i tak będziemy mieli dostęp do właśnie

9:32takiej sztuczki, żeby dołączyć sobie React w dowolnym miejscu.

9:36Czyli generalnie moglibyśmy przejść z naszym projektem na NodeJS, a tam go

9:40sobie zbudować i tam go dalej rozwijać.

9:43I nawet gdybyśmy mieli projekt, który już zaczęliśmy, moglibyśmy część Reactową

9:48doczepić do tego projektu w którymś miejscu.

9:52Za chwilę wszystko stanie się dla Ciebie jasne.

9:54Za chwilę skalujemy sobie swój pierwszy projekt i zobaczymy, jak poprawnie używać

9:58Reacta robiąc rozwiązanie produkcyjne.