React: Przygotowanie szablonu dla notatek cz.2

16.8.x

0:00Cześć, w tej lekcji przygotujemy sobie resztę naszego widoku user

0:04page template tak, żeby stał się dynamiczny, żeby mógł odpowiadać na to w jakim

0:08template'cie obecnie się znajduje, czy to będzie notatka czy artykuł czy

0:13twitter, więc pierwsze co możemy zrobić moim zdaniem to tutaj podmienić

0:17sobie ten nodes, ponieważ czasami to będzie twitter, czasami to będzie articles i na

0:21szczęście podajemy sobie tutaj page type, który co prawda jest w liczbie pojedynczej, ale

0:26to nie jest jakiś wielki problem, bo możemy po prostu zrobić tutaj Page Type

0:30i dodać to s na końcu. Nie jest to może najpiękniejsze rozwiązanie,

0:34ale na pewno jest po prostu banalne. Jedyne

0:39co się zmieniło to to, że teraz mamy tutaj nodes małą literą, ale to też nie jest

0:43jakiś wielki problem, bo możemy tutaj wykorzystać pseudo

0:47element first letter, który pozwoli nam

0:51na text-transform i stworzenie

0:56wielkiej litery i teraz jak widzisz pierwszą

1:01literę mam wielką resztę mamy małe, notes natomiast było zawsze

1:05z małej tutaj, więc wszystko się zgadza, a teraz jak wyjdziemy sobie na twitter to mamy twitters

1:09i articles, więc pod tym względem mamy to już zrobione. Możemy

1:14sobie nawet wejść teraz do kolejnych kart

1:18i zobaczyć czy to faktycznie będzie działać zasymulujemy

1:24sobie już taki widok naszej aplikacji, zauważ, że wykorzystywanie

1:29komponentów właśnie takich przygotowanych wcześniej z odpowiednimi props'ami sprawia,

1:35że ten development w dalszym etapie tworzenia aplikacji bardzo

1:40mocno przyspiesza, to jest po prostu jak układanie klocków lego już później,

1:44jeszcze trochę co prawda nas czeka po stronie logicznej tej

1:48pracy, natomiast sporą część pracy już mamy wykonaną, okej

1:58i zauważ, że jednym szybkim ruchem udało nam się stworzyć takie

2:03widoki, więc jest to naprawdę fajne. Teraz możemy sobie przyjść

2:07do tego żeby nasze karty stały się dynamiczne, póki co one są

2:12bardzo statyczne, nie przyjmują żadnych props'ów jeśli chodzi o content, jeśli chodzi

2:16o zawartość. Natomiast trzeba to dość szybko naprawić, więc teraz molecules card

2:20odpalimy sobie i zobaczymy co my tutaj mamy i co możemy zmienić.

2:24Przede wszystkim musi mieć title, musi

2:28mieć props'a created albo create date

2:32coś takiego, dodatkowo

2:36może przyjmować props'a twitter name article

2:42URL i pewnie content, więc

2:46teraz za nim sobie podany tutaj te props'y to wypiszmy je

2:50po prostu w prop types i zastanówmy się jakie będą miały typy. Pierwsze to

2:54oczywiście title, tutaj raczej nie będzie

2:58żadnego problemu, to będzie po prostu wymagany string. Później wpiszemy

3:05sobie jeszcze props'a created, który również będzie stringiem i również

3:10będzie wymagany. Później możemy dodać jeszcze Twitter

3:15account albo Twitter name po

3:19prostu, będzie łatwiej, to również będzie string, ale

3:23nie będzie wymagany. Jako default

3:29możemy sobie tutaj wpisać po prostu null article url

3:35to również będzie string, również będzie niewymagany i

3:39podobnie jak twitter name będzie null'em

3:43i został nam jeszcze content. Content

3:53oczywiście będzie wymagany, bez contentu

3:57się nie obejdzie. Teraz możemy sobie podmienić te

4:01props'y tutaj w tym miejscu. Okej

4:08mamy tytuł, twitter name, article url

4:13i content. Teraz jeszcze żeby one

4:17działały oczywiście musimy je sobie zdestrukturyzować, jeśli

4:29czasami widzisz, że ESlint podkreśla ci jakieś wartości

4:33i wyrzuca jakimś błędem to zazwyczaj nie ma sensu się tym przejmować,

4:37ponieważ on po prostu czasami lubi się zawiesić po jakiejś chwili te

4:41błędy powinny zniknąć. O, tak jak teraz. Okej, skoro z tej

4:45strony już mamy wszystko zrobione to ja teraz przygotowałem tutaj w naszych

4:50widokach takie obiekty z przykładowymi danymi, które możemy sobie

4:54teraz propagować i wrzucić w odpowiednie karty.

4:59Możemy to zrobić w taki sposób, że po prostu zmapujemy sobie to i

5:03w

5:08każdym miejscu wyplujemy właśnie kartę, która będzie zawierać

5:13odpowiednie props'y. W tym przypadku będzie to card type, który

5:18wpisujemy ręcznie, a resztę podajemy tak jak

5:22mamy tutaj w naszych obiektach nie

5:27zapominaj o tym, że zawsze musimy dodać jeszcze key, który jest unikalny

5:31dla każdego itemu i tutaj możemy dać akurat tytuły bo one

5:35są unikalne. Później w prawdziwym development'cie

5:39będziemy mieć podawane id, które po prostu będziemy tutaj wrzucać. Zapomniałem

5:44zamknąć naszą kartę. Okej, teraz podobną

5:48rzecz zrobimy w każdym innym widoku, w notes. Tutaj

5:53się pozbędziemy tylko article url bo tego nie ma i w twitters również

5:58to podmienimy i tu akurat wrzucimy twitter name i

6:08to co jest ważne o czym zapomniałem przy tworzeniu tutaj tych dynamicznych rzeczy

6:12to, że tutaj podajemy tylko na końcu twitter name, ale

6:17tak naprawdę musimy mieć ten avatars io gotowy,

6:21czyli musimy podać cały link i tylko

6:26końcówkę z naszą

6:31zmienną okej i

6:35w ten sposób powinno się to wyświetlać prawidłowo. Dobrze

6:40przetestujmy to od razu tą naszą aplikację. Oczywiście

6:46zaszczytne grono miło się znajdować przy takich

6:50ludziach, tutaj widzę, że wszystko się wyświetla okej. Widzimy,

6:55że nawet dłuższe nazwy wchodzą bez problemu wygląda to w porządku.

6:59Okej, więc widoki

7:03stały się dynamiczne nasze szablony dostosowują się

7:08do tego co wyświetlają, jaki typ danych, więc do

7:12zobaczenia w następnej lekcji gdzie przejdziemy do bardziej zaawansowanych rzeczy.