React: Tworzenie molekuły karty

16.8.x

0:00Cześć, po tym jak skończyliśmy budować nasze atomy, a przynajmniej część

0:04z tych atomów, to teraz możemy przejść do budowania molekuły. Pierwszą

0:08taką molekułą, którą się zajmiemy jest na pewno komponent karty składający się

0:12z tytułu, takiej informacji o tym kiedy został utworzony, opisie,

0:16button'ie i takim wrapperze, także teraz przejdźmy

0:20sobie na naszego edytora i zakończmy to. Na

0:25początek odpalimy sobie storybook'a tak żebyśmy mieli już włączony

0:31ten system i teraz w przeciwieństwie do tego jak wyglądały

0:35nasze atomy, nasze molekuły już raczej nie będę składały się wyłącznie ze

0:39styled-component, tak jak tutaj. Będą zawierały jakiś JSX. Przejdźmy

0:44sobie zatem do folderu molekuł i stwórzmy naszą pierwszą molekułę. Nazwiemy ją

0:48card. Nim oczywiście znajdziemy card js i

0:53card stories js.  Zaimportujemy

0:57sobie React'a, styled-components, a także

1:02komponenty paragraf, heading oraz

1:06button. Okej, skoro wszystko już mamy zaimportowane to teraz możemy

1:10stworzyć sobie nasz komponent, na początek może

1:14być to zwykły komponent funkcyjny, zobaczymy jak nam to pójdzie i teraz ja

1:19stosuję taką konwencję, że wszędzie gdzie mam styled-component,

1:23który zawiera już jakiś JSX to i tak takim zewnętrznym komponentem

1:27zawsze jest wrapper albo styled-wrapper, w którym właśnie

1:32zdefiniujemy to, jak to wszystko ma wyglądać. Przede

1:36wszystkim możemy sobie zerknąć na padding, mamy tutaj 30 i 17

1:41i od tego sobie zaczniemy. Stworzymy

1:46sobie ten styled wrapper tutaj w tym miejscu. Zaimportujemy heading, okej,

1:53skoro nasz komponent już jest gotowy, to teraz możemy zaimportować sobie

1:57stories i kiedy to już mamy gotowe to napiszmy

2:01sobie story do naszego pierwszego komponentu. Musimy

2:07jeszcze zaimportować nasz komponent oczywiście, okej. Podobnie

2:14jak w przypadku poprzednich komponentów zrobimy

2:19to w ten sposób, okej mamy tutaj błąd, że nie można zaimportować

2:23komponentów, wynika to z tego, że gdybym chciał używać

2:27tylko takich importów to wewnątrz mojego

2:31folderu z komponentem musiałby się znajdować index js, a nie heading js.

2:35Mogłoby to być wygodniejsze, natomiast jeśli już stosujemy indeksy,

2:40to zazwyczaj robimy tak, że indeks jest osobnym plikiem, który importuje heading js

2:44i eksportuje go, więc jest to takie dodatkowy koszt utrzymania

2:48tych komponentów, a w tym przypadku możemy zrobić po prostu coś

2:52takiego, że będziemy importować

2:57je mimo wszystko dodając nazwy

3:01tych komponentów dwa razy, czyli jeden jest

3:05dla folderu, a drugi jest dla pliku o takiej samej nazwie, ale

3:09nie jest to wielki problem, bardziej zaawansowani użytkownicy mogą

3:13sobie napisać jakąś metodę, która to rezerwuję bez indeksu i bez

3:17tego button'a na końcu. Natomiast nie będziemy się tym zajmować w tym kursie, to

3:21jest taki naprawdę detal, sprawdźmy nasz card component.

3:25Okej, jeśli zobaczymy sobie na to, co mamy już teraz,

3:29a na to jak wygląda to na naszych design'ach to niewiele nam

3:33trzeba. Pierwsze co musimy zrobić to musimy dodać ten żółty wrapper,

3:37który jest na górze naszej karty. Dodatkowo jeszcze rzucimy

3:42sobie cień pod naszym komponentem i teraz

3:52jak zobaczymy sobie na to co już mamy i na to co mamy tutaj to pojawia

3:56się kolejny problem, ponieważ ten padding tutaj rzuca nam

4:00się tutaj na nasz wrapper drugi, czyli on jest zależny od tego

4:04padding'u, a chcemy żeby on dobijał do krawędzi naszego komponentu, więc

4:08wyrzucimy sobie ten padding stąd, dzięki temu nasz

4:13górny wrapper będzie miał 100% w szerokości

4:17naszego komponentu. Wrócimy go sobie w to miejsce już

4:23widzimy, że ten dolny padding może być nieco mniejszy. Powiedzmy,

4:27że to będzie 10 pikseli i teraz ten dolny wrapper

4:32ma dokładnie ten sam padding, tylko nie jest żółty, więc

4:36możemy zrobić coś innego. Nazwiemy to zamiast tag, nazwiemy to inner wrapper,

4:40damy mu props'a yellow

4:45i teraz jeśli yellow

4:49będzie prawdziwe to my nie mamy theme primary, a

4:53jeśli yellow jest nieprawdziwe, to damy tutaj po prostu white i

5:00teraz tutaj w tym miejscu jak podam yellow to

5:04mamy żółty, opleciemy

5:10sobie drugą część naszego komponentu tym inner wrapperem,

5:14okej. Jesteśmy prawie, prawie w domu. Jedyne

5:20co nam zostało to zaokrąglone rogi, możemy

5:26to uzyskać właśnie poprzez dodanie rodzicowi

5:30border-radius i schowanie tych w tych ostrych rogów

5:34poprzez overflow hidden, mimo wszystko ten 17

5:38pikselowy padding na dole chyba może zostać. Będzie to okej i teraz

5:43dodajmy sobie jeszcze tutaj informacje o dacie

5:47utworzenia i to, co możemy zrobić ze styled-component,

5:51który wygląda inaczej niż chcielibyśmy, żeby wyglądał w danym miejscu to możemy go po

5:55prostu ostylować odpowiednio do danej potrzeby. Akurat w tym

5:59komponencie możemy to zrobić w taki sposób. Podajemy

6:04wtedy do styled w nawiasach komponent, który chcemy

6:08rozszerzyć o jakiś styl. Dajemy

6:12mu tutaj font-weight bold.

6:20Tutaj zamiast paragraf

6:24dajemy date, info i zrobiłem literówkę, dobra

6:29i jeszcze tylko nam został font-size, który tutaj pewnie będzie

6:34nieco mniejszy. Font też możemy wyciągnąć

6:38sobie z naszego theme, w porządku

6:42i teraz jedyne co nam jeszcze wadzi to marginesy w naszym heading'u,

6:46które powodują że ten żółty prop jest

6:50naprawdę wielki, więc możemy zrobić coś takiego jak styled header, styled heading i wiedząc,

6:58że akurat w tym miejscu marginesy naszego heading'u

7:02są za wielkie, możemy je po prostu wyzerować i podmienić

7:06w tym miejscu komponent. Podobnie

7:12zrobimy z date i info, ponieważ te dwie rzeczy w naszych design'ach przylegają

7:17do siebie bardzo mocno. Teraz to co jeszcze możemy zrobić

7:21to dodać na przykład trochę marginesu tutaj na dole i

7:25tutaj na górze. Dobra,

7:31skoro to już mamy zrobione to teraz tak, szerokością tego się nie przejmujemy, ponieważ

7:35będziemy to wrzucać w grid'a, który będzie sam określał automatycznie szerokość

7:39tego komponentu. Natomiast możemy nadać mu jakąś minimalną wysokość i tutaj w

7:43naszych design'ach jest to 385 pikseli

7:47przy czym te dwie rzeczy się od siebie odpychają, więc tutaj prawdopodobnie będziemy

7:51musieli użyć flex'a, tutaj teraz zrobimy sobie min-height,

7:55spróbujmy na razie 380 pikseli

8:00w porządku. Teraz tutaj użyjmy

8:04sobie flex'a, ale zróbmy może to w taki sposób tylko

8:08ten dolny będzie flex'em. Zaimportujemy

8:12sobie CSS, który już znamy z naszego styled-components

8:16i zrobimy coś takiego. Jeśli flex

8:22jest obecny to

8:29zrób mi z tego komponent, który ma display: flex, flex-direction

8:37column justify-content

8:42space-between, uwaga. Okej,

8:48to nam nie zadziałało z tego względu, że nasze rodzic

8:52ma min-height, czyli nie ma do końca określonej wysokości. Tutaj

8:57nawet jakbyśmy dali height to nic nam nie zmieni. Ten

9:02komponent nadal zajmuje tylko taki wycinek, nie zajmuje

9:06całego naszego komponentu, tak jak powinien, możemy

9:10to rozwiązać z racji, że możemy korzystać z grid'a, to możemy

9:14zrobić coś takiego, tutaj display grid grid-template-rows

9:22i teraz tak, możemy w gridzie

9:26używać jednostki fraction, która mówi nam, że na

9:30przykład jak mamy dwa razy fraction to jest dwa razy po

9:34pół. To są tego samego, to są tej

9:38samej wielkości fragmenty, więc teraz jeśli zrobimy

9:42zero dwadzieścia pięć i jeden to ten będzie mniejszy o trzy czwarte

9:47od tego, czyli ten zyskał 75%

9:52naszego komponentu, jeśli chodzi o wysokość, a więc dostał

9:56tą wysokość, która była potrzebna do tego żeby flex tutaj zaczął

10:00działać i te elementy zaczęły się od siebie odpychać, dlatego

10:04zawsze podkreślam, że grid i flex box to są techniki

10:09komplementarne względem siebie uzupełniające się, a nie konkurujące. Dlatego

10:13strasznie nie lubię pytań typu co jest lepsze flex box czy grid, okej

10:18i w tej lekcji to wszystko, w następnej lekcji zrobimy sobie kolejne

10:22rzeczy, które są związane z tą kartą, ponieważ mamy jej aż trzy rodzaje w

10:26naszym projekcie, mamy jeszcze takie ze zdjęciem i mamy takie z

10:30linkiem.