Nowoczesny React: Zadanie: Zbuduj własny komponent

0:00Czas na zadanie podsumowanie tego modułu.

0:03Jako zadanie chcę, żebyś wykonał dwa komponenty.

0:06Jeden to Notification.

0:08Tu jest prosty kod odchudzony z bulmy.

0:10Bulma ma taki komponent jak Notification.

0:13Możesz sobie odnaleźć tutaj korzystając z Search.

0:18Zauważ, że w najbardziej odchudzonej formie.

0:21Czyli nie potrzebujemy tego cancel buttona.

0:23Tutaj chcemy po prostu mieć div class Notification.

0:26A drugi komponent to jest bar, którego widać tutaj.

0:30Niby jest dość prosty, jednak w momencie, w którym dostajemy Responsive Web Design

0:34zobacz jeżeli jak gdyby modyfikuje wielkość tego okna to

0:38dostajemy tutaj burger menu.

0:39Na razie jest to krzyżyk i na razie nie będzie to działać.

0:42Będziemy sobie to w kolejnym module aktywować tak, żeby burger

0:46menu działało poprawnie.

0:47Natomiast na razie chcę najprostszą możliwą formę NAV bara.

0:52Ta najprostsza zawiera trochę kodu, dlatego, że ten cały burger menu, które

0:56mamy tutaj, ono jest nam potrzebne, więc tutaj będzie jak gdyby tyle elementów,

1:01które pozwolą nam na to, żeby zobaczyć właśnie burgera w ten sposób.

1:07Tutaj dodana jest celowo klasa Is Active, dlatego, że jej brak lub dodanie.

1:12Powoduje, że dany element się pojawia albo znika, czyli jak gdyby.

1:15Widzimy, że dodanie i odjęcie tej klasy będzie skutkowało tym, że będziemy.

1:21Tutaj otwierać zamykać to burger menu.

1:23Aktywację tego zrobimy sobie później.

1:25Natomiast jeśli chodzi o Navbar.

1:26To jest kolejny element z bulmy.

1:29Kolejny element, który chcemy sobie odnaleźć.

1:31Ja skorzystałem z tego Navbara, który jest na samym początku ten basic Navbar, więc

1:36stąd możesz wziąć cały ten kodzik lub z materiałów lekcji 14.

1:41Natomiast cały ten kod trzeba odchudzić dlatego, że nie potrzebujemy

1:46aż tyle elementów.

1:47Ja tutaj po prostu ograniczyłem to do minimum.

1:50Cel zadania jest następujący chcesz wykonać dwa komponenty?

1:53Jeden to po prostu notification, w którym będzie props, który ma możliwość

1:58modyfikacji właśnie tego, co jest zawarte w tym Notification i będziemy mogli sobie

2:04używać to w aplikacji, a drugi to Navbar i ten Navbar, który przygotujesz ma mieć

2:10właśnie te linki do swojego menu w postaci tablicy w postaci area,

2:16który będzie zawierał dane.

2:18Czyli chcielibyśmy tutaj przygotować jakieś kolekcje danych,

2:22którą będziemy wyświetlać.

2:24W ten sposób przećwicz te elementy, które były w tym module.

2:27Użyj Prop types.

2:29Użyj kod splitingu tak, aby każdy komponent był w oddzielnym

2:32pliku i zbuduj ten widok. Komponent owo.

2:36W tym miejscu zapauzuj sobie to nagranie i za chwilę zrobimy to zadanie razem.

2:43Ok, spróbujmy to zadanie wykonać razem.

2:46Mamy tutaj Notification i myślę, że jeżeli klikniemy prawym Refaktor Extract

2:51komponent i function i tutaj będzie to po prostu notification, to to by wystarczyło.

2:57Natomiast chcemy, żeby to Notification miało jeszcze props, a jako message

3:03to message chcemy wyświetlić w tym miejscu i będziemy chcieli naprawić Probtypes

3:09oczywiście dla Notification.

3:11Zobacz, że jeżeli dodamy Notification i Message razem z Type String

3:15nie mamy błędów z Slinta.

3:18Tutaj Notification to będzie po prostu jakiś message, który sobie ustalimy.

3:22To może być message na zasadzie właśnie tego, co mamy w prototypie.

3:28Spróbujmy sobie wrzucić coś takiego tutaj jako string.

3:33Możemy również przygotować sobie ten notification troszeczkę inaczej.

3:37Co by było gdyby message to było tak naprawdę children

3:42i domyślnie to children jest empty, ale my chcemy sobie tutaj móc modyfikować tą

3:47zawartość tego HTML'a, który mamy w środku.

3:51Jak najbardziej mamy taką możliwość, jakby przygotowując sobie Notification

3:55właśnie w ten sposób.

3:57Teraz jeśli chodzi o Children musimy określić, że to jest type String.

4:01Nie do końca jest to prawda, dlatego, że Proptypes powinno być teraz one of the

4:06type i możemy sobie zobaczyć, że będzie to albo Proptypes, które jest w naszym

4:13przypadku stringiem, albo prop types, który jest w naszym przypadku elementem.

4:20Czyli możemy tutaj sobie wrzucić jakiś inny element.

4:23Zobacz, że może być to na przykład paragraf z napisem hello i dostaniemy

4:29tutaj elegancko paragraf z napisem hello.

4:33Czyli tutaj możemy mieć paragraf i na przykład jakieś style color red

4:39i zobaczymy, że to nam się w ten sposób wyświetla, czyli reaguje na te zmiany.

4:44Super, Mamy tutaj One of type, czyli.

4:47Czyli gen może być stringiem, może być elementem, to notification.

4:51Oczywiście musimy sobie przerzucić, bo to musi być w osobnym komponencie, czyli

4:56tutaj można refactorMove i tutaj można sobie to przenieść do

5:02nie tyle Notification JSX, co Components Notification JSX.

5:10Czyli mamy przeniesione Notification.

5:12Powinniśmy jeszcze przenieść Notification Proptypes.

5:16Czyli tutaj przenosimy sobie import propsów.

5:19Nie potrzebujemy tego Notification.

5:21Ten import powinien wrócić tutaj do App JSX, natomiast tutaj mamy

5:25Proptypes i Notification.

5:27I to jest nasz pierwszy komponent, tutaj osadzony właśnie w ten sposób.

5:33Drugim elementem będzie Navbar.

5:36Czyli możemy sobie tutaj utworzyć z kolei zróbmy sobie to w drugą stronę.

5:40Utworzymy sobie coś takiego jak bar.

5:44Tutaj klasycznie eksportujemy funkcję Navbar, więc mamy komponent na bar

5:51i wrzucamy go sobie tutaj.

5:52Czyli to całe Navnow będzie po prostu jako Navbar.

6:04I teraz chcieliśmy, żeby te dwa elementy były jako lista.

6:10Możemy sobie zdefiniować menu items, które będzie obiektem dlatego, że w tym

6:14konkretnym przypadku mamy dwie rzeczy, które nam się zmieniają, czyli z jednej

6:19strony mamy item, a z drugiej strony mamy href, który się zmienia.

6:23Więc ja bym chciał to sobie zrobić jako title albo name

6:28i href, który nam się tutaj zmienia.

6:31I drugi obiekt tej tablicy też będzie miał name i href i href.

6:38Pierwszy to jest po prostu łamaniec, a drugi to mamy exchange.

6:42Co więcej tutaj będziemy mieli exchange, a tutaj będziemy mieli people.

6:48I teraz to menu items.

6:49Chcemy sobie tutaj bardzo fajnie rozłożyć.

6:54Spróbujmy zrobić to sobie na jeszcze jednym komponencie, bo to jest Twoja

6:57decyzja i możemy tutaj mieć kolejny komponent.

7:01Navbar Item Zobacz, będzie to nasz item JSX.

7:06I tutaj zrobimy sobie kolejne exploit faction NumberItem.

7:13Spróbujmy sobie tutaj przekazać props, który będzie zawierał href i name.

7:20Możemy zwrócić sobie tutaj tego jsXa w nawiasach.

7:29I podstawiamy tutaj. A href.

7:32A tutaj name.

7:35I oczywiście potrzebujemy proptypesów, żeby określić sobie przede wszystkim href.

7:40To będzie string I is required I name.

7:43To też będzie string is required.

7:47Czyli obydwa te tipsy są wymagane.

7:50Będziemy mieli obiekt i chcemy teraz ten obiekt wrzucić

7:54sobie tutaj jako kolejne propsy.

7:58W takim wypadku menu items będziemy chcieli mapować.

8:03Zobacz, że jeden taki item będzie miał tutaj href, a tutaj miałby item Itemname.

8:11To już by nam wystarczyło bez tego exchange, żeby dobrze przemalowywać

8:17właśnie te elementy, które mamy tutaj.

8:20Ponieważ mapujemy po obiektach w tablicy.

8:22Zobacz, że item jest obiektem gdzie mamy age i name i właśnie stosujemy

8:26item a href item name.

8:29Ale nie po to przygotowaliśmy sobie komponent, żeby z niego nie skorzystać.

8:34Czyli tutaj będzie Navbar item, który chcemy sobie zaimportować

8:40i tutaj możemy sobie wrzucić item name oraz tutaj Item href.

8:48Musimy oczywiście zamknąć to Navbar item i dodać key jako href na przykład.

8:56W takim układzie jeśli to odświeżymy, żeby potwierdzić, że wszystko jest w porządku

9:00widzimy, że mamy People i Exchange.

9:02Jeśli teraz zmienimy cokolwiek tutaj na przykład dodamy wykrzykniki.

9:07Zauważ, że to jest widoczne.

9:09Widzimy, że tutaj możemy dopisać sobie kolejne, kolejne elementy,

9:15które byłyby kolejnymi podstronami.

9:22Na przykład ad person.

9:24Moglibyśmy tutaj dodać jako nasze kolejną pozycję menu.

9:27Więc w ten sposób możemy programistycznie jak gdyby wrzucić sobie elementy.

9:32I to jest ta powtórka z lekcji, w którym renderowaliśmy kolekcję danych.

9:39Co więcej, jeżeli mamy taką sytuację, że tutaj mamy name i name, nam się powtarza

9:43item href zobacz, że href, czyli ten obiekt, który jest tutaj jest

9:48równoznaczny z procesami, które są w item.

9:51Czyli zwróć uwagę, że navbar item ma href i name takie same propsy jak tutaj.

9:56Moglibyśmy to sobie rozkodować?

9:58Czyli w momencie gdy tego nie podamy będziemy mieli tutaj error is proptypes,

10:03ale możemy to spreparować sobie w ten sposób.

10:07Czyli item może dostarczyć właśnie Wszystko to, co mamy tutaj, czyli name i

10:14href będzie dostarczone do każdego z tego navbaritem.

10:18I w ten sposób możemy sobie zrefaktoryzować ten widok tak, aby

10:22przekazywać to bezpośrednio do tego komponentu.

10:25W tym momencie mamy bar, który renderuje swoje navbaritem na podstawie danych.

10:31Te dane to jest tablica obiektów i tutaj korzystamy właśnie z obiektów, tak żebyś

10:36mógł zauważyć sobie, że jak najbardziej możemy mieć po pierwsze tablicę obiektów,

10:40po drugie jeśli iterujemy po tej tablicy, to te obiekty możemy sobie przekazywać

10:45właśnie jako propsy i jeżeli propsy naszego komponentu są takie same jak pola

10:51tego obiektu, to możemy użyć takiego zapisu ze spredem.

10:56Zbliżamy się tutaj powoli, powoli do w pełni działającej aplikacji.

11:00Nie działa nam jeszcze oczywiście to menu tutaj, no i nie możemy zaznaczać

11:06elementów, ale do tego wszystkiego potrzebujemy zrozumieć czym

11:10jest stan i używanie UseState.