React: Renderowanie warunkowe

0:00Za nami tona dobrej roboty w tym dziale. Przygotowaliśmy

0:04naprawdę sporo, jeśli chodzi o rozbudowanie funkcji naszej aplikacji, a

0:08przed nami jeszcze bardzo, bardzo dużo nowych fajnych rzeczy, ale zanim do tego przejdziemy,

0:12to kilka ostatnich takich kroków, które pozwolą na to, że ten

0:17przyszły development będzie dla nas jeszcze przyjemniejszy. Tak jak mówiłem

0:21na końcu poprzedniej lekcji, mamy przed jeszcze takie dwa komponenty, które możemy wyabstrahować,

0:26które możemy wyciągnąć do osobnych plików i jest to tytuł,

0:31który mamy tutaj i tutaj. One są praktycznie identyczne i mamy

0:35też buttony. W tej chwili buttony nie mają dzielonego stylu. One są w osobnych

0:39plikach CSS i chcemy to zmienić właśnie poprzez stworzenie

0:43nowego pliku z komponentem button, więc teraz to zrobimy. Otworzymy

0:47sobie folder components, stworzymy folder Button, a w nim Button.js. Podobnie

0:53jak w poprzedniej lekcji, stworzymy też od razu Button.module.scss.

1:00Oczywiście musimy zaimportować React'a i

1:04teraz możemy stworzyć sobie naszego button'a z

1:08funkcją strzałkową i to nam będzie zwracać naszego

1:13buttona, który znajduje się na przykład w form'ie. Musimy go po prostu stąd wyciąć. Później

1:19zastąpimy go tym komponentem. Na razie zrobimy to ten sposób, export default

1:27i to w jaki sposób

1:31będziemy chcieli używać tego button'a, to podobnie jak w tym miejscu, tutaj mamy ten generyczny

1:35button. Tak samo nasz będzie działał, czyli będziemy mieć tag'i, tylko że z wielkiej litery

1:40i między nimi będziemy mieć jakiś tekst, który będzie znajdować

1:44się właśnie wewnątrz tego button'a i żeby to zrobić, musimy

1:48wyciągnąć sobie specjalny props, który nazywa się children i wstawić

1:52go to miejsce. Children to jest props, którego nie podajemy wprost,

1:57jako tag'a wewnątrz naszych tag'ów JSX'a. On

2:02jest podawany właśnie jako taki innerHTML naszego komponentu. Wynika

2:07to z tego, co tłumaczyłem w pierwszych lekcjach tego kursu, że ten zapis

2:11to tak naprawdę funkcja React Create Element, która jako jeden z parametrów

2:15przyjmuje children. Wejdźmy jeszcze tylko na chwilę do Form.module, bo

2:19tutaj musimy wyciągnąć sobie style związane naszym button'em. Zresztą

2:26widzisz, że jeśli tych stylów nie ma zaimportowanych, to Visual Studio Code

2:30nam o tym przypomina. Okej, dodajmy

2:43tylko te style i teraz możemy zaimportować nasz button,

2:47w tym miejscu. Następnie

2:57podać go tutaj wpisując add new

3:02item jako body i jak widzisz nasz button z

3:06powrotem się pojawił i w tym właśnie miejscu podawany jest to children, które

3:11wyciągamy sobie wewnątrz naszego komponentu jako props i skoro

3:15nasz button już został stworzony i podmieniony w form'ie, to teraz możemy zrobić to samo w naszym ListItem. Znajduje

3:21się wewnątrz folderu ListWrapper jako prywatny komponent. Szukamy

3:26naszego button'a i w tym miejscu natrafiamy na problem, bo nasz button

3:30w tym miejscu nie jest tak naprawdę button'em, tylko jest <a, czyli jest

3:34zwykłym linkiem, który wygląda jak button, niemniej chcielibyśmy, żeby nasz komponent

3:39button aplikował się zarówno do linków, jak i do takich button'ów funkcyjnych,

3:44które coś tam robią w naszej aplikacji. W tym wypadku, akurat dodają nam notatkę,

3:48więc to co robiliśmy wcześniej to dynamiczne zarządzanie

3:52tagami na podstawie jakiegoś props'a, ale w tym przypadku nie możemy

3:56zarządzać wyłącznie tag'iem, ponieważ jeśli na przykład sprawdzilibyśmy

4:01czy nasz link jest linkiem, poprzez sprawdzenie props'a  href, to

4:05i tak po dodaniu odpowiedniego tag'u wszystkie props'y zostałyby

4:09przekazane, jak na przykład rel, jak target, a przecież taki zwykły button,

4:14który nie jest linkiem, nie potrzebuję takich props'ów. Dlatego musimy tu zastosować

4:18renderowanie warunkowe. Termin brzmi dość górnolotnie, ale tak naprawdę nie jest to nic

4:22trudnego. To jest zwykły ternary operator z naszego javascriptu, bo jak pamiętamy JSX to

4:27nie jest nic innego jak JavaScript pod taką powłoczką HTML'a, udawaną.

4:31Przejdźmy zatem do naszego button'u i zobaczymy, co możemy tutaj zrobić. Żeby

4:36użyć ternary operator w naszym JSX'ie, musimy otworzyć curly bracers, czy

4:40też jak to mówię wąsy. Następnie

4:46napiszemy tutaj taki warunek. Jeśli do naszego button'a został podany

4:50props href. Wtedy

4:55mamy zwrócić a. A jeśli podany

4:59nie zostanie href, czyli nie będzie tego props'a, to musi nam wyjść button. To

5:06jest cała filozofia. Tak to naprawdę jest

5:10tak proste. Jedyne co musimy teraz zrobić, to po prostu podmienić

5:14te wartości na prawdziwe JSX'owe, czyli

5:19tutaj zrobimy button. Oczywiście on zostać musi zwrócony

5:23w nawiasach okrągłych i podobnie nasz a, a sobie

5:29skopiujemy naszego ListItem. Zawsze

5:46mówię, że takie ternary operator w JSX'ie, to jest najsmutniejszy komponent  w React'ie,

5:50bo z każdej strony ma smutną buzię, i z tej, i z tej,

5:55ale koniec dygresji. Ostatnia rzecz, którą musimy zrobić,

5:59żeby nasz komponent się nie rozleciał, bo jak na razie widzimy, że wszystko się rozpadło, to

6:04wrzucić to defragment. Ostatnim

6:10problemem jest to, że nie podajemy naszego props'a w dstrukturyzacji. Nie

6:14wyciągamy go, więc nasz komponent nie wie co to jest href. Teraz powinienien już

6:19wiedzieć. Okej, możemy teraz usunąć props'y, które są odpowiednie

6:23tylko dla tamtej instancji, czyli href właśnie, który podawany

6:29jest przez rodzica, a resztę z tych props'ów

6:33możemy zostawić. Tutaj jeszcze możemy wrzucić tylko children,

6:37ponieważ podobnie jak w przypadku button'a, nasz link też powinien

6:42się pojawiać z odpowiednim tekstem wpisanym w środek i żeby

6:46nasz komponent działał, to musimy faktycznie dodać ten href, ale

6:50jako props. W ten sposób i teraz powinno to działać. Wrócimy

6:55sobie naszego ListItem. Zaimportujmy button. Okej, jak

7:11widzimy nasz link się pojawił. Nasz button też nadal

7:15działa, nic się nie zepsuło. Sprawdźmy jeszcze konsole, żadnych błędów nie mamy.

7:20Sprawdźmy zatem w inspektorze czy to na pewno jest link. Mamy

7:25link, a to powinien być button. Jest button, czyli

7:30nasz ternary operator działa. Jeśli podajemy props'a href, wtedy

7:34nasz komponent staje się linkiem. Natomiast

7:38jeśli tego href'a nie ma, to staje się button'em. Proste, a

7:42zarazem bardzo potężne narzędzie i bardzo za to właśnie lubię React'a, że tego typu

7:47rozwiązania możemy tu stosować. Jeszcze tylko ostatnia chwila prawdy, żeby zobaczyć czy

7:51nasz link odpala link w nowej karcie, czyli czy wszystkie te rzeczy, które

7:55tutaj mam wpisane, działają poprawnie. Super, wszystko działa.

7:59Rzućmy jeszcze tylko szybko okiem

8:03na nasz tytuł. Znajduje się on tym w tym miejscu i zróbmy z niego osobny

8:08komponent, tak żeby przypomnieć sobie jak tworzenie nowych komponentów. Więc w

8:12folderze components stwórzmy sobie nowy folder o nazwie Title

8:16w nim Title.js. Oczywiście

8:23tutaj również dodamy tag

8:27module.scss. Sprawdźmy

8:31na przykład naszym ListItem, jak wygląda ten element. Wytnijmy go stąd. On

8:40teraz nawet nam zniknie, ale tym się nie przejmujemy. Importujemy React'a, tworzymy

8:45const'a Title. Zwracamy zawartość w postaci H2. Tutaj

8:51również będziemy podawać children, mimo że wcześniej było name, ale name

8:55będzie wpisane wewnątrz tego tagu Title. Jeszcze tylko

8:59zaimportujmy z naszego ListItem odpowiednie style. Zmienimy

9:03je na klasę title, która odpowiada nazwie naszego

9:08komponentu. Zaimportujemy nasze style. Okej i teraz

9:12możemy już użyć naszego komponentu wewnątrz ListItem.

9:17Musimy go oczywiście zaimportować i tutaj podamy jako children -

9:22name, tak jak to miejsce wcześniej i nasz komponent

9:26znowu działa poprawnie, więc teraz podmieńmy go jeszcze w jednym miejscu,

9:30czyli naszym formie i

9:41wszystko działa jak należy. Nasze tytuły

9:45zostały zamienione na uniwersalny komponent, który możemy wykorzystać teraz

9:49w dowolnym miejscu w naszej aplikacji, bez martwienia się o poprawne

9:54nazywanie klas, o poprawne stylowanie, o to żeby każdy ten tytuł wyglądał

9:59dokładnie tak samo. Teraz mamy pewność, że będzie wyglądał właśnie tak. Możemy jeszcze

10:03usunąć niepotrzebny styl z tego miejsca i to na

10:07tyle w tej części kursu. Za nami naprawdę kawał dobrej roboty, a ja już

10:11się nie mogę doczekać, żeby ci pokazać co przygotowałem w kolejnej części tego kursu,

10:15ponieważ zrobi naprawdę dużo trudniej, ale też dużo ciekawiej. Do zobaczenia

10:19w następnej lekcji.