React: Przygotowanie szablonu dla notatek

16.8.x

0:00Cześć, skoro nasz sidebar już jest gotowy to teraz możemy przejść do dalszego rozwoju

0:04naszej aplikacji i teraz stworzymy sobie ten oto tutaj widok nie

0:08będziemy na razie przejmować się ani tym, żeby renderować różne notatki albo

0:12żeby trzymać się w jakimś storze albo w innym miejscu, które by mogło

0:16przechowywać informacje na ich temat, po prostu na razie wrzucimy to tak na sztywno,

0:20żeby zająć się tą wersją wizualną, później przejdziemy

0:24do tworzenia widoku notatki i kiedy będzie mieć jedno i drugie gotowe to wtedy zajmiemy

0:29się już konkretnie rozwiązywaniem problemów związanych właśnie z dodawaniem notatek z

0:33przechowywaniem ich z pobieraniem ich z backend'u i tak dalej. Przejdźmy

0:38zatem do kodu i wejdźmy sobie

0:42do widoku notatek, w którym będziemy chcieli renderować nasze

0:46notatki. Pierwsze co musimy zrobić to oczywiście zaimportować card

0:50component biorąc

0:55pod uwagę, że on na razie nic tutaj nie przyjmuje, jeśli chodzi o treść, on te wszystkie treści ma

0:59wbite na sztywno, to jedyne co możemy podać to card type, który

1:03w tym przypadku będzie note. Zrobimy

1:09sobie 6 tych notatek, jak sobie wyjdziemy na naszą aplikację

1:14to zobaczymy, że tych notatek faktycznie zrobiło się 6 i

1:18teraz to co musimy zrobić to sprawić, żeby one pojawiały się w gridzie,

1:22to powinno być dość łatwe zaraz się tym zajmiemy przejdziemy sobie do

1:26user page template, bo to ten komponent będzie odpowiedzialny

1:30za wyświetlanie tego w taki właśnie sposób, stworzymy sobie green wrapper

1:37i w nim za deklarujemy grid-template-columns, będziemy

1:42mieć w sumie trzy kolumny, więc możemy wykorzystać repeat i

1:47podać, że będzie mieć 3 równe

1:51kolumny, oczywiście nie możemy zapomnieć o Display Grid i myślę,

1:56że możemy jeszcze dać grid-gap o szerokości,

2:00teraz zobaczymy jak mamy na design'ach, około

2:0585 pikseli, oplećmy sobie teraz children

2:09tutaj w tym miejscu i nasz

2:14grid wygląda już trochę lepiej. Musimy jeszcze tylko uwzględnić

2:19paddingi, które znajdują się po prawej stronie, od prawej

2:24mamy 161, od lewej około siedemdziesięciu i teraz

2:36brakuje jeszcze tego search'a notatek i informacji o tym ile tych notatek

2:40jest wrzucimy to sobie do div'a, nazwiemy

2:46to page heading albo page header właściwie

2:50to będzie lepsza nazwa. Jest taka konwencja, że wszystkie

2:54elementy, które znajdują się wewnątrz jakiegoś pliku,

2:58które stylujemy custom'owo względem tego widoku,

3:03nazywamy właśnie z początkiem style, nie

3:08jest to coś sztywnego, jeśli nie podoba ci się ta konwencja, jeśli nie chcesz z tego korzystać, to

3:12możesz to spokojnie pominąć. Ja po prostu tego używam, bo

3:16jest to dla mnie wygodniejsze. To mi daje takie poczucie, że na przykład jak importuje

3:21sobie sidebar i on nie jest ostylowany customow'o jakoś względem tego widoku, tam

3:25nie ma tego styled na początku i teraz wrzućmy sobie ten page header

3:29na razie nie ostylowanie w to miejsce i tu

3:33będzie mieć input, który musimy sobie zaimportować i będziemy

3:38też potrzebować hheading dla przypomnienia input

3:42przyjmuje props'a search. Jeśli on jest obecny to

3:46on wtedy zmieni trochę swój wygląd, okej.

3:50Sprawdźmy jak to wygląda, tym się zaraz zajmiemy, żeby to

3:54było w osobnym rzędzie zaimportujmy sobie jeszcze paragraf, który

3:59posłuży nam tego żebyśmy mogli tutaj wrzucić liczbę notatek. Oczywiście

4:05na razie to też wrócimy sobie na sztywno i w

4:10sumie moglibyśmy się tutaj bawić jakieś rzędy w gridzie i tak dalej, ale wydaje

4:14mi się że może jeszcze lepiej będzie po prostu zrobić coś takiego,

4:18że odseparujemy sobie te logikę związaną z gridem od

4:22naszego wrappera. Czyli nasz wrapper zostanie taki jaki jest. Zostawimy

4:27tylko te paddingi, a grid sobie wrócimy do innego

4:31diva i opleciemy nasze children właśnie

4:35w tym grid, bo tylko one tak naprawdę potrzebują tego grid'a, natomiast

4:40to co było wcześniej z styled grid wrapper zostawimy na styled wrapper.

4:45Okej, już mamy prawie gotowe. Jeszcze

4:49tylko jedna rzecz, odległość między tym header'em

4:54a naszymi notatkami musi być trochę większa i odległość

4:58pomiędzy paragrafem i heading'iem też powinna być nieco mniejsza. Możemy

5:02to zrobić w taki sposób, że dodamy tutaj sobie margin. Powiedzmy,

5:07że damy mu 25 pikseli i 50 pikseli

5:11z dołu, okej. Jeszcze tylko takie kosmetyczne zmiany w

5:17naszym inpucie placeholder search

5:22i dodatkowo custom'owa ostyluje sobie nasz heading

5:26paragraf, font-size

5:34tutaj będzie taki sam, tylko font-weight nam

5:38się zmieni, otworzymy sobie theme,

5:42żeby podejrzeć jak to było, a tutaj

5:46tylko deklarujemy blythe albo bold, okej i

5:55jeszcze heading, tam jest trochę większy, ale nasz heading przyjmował props'a

5:59bieg, więc teraz jeśli go użyjemy na naszym

6:03heading'u w ten sposób, a dodatkowo możemy użyć tutaj props'a

6:07as i powiedzieć że to będzie H1 semantycznie będzie to

6:11chyba bardziej poprawne z racji, że jest to taki główny nagłówek, który mówi co

6:16mamy tutaj wyświetlane, w ten sposób nasz

6:20user page template jest prawie że gotowy, oczywiście na razie statyczny,

6:24ale tym się zajmiemy w następnej lekcji.