React: Render po raz pierwszy

0:00Cześć. W tej lekcji dowiesz się jak uruchomić React Development Server, jak

0:04zainstalować wszystkie paczki w naszym projekcie tak, abyśmy mogli dalej ruszyć

0:09z pracą i żebyśmy mogli stworzyć pierwszą aplikacje w React'cie. Pierwsze,

0:13co musisz, zrobić to otworzyć konsolę i sprawdzić strukturę

0:17folderów w naszym projekcie. Następnie przejść do folderu pierwszego,

0:21gdzie znajdziesz takie pliki jak, package.json, folder

0:26public, folder src i yarn.log. To

0:30czego nam brakuje, to zainstalowanych paczek, które pojawiają w folderze node_modules. Ja

0:36w tym kursie używam package menager'a o nazwie Yarn. Możesz używać także

0:40Npm'a, jeśli wolisz. Pozostawiam tę decyzje tobie. To jak je zainstalować również

0:45możesz znaleźć w sieci na oficjalnych stronach tych package managerów, więc

0:49żeby zainstalować wszystkie paczki, potrzebne do uruchomienia naszego React Server'a

0:53musimy po prostu wpisać yarn i zaczekać, aż

0:57wszystko się zainstaluje. Zazwyczaj zajmuje to od jednej do kilku

1:02minut. Kiedy już wszystko zostanie zainstalowane, zobaczymy tutaj komunikat

1:06"Done" w terminalu i możemy przystąpić do pracy. Żeby uruchomić React

1:10Development Server musimy wpisać yarn start. Jeśli

1:16wszystko uda się bez problemów, to zobaczymy tutaj dwa adresy. Pierwszy to localhost, a drugi

1:20adresem IP. Możemy używać na przykład do tego, żeby sprawdzić jak wygląda nasza aplikacja

1:24na urządzeniach mobilnych podłączonych do tej samej sieci WiFi. Wtedy

1:28możemy wpisać ten adres w naszym telefonie i zobaczymy jak to wszystko wygląda. Przydaje

1:33się to zwłaszcza w momencie, kiedy rozbudowujemy nasze aplikacje o widoki mobilne. Po

1:38prawej stronie ekranu mamy odpalonym właśnie stronę na localhost'cie, na porcie 3000.

1:42On teraz nasłuchuje i sprawdza każdą zmianę, którą wpiszemy w naszym pliku. Żeby

1:47sprawdzić, czy to wszystko jest podłączone  i czy działa na pewno, wpiszemy sobie na razie nazwy

1:51pliku index.js, console.log'a, jakimkolwiek komunikatem

1:55i zobaczymy konsolę w naszej przeglądarce. Widzimy, że

2:00nasz consol.log został poprawnie zalogowany w konsoli przeglądarki,

2:04więc wszystko działa. Więc skoro już się upewniliśmy, że wszystko

2:08działa, że wszystko jest podłączone. React Server działa, to teraz w końcu wyrenderujemy tego React'a

2:13do naszego pliku index.htm, ale ale żeby to zrobić, sprawdźmy, jak

2:17to ogóle ma działać. Mamy w folderze public plik

2:22index.html. Jest to taki zwykły plik HTML, który

2:26znamy z podstawowych kursów o frontend'zie. Mamy

2:30tutaj, co prawda kilka dziwnych tag'ów, o których teraz nie będziemy mówić, ale

2:34nie są do końca istotne. To co nas interesuje, to div o id - root,

2:38bo to właśnie do tego elementu będziemy renderować naszą

2:42aplikację. Pamiętaj, że w tym projekcie korzystamy z Create-React-App,

2:46które dostarcza nam takiej poprawnej konfiguracji React'a. Nie

2:51musimy się przejmować żadnym webpack'iem, niczym takim. Wszystko jest tutaj zapisane

2:55w taki sposób, żeby po prostu działało, a jeśli coś ma nie działać, to na pewno się o

2:59tym dowiemy w bardzo elegancki sposób, ponieważ błędy przygotowane przez Create React

3:03App są naprawdę świetne i zawsze pozwalają wyjść na prostą, nawet

3:07jeśli coś nam nie wychodzi. W racając więc do naszego piku index.html,

3:12musimy zapamiętać id tego div'a, ponieważ to

3:16do niego będziemy renderować naszą aplikację. Przejdźmy więc do naszego piku

3:20index.js i zaimportujmy React'a oraz

3:25React DOM. Pierwsza

3:32paczka będzie służyć nam do tworzenia React'owych komponentów, co zresztą tłumaczy

3:37sama nazwa. Natomiast React DOM posłuży nam jako paczka do

3:41wyrenderowania tego wszystkiego bezpośrednio do pliku HTML, a dzieje

3:45się to w taki sposób. Wykorzystam tutaj React DOM i jego

3:51metodę render, która

3:55przyjmuje takie parametry. Element

4:01renderowany oraz cel, czyli ten właśnie div o id - root,

4:06który mamy w pliku HTML. Jako pierwszy podamy ten element do wyrenderowania,

4:10będzie to zwykły header o treści Hello World. Natomiast

4:15ten drugi musimy sobie złapać przy pomocy metody document.get.elementById i

4:21podamy tutaj to id, tego div'a z index.html,

4:25które mieliśmy zapamiętać. Uwaga i w

4:29ten oto sposób wyrenderowaliśmy pierwszą aplikację. Wielkie słowa -

4:33aplikację - pierwszą mini aplikacje w React'cie. W następnej

4:38lekcji dowiesz się czym są to tag'i, ponieważ one do złudzenia przypominają

4:42HTML. Natomiast nie są HTML'elem i zanim ruszymy dalej musisz

4:47dowiedzieć się czym jest JSX. Do zobaczenia w następnej lekcji.