React: Przekazywanie propsów cz.2

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć nasze dwa batony

0:04i za pomocą propsów, a właściwe jednego props'a secondary potrafimy zmienić

0:08kilka jego właściwości. Przez to wygląda inaczej, jest mniejszy, jest

0:12szary i ma inny rozmiar fontu, natomiast jeśli spojrzymy sobie na strukturę

0:17naszego kodu, to to mocno dość się skomplikował mamy tutaj aż 4

0:21funkcje strzałkowe i być może jest jakiś lepszy sposób na to, żeby tego

0:26uniknąć, żeby sprawić, żeby ten kot był trochę bardziej suchy, jak to

0:30się mówi, czyli dry mówimy don't repeat yourself, więc sprawdźmy

0:35co możemy z tym zrobić, oczywiście funkcje strzałkowe style-components możemy

0:39otwierać nie tylko jako właściwości tutaj w tym miejscu, możemy

0:43otworzyć w dowolnym miejscu, ponieważ jest to nic innego jak po prostu, czysty JavaScript

0:48i nic nas tutaj nie ogranicza. Możemy tutaj wrzucać consol logi, funkcje co

0:52tylko nam się marzy, więc teraz spróbujmy zdestrukturyzować tego props'a

0:56w tym miejscu i zwrócić go w tym miejscu, to

1:00co moglibyśmy zrobić to

1:05przenieść to do nowej linijki i stworzyć warunek w taki sposób, podając

1:12tutaj dalszą część definicji CSS'owych,

1:16czyli te wszystkie rzeczy, które tutaj mamy w tym ternary operator możemy

1:20po prostu przenieść w to miejsce bez żadnych już funkcji strzałkowych, po prostu jako definicję,

1:25taką zwykłą w CSS'ie i wynika to z tego, że taki operator warunkowy jeśli

1:29ma dwie rzeczy obok siebie to jeśli ta pierwsza jest prawdziwe i druga

1:33jest prawdziwa to zwraca zawartość tej drugiej, więc w naszym przypadku właśnie

1:37o to nam chodzi, żeby ta funkcja zwróciła nam zawartość tego, co tutaj wpiszemy,

1:41więc teraz bardzo szybko przeniosę wszystkie te wartości tutaj

1:45do tego miejsca. Jedyną rzeczą, którą tutaj jeszcze musimy zrobić, żeby style-components

1:49to lepiej ogarnęło, to musimy tutaj dodać CSS, który zaimportujemy

1:54sobie z naszego style-components. Jest to po prostu wymóg

1:58tej biblioteki i dzięki to to będzie działać poprawnie. Okej, a teraz przyniosę

2:02te wszystkie rzeczy. Jak

2:11już to zrobiłem to teraz mogę pozbyć się tych funkcji strzałkowych i

2:20ten sposób nasz kod jest nieco bardziej ustrukturyzowany

2:24i uporządkowany ponieważ od razu widzimy co dotyczy opcji

2:28secondary, więc nie musimy tutaj 10 razy wpisywać tych funkcje

2:32strzałkowych, które również są przydatne i bardzo dobre tylko akurat w tym przypadku, łatwiej

2:37było to zrobić w ten sposób i skoro te część podawania props'ów

2:41do style components mamy już ogarniętą to zaraz mogę ci pokazać drugą rzecz, która również

2:45jest bardzo fajna, bo wyobraźmy sobie, że na przykład w tym podstawowym

2:50kształcie button'a chcielibyśmy, żeby użytkownik czy też programista,

2:54który będzie to dalej pisał mógł wpływać na to jaka

2:58długość będzie tego button'a i moglibyśmy faktycznie zrobić tak, że

3:02mielibyśmy tutaj kolejnego psa typu very

3:06long i on wtedy tutaj by zmieniał coś, ale jest jeszcze inna opcja,

3:11możemy po prostu mu podać props'a, który będzie przechowywał

3:15jakąś wartość, więc teraz po prostu wpiszmy tutaj width i

3:20podajmy tutaj na przykład 500 pikseli i

3:24oczywiście w naszej aplikacji póki co nic się nie zmieni, ponieważ tego

3:28props'a musimy jeszcze przetworzyć właśnie po stronie style-components i teraz

3:32w tym miejscu możemy sobie znowu utworzyć naszą klamrę, podamy

3:38tutaj funkcję strzałkową, zdestrukturyzujemy sobie

3:42width, ponieważ tylko na tym props'ie nam zależy i teraz możemy zrobić

3:46coś takiego, że jeśli mamy width to zwracamy to width, a jeśli

3:51go nie ma to dajemy tutaj operator or i robimy

3:57to w ten sposób, czyli destrukturyzujemy sobie props'a width, którego

4:02podajemy w tym miejscu, on przechowuje wartość 500 pikseli i teraz

4:06jeśli on go sobie tutaj wyciągniem to go zwróci. Natomiast, jeśli go

4:10nie ma to wtedy mówimy, że jeśli go nie ma no to spoko, to

4:14wtedy zastosuj domyślą wartość 220 pikseli i nasz

4:19button faktycznie ma teraz 500 pikseli, jeśli coś zmienimy, jeśli

4:23będziemy chcieli żeby miał 20 pikseli no to będzie wyglądał okropnie, ale

4:27też możemy to zrobić, więc to jest taki drugi sposób na podawanie props'ów,

4:32czyli psów, które przechowuje jakoś wartość, a poprzednie props'y

4:36to były props'y, które były po prostu bulianami, czyli wartościami true albo

4:40false i to tyle jeśli chodzi o podawanie props'ów a w następnej lekcji pokażę

4:44ci jak dodać globalne style do naszego projektu, w taki sposób

4:49żebyśmy mogli na przykład mieć właśnie ten font, o który obiecałem, że za chwilkę zainstalujemy,

4:53także montserrat będziemy instalować w następnej lekcji.