Nowoczesny React: Pierwszy komponent

0:00Już za chwilę przygotujesz swój pierwszy komponent.

0:02Wrzucimy go sobie tutaj do src.

0:04Utworzymy specjalny katalog np.

0:07Components i to tutaj będziemy składać nasze widoki.

0:12Załóżmy, że pierwszy komponent, który utworzymy to będzie header, więc tutaj

0:16możemy sobie przygotować nowy plik jako header JSx.

0:21Dlaczego w ten sposób?

0:22Ponieważ header JSx będzie naszym komponentem.

0:25Musimy zacząć z dużej litery.

0:27Z drugiej strony będziemy w środku używać JSXa, więc potrzebujemy tego rozszerzenia.

0:32I teraz jeżeli zrobimy sobie eksport funkcji, możemy zrobić to jako name

0:38export, nazwać ją sobie po prostu header.

0:41I tutaj możemy zwrócić coś co będzie JSX np.

0:45Jakiś section.

0:47Zauważysz, że w filmie będzie się to nazywało Hero.

0:50Natomiast my potrzebujemy wyświetlić jakiegoś H1 np.

0:54Z napisem hello tylko po to, żeby zobaczyć czy ten header faktycznie nam działa.

0:59Żeby to sobie sprawdzić musimy uruchomić ten projekt.

1:02To co widzisz tutaj na porcie 5100 to mój prototyp.

1:06Mam go tylko u siebie, lokalnie, po to, żeby pokazać Ci jak będzie to mniej więcej

1:10wyglądało, bo my nie mamy jeszcze doinstalowanej do projektu.

1:14No i tak naprawdę nie wiemy jak pracować sobie z tym projektem,

1:17jak go sobie uruchomić.

1:18Przypominam Ci, że tutaj w packagedo JSON mamy prawdę na ten temat.

1:22Tutaj w skryptach widzimy, że mamy skrypt do budowania, który użyliśmy wcześniej,

1:27ale mamy też ten skrypt dev, który pozwoli nam uruchomić naszą aplikację.

1:31Najprostszym sposobem na uruchomienie tego skryptu wcale nie jest uruchamianie

1:36go bezpośrednio z terminala.

1:38Moglibyśmy otworzyć terminal, wpisać npm run dev i to wszystko powinno

1:43nam elegancko działać na porcie.

1:455.1. 7.3. Jeśli teraz klikniesz sobie w ten link, to zobaczysz, że otworzy Ci się

1:50właśnie na porcie 5.173 VID plus React, czyli ten nasz podstawowy układ,

1:56który był dla nas wygenerowany.

1:58Natomiast bardzo ciekawie jest zapamiętać sobie jedną rzecz.

2:02Jeżeli zamkniemy to zadanie, czyli klikniemy sobie Ctrl+C to wtedy powinien

2:07przestać nam działać nasz serwer i jak gdyby Ctrl+C pozwala nam tutaj

2:12wyjść z tego nieskończonego taska.

2:14Natomiast tutaj możemy kliknąć sobie właśnie w ten sposób

2:17uruchomienie run script.

2:19I to run dev wrzuci nam się tutaj jako konfiguracja w webstormie czy IntelliJ u.

2:24I w ten sposób będziemy mogli sobie bardzo szybko uruchamiać to właśnie

2:28z poziomu tej konfiguracji.

2:29Czyli zobacz tutaj możemy sobie to zatrzymać albo uruchomić ponownie i

2:34będziemy mieli ten serwer deweloperski.

2:36Ewentualnie możemy też kliknąć prawym na pakiet Get JSON Show npm Scripts i tutaj

2:41mieć dostęp do wszystkich tych skryptów i double clickiem uruchamiać ten skrypt,

2:45Ponieważ uruchamia się to jako task, jako nasza konfiguracja, to w momencie, gdy

2:50będziemy chcieli użyć tego jeszcze raz, będziemy mieli informację, że dev is

2:54running, czyli ten task już jest uruchomiony i nie potrzebujemy

2:58uruchamiać go ponownie.

2:59Mamy tutaj stoper Run Run, czyli zatrzymujemy tego taska,

3:03ubijamy ten serwer.

3:04No i jeszcze raz uruchamiamy ponownie. Albo cancel.

3:07Czyli generalnie mamy tutaj jakieś informacje, że już serwer jest

3:12wystawiony na porcie 5173.

3:14Bardzo podobnie będzie się to zachowywało w przypadku naszego Visual

3:19Studio Code, Visual Studio Code.

3:20Powinieneś mieć coś takiego jak npm Scripts.

3:23Jeśli tego nie widzisz, to po instalacji i otwarciu tego projektu tak żeby widzieć

3:27ten node modules czyli secret gifts otwarte jako folder.

3:31File open folder.

3:33Zauważ, że jeśli nie ma tego panelu npm scripts, możesz spróbować go sobie włączyć

3:39tutaj View OpenView i po prostu napisać NPM.

3:43I wtedy pojawi nam się npm Scripts.

3:45I w ten sposób tak samo będzie można uruchamiać właśnie serwer deweloperski.

3:51Dzięki temu, że możemy to w ten sposób uruchomić, będziemy bardzo łatwo mogli

3:54uruchomić sobie czy to build, czy dev i właśnie działać na poziomie tych

3:59tutaj tasków, tych konfiguracji.

4:01My nie potrzebujemy całego tego boilerciku, który został

4:04dla nas przygotowany.

4:05Chcielibyśmy się go pozbyć, żeby zobaczyć nasz header.

4:08Jak to zrobić?

4:10Cóż, spróbujmy tu troszeczkę wyczyścić to, co się dzieje w main JSX.

4:15Przede wszystkim widzimy to czarne tło i wszystko dlatego, że mamy tutaj wpięty

4:18indeks CSS, Czyli są tu jakieś już zdefiniowane style.

4:22Gdybyśmy go sobie otworzyli, zobaczymy, że jest Fonfamily, ustalone

4:26są ustalone pewne elementy.

4:28Możesz sobie krok po kroku próbować zakomentowywać te importy

4:32albo je wręcz wyrzucać.

4:33Wtedy zobaczysz, że coś nam się zmienia na stronie.

4:37Bardzo podobnie będzie przy JSX.

4:40App JSX ma swój app CSS.

4:42Gdybyśmy weszli do tego AppJS, możesz to zrobić z kontrolerem i przechodzić sobie

4:46po tych komponentach, ponieważ działają one jak po prostu zwykłe

4:50pliki zaimportowane.

4:52To tutaj ten import app CSS też możemy sobie go pożegnać i wtedy zobaczymy, że

4:56mamy czyściuteńką stronę bez żadnych styli.

4:59Tutaj moglibyśmy użyć naszego komponentu.

5:02Żeby to zrobić musimy zaimportować sobie ten nasz komponent.

5:06Na razie zrezygnujemy z tych wszystkich elementów, które importowane

5:10są tutaj i tutaj w środku.

5:11App dorzucimy sobie właśnie ten nasz header.

5:15Pamiętaj, że ten header musi być pisany z dużej litery.

5:19Potrzebujemy również ten import z components header JSx i

5:22mamy tutaj swoje Hello!

5:24Teraz warto by sobie to poprawić, tak aby tutaj mieć faktycznie tytuł naszej

5:29aplikacji, czyli tutaj w tym będziemy zrobimy sobie tytuł i

5:34podtytuł tej naszej aplikacji.

5:36Możemy tutaj zapisać sobie właśnie Secret Gift Giver Jak doinstalować bulmę, czyli

5:41jak możemy po prostu dorzucić sobie jakąś bibliotekę do tej naszej kolekcji.

5:46Zwróć uwagę, że w packagejson będziemy mieli dev dependencies i dependencies i to

5:51właśnie tutaj w dependencies chcemy sobie dorzucić bulmę jako nasz framework, jako

5:56coś, co będziemy chcieli sobie zaimportować.

5:59To będzie tak proste jak zaimportowanie chociażby tego index CSS,

6:03który był tutaj w tym miejscu.

6:05Czyli będziemy mogli sobie w ten sam sposób zaimportować wszystkie style z

6:09Bulma, tak aby użyć tego frameworka.

6:12Header JS jest już gotowy i to nasz pierwszy komponent.

6:15Zauważ, że jest to po prostu funkcja, która jest wyeksportowana.

6:18Natomiast ponieważ jest to name export, to tutaj zaimportujemy to sobie w ten sposób.

6:23Czyli w appjsx mamy header i wrzucamy sobie to tak moglibyśmy multiplikować ten

6:29header, czyli zrobić go sobie kilka razy i będziemy mieli tutaj wyszczególnione go

6:34tyle razy, ile do niego się odniesiemy na tym widoku.

6:37Natomiast sam Up będzie naszym głównym komponentem, więc nie będziemy

6:42musieli wychodzić poza to. AB.

6:44Nie będziemy musieli wracać do main.

6:45JSX Main.

6:47JSX Wracamy tylko w momencie, gdy chcemy do konfigurować coś do naszej aplikacji.

6:51Zobacz jest tu zrobiony React Strict Mode, który otacza to nasze Up, czyli ten nasz

6:56root komponent, ten główny komponent.

6:58Później wyjaśnię Ci na czym ten mod polega.

7:01Natomiast tutaj chcemy sobie doinstalować teraz bulmę.

7:05Zróbmy to z terminala npm install bulma.

7:10To powinno nam zmienić następujące zapisy w package JSON.

7:14Tam w dependencies powinno dojść bulma.

7:18U mnie jest to wersja 1.01, u Ciebie może być to jakaś inna wyższa wersja.

7:22Natomiast tutaj żeby zaimportować sobie bulb do naszego projektu potrzebujemy

7:27przeedytować to main jsX i zrobić import Bulma CSS i bulma CSS.

7:34Dzięki temu zobacz, że wszystko nam się tutaj troszeczkę zmienia, dlatego,

7:39że Bulma osadziła nam się na stronie.

7:41Widzimy tutaj Secret Giftgiver.

7:43Możemy sobie teraz zacząć korzystać z elementów bulmy, czyli

7:47tutaj w dokumentacji.

7:48Spróbujmy sobie odnaleźć tutaj w tych elementach i layoucie

7:52coś takiego jak hero.

7:54I to będzie właśnie coś, co ja użyłem tutaj.

7:57Czyli mamy section hero.

7:58Hero is info.

8:00Zobacz, że pożyczam sobie ten kod i teraz będę go próbował wkleić do mojego JSXa.

8:05Ale problem, który tutaj napotkałem to fakt, że mamy tutaj wyszczególnione to

8:10jako class class class, a nie ClassName.

8:12Jednak ID takie jak właśnie IntelliJ czy Web Store jest na tyle sprytne, że w

8:19momencie, w którym będę próbował to sobie wkleić tutaj, czyli zobaczmy to nasze

8:23Secret Gift Weaver, czyli ten nasz skopiowany kod, chcę sobie tutaj wkleić i

8:27podmienić ten tytuł właśnie na Secret Weaver.

8:32Od razu zmieniają mi się klasy na Classname, NaClassName,

8:36żeby mieć ten efekt. Visual Studio Code.

8:38Polecam Ci wtyczkę.

8:40To powinny być wtyczki typu załóżmy class tuClassName.

8:43Zobacz coś takiego.

8:45Mamy tutaj wtyczkę, która pozwala nam właśnie na taki sam feeling.

8:49W momencie, w którym wklejasz coś do JSX z klasą równa się.

8:53Zmieni nam się to na clasname, czyli już tak jak powinniśmy dokładnie używać w JSX.

8:58Zobacz, że teraz zaczyna to przypominać ten nasz prototyp.

9:02Tutaj mamy jeszcze podtytuł, który możemy sobie użyć i wkleić tutaj.

9:06Natomiast generalnie wygląda to obiecująco.

9:10Mamy swój pierwszy komponent, który jest osadzony na JSX.

9:14Dokładnie jest to w komponencie app.

9:16Mamy tutaj nasze header, natomiast jeszcze zmiana w JSX to jest zaimportowanie bulmy.

9:23Pamiętaj, że bulma musi być doinstalowana do projektu.

9:25Czyli generalnie żeby to wyglądało tak fajnie warto sobie w

9:29Dependencies dorzucić bulmę.

9:31Zrobiliśmy to podsumowując w npm install bulma.

9:35Wtedy dodaje nam się bulma do projektu i możemy działać dalej.