React: Przekazywanie propsów

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć nasz pierwszy styled-components, który

0:04jednak w żaden sposób nie przypomina tego, co mamy w naszych design'ach, więc

0:08teraz sprawdzimy, żeby te button'y, wyglądały dokładnie tak jak w design'ach a przy

0:12okazji pokażę ci jak możemy przekazywać props'y do style-components, aby

0:17wpływać na to jak wyglądają, jaki mają rozmiar i tak dalej, więc teraz stworzymy sobie style

0:21dla tego button'a, czyli tego większego, będzie button domyślny, natomiast

0:25ten mały będzie dostawał faktycznie props'y, które będą wpływać na jego

0:29wygląd. On ma szerokość 220 i wysokości 47,

0:34więc teraz wejdziemy sobie do komponentu button, wywaliło

0:41mu border oraz sprawimy, żeby miał zaokrąglone

0:45krawędzie, okej.

0:51Kolejna kwestia to oczywiście font, którego tutaj używam, jest to

0:55Montserrat, który jest Google fontem. Za chwilkę pokażę ci jak możemy załadować font'y do

1:00naszego projektu. Natomiast teraz, jeśli nie masz Montserrat zainstalowanego

1:04lokalnie to pewnie włączy się jakiś inny font, który będzie zastępczy,

1:08natomiast tym się nie przejmuj i za chwilkę i tak będziemy ustawiać ten Montserrat jako

1:12font w naszym projekcie, więc teraz sprawdzimy

1:17sobie, to jest 16 Montserrat semibold. Sprawdźmy,

1:37to jest napis Close, Save i wszystkie

1:43button'y w design'ach są pisane wersalikami, czyli wielką literą, więc teraz

1:47żeby oszczędzić sobie pomyłek i w razie gdyby ktoś zapomniał wpisać te

1:51wersaliki, możemy po prostu zmienić tutaj text-transform uppercase. Okej,

2:01teraz skoro nasz button wygląda już tak jak w design'ach, to teraz możemy przejść do tej

2:05drugiej opcji, którą będziemy sterować za pomocą props'ów, czyli

2:09tutaj zmieniają się tak naprawdę dwie rzeczy możemy nazwać ten button po prostu

2:13secondary i wtedy na podstawie tego props'a, który będzie mu przekazać, czyli

2:17właśnie on się będzie nazywał secondary, będzie się zmieniał jego wygląd, będzie szary,

2:22będzie mniejszy i font też będzie mniejszy czyli

2:27teraz stwórzmy sobie drugą instancję tego, nazwijmy

2:31to Remove i po

2:35prostu podajmy mu props'a secondary. Jak pamiętasz w taki

2:40sposób podany props to jest to samo co coś takiego. Jeśli

2:47taki props się znajduje to znaczy, że on jest true, więc

2:54teraz wrócimy sobie do button'a i propsy, podawane

2:58w komponentach, styled-components wyciągamy za pomocą funkcji strzałkowej

3:02i teraz jak to wygląda, weźmy sobie na przykład color

3:07i teraz pamiętaj, że piszemy to wszystko

3:11w template literal, czyli możemy tutaj otworzyć ze znakiem dolara

3:16i klamer, po prostu na przykład funkcje strzałkowe, w taki

3:20sposób, więc teraz background color

3:25otworzymy sobie coś takiego. Wpiszemy tutaj

3:29funkcję strzałkową, wpiszemy

3:34props następnie props secondary i stworzymy

3:40tutaj ternary operator, jeśli props jest secondary to

3:44taki będzie kolor tego button'a. Natomiast jeśli jest

3:48nie-secondary, czyli jest domyślny, wtedy

3:53użyjemy koloru żółtego i w ten sposób mając

3:58te dwa button'y, ten drugi jest secondary, jak teraz zobaczymy, to  ten jeden jest żółty,

4:02a drugi jest szary. Można tutaj jeszcze dokonać

4:06jednego usprawnienia, bo props to jest oczywiście ten taki generalny obiekt props'ów,

4:10który podajemy. Jeśli props'ów jest więcej to faktycznie możemy wtedy zastosować

4:15coś takiego, natomiast jeśli wiemy, że props, który podajemy nazywa się secondary, to

4:19możemy go po prostu zdestrukturyzować w tym miejscu i podać

4:24go w ten sposób i działanie tego jest dokładnie takie samo. Teraz

4:29zmieńmy jeszcze dane dotyczące wymiarów i fontu

4:33w tym button'ie wymiary to 105 x 30, a font to 10.

4:38Możemy

4:44skopiować sobie tę funkcję do tej linijki. po prostu podmienić

4:49wartości. Czyli domyślny to będzie 16, a secondary

4:53będzie miał 10 pikseli. Została nam jeszcze szerokość i wysokość, okej

4:58i po takich zmianach nasz button powinien wyglądać właśnie, właśnie tak,

5:02więc wszystko się zgadza i w ten sposób możemy podawać props'y,

5:06które są bujana mi tak zwanymi, czyli właśnie wartościami true albo false

5:10do naszych komponentów, w ten sposób. Jest to bardzo proste i naprawdę

5:15bardzo wygodne kiedy właśnie stosujemy tego typu rozwiązanie,

5:19ponieważ później w tym syntax'ie JSX'a w tej składni mamy

5:23bardzo duży porządek, bo mamy tylko po prostu dwa button'y,  one nie mają żadnych dodatkowych

5:27prac, żadnych warunków tutaj wewnątrz, tak jak w CSS modules czasami tak bywa. Mamy

5:32po prostu props'a secondary, a z całą logiką radzi sobie już

5:36później tutaj style-components, w następnej lekcji pokażę

5:40ci, jak możemy podejść do tego od trochę innej strony.