React: Widok szczegółów notatki cz.3

16.8.x

0:00Cześć, w poprzedniej lekcji przygotowaliśmy sobie klasy card, która będzie nam potrzebna

0:04do tego żebyśmy mogli przekierowywać użytkownika po tym jak kliknie sobie

0:08w ten styled wrapper do konkretnego widoku z notatką

0:12o konkretnym id, ale najpierw zobaczymy o co tutaj chodzi z tym. Wykorzystaliśmy

0:17tutaj notację class properties, która na razie jest tylko w babelu i ESlint

0:21nie ogarnia co my tutaj wpisaliśmy, więc musimy sobie doinstalować

0:26do naszego ESlint'a taką paczkę, która się nazywa ESlint babel albo

0:31babel-eslint, zaraz zobaczę, babel-eslint

0:36i po tym jak nam się to zainstaluje, otworzymy

0:40sobie nasze eslintrc i żeby

0:44on zaczął ogarniać o co nam tutaj chodzi, musimy podać mu parser, który

0:49właśnie będzie się nazywał babel-eslint. Poczekam, aż się zainstaluję

0:53ta paczka i ten błąd powinien zniknąć. Dobra, wracamy

0:57do naszego komponentu, czekamy chwilę ESlint zacznie działać

1:01na nowo, okej błąd zESlint'a zniknął, tylko

1:05ja tutaj zrobiłem jeszcze błąd, dałem dwukropek zamiast znaku równa się, więc

1:11teraz wszystko powinno być okej. To sobie zamkniemy

1:15i teraz stwórzmy sobie funkcję, która pozwoli

1:19nam na obsługiwanie tego kliknięcia tutaj. Będzie

1:24to bardzo prosta funkcja i teraz w naszym render

1:28możemy ustalić coś takiego is this state redirect,

1:33wtedy podajemy

1:38tutaj props'a redirect i mówimy mu dokąd

1:42ma iść, a

1:49w każdym innym przypadku będziemy zwracać

1:55to. Teraz tutaj on click podamy

2:00właśnie nazwę tej funkcji i tutaj

2:04jako ten link możemy stworzyć taki zlepek. Będzie

2:09to template string i tutaj mamy card type slash, id

2:15to powinno działać. Przejdźmy sobie do naszej aplikacji. Okej,

2:23nie dałem tutaj const'a. No tak,

2:27bo consta tutaj nie powinienem dawać, okej. Tutaj w tym miejscu

2:31nie dałem this, teraz wszystko

2:36gra. Jak sobie kliknę na kartę to

2:40przechodzę do notatki o konkretnym id i tutaj

2:44uwaga, te widoki nie są responsywne, więc jeśli pracujesz na mniejszym monitorze

2:49i twoje karty wyglądają tak, to pamiętaj, że możesz sobie dostosować ten wygląd

2:53w grid-template. Ja jeszcze na szybko, żeby odkurzyć trochę naszą konsole

2:57naprawie te błędy związane z prop types'ami. Widzę że array nam umknęło,

3:02okej widzimy jeszcze, że user page template dostaje

3:06złego props'a, ponieważ on tutaj może mieć albo element, ale

3:10może mieć też node, więc dlatego daliśmy tutaj one of type i jedna

3:14z dwóch niech sobie wybiera i teraz będzie git. Okej,

3:19a teraz sprawmy, żeby nasz sidebar był tego

3:23samego koloru, co jego jakby właściwy widok, jeśli

3:27jest na twitter'ach wchodzimy w twittera, no to niech będzie niebieski. W ten

3:31sposób zawsze będziemy wiedzieć gdzie jesteśmy naszej aplikacji, tak to sobie mądrze wymyśliłem,

3:35więc teraz wejdziemy sobie details template, a właściwie do

3:41details page i teraz mam taki plan żeby właśnie stworzyć

3:45tylko jedną stronę, która będzie odpowiednio miała doasowaną

3:49logikę, żeby nie tworzyć osobnych stron dla Twitter'ów, notatek i artykułów

3:53tylko, żeby była jedna, ona będzie miała renderowanie warunkowe i będzie wiedziała czym

3:58ona jest, żeby to zrobić musimy tutaj stworzyć klasę i teraz

4:08żeby ten komponent wiedział czym jest musimy sobie stworzyć state

4:12o nazwie Page Type i początkowo

4:19niech to będzie notes i teraz pora na krótkie wytłumaczenie czym sa React Lifecycle Methods,

4:25ponieważ nigdy jeszcze tego nie używaliśmy i są to takie metody, które

4:29zawiera wyłącznie klasy w React'cie. Pozwalają one na zaczepienie

4:34się w pewnym momencie w czasie na jakimś etapie, w którym

4:38żyje sobie klasa, w którym żyje sobie komponent i jedną na przykład takich

4:42metod jest component DidMount, która wywołuje się zaraz po tym jak nasz

4:46komponent zostanie zamontowany, inna to na przykład component did update,

4:50która polega na tym, że jak sama nazwa wskazuje, jeśli

4:54coś się znajduje w naszym komponencie, na przykład wywołamy set state albo

4:58dostanie jakiś nowy props, wtedy możemy też sobie zaczepić o to i

5:02komponentów will unmount stosujemy właściwie tylko wtedy kiedy

5:06mamy na przykład jakiś event listener podpięty do naszego komponentu

5:11i chcemy go odmontować żeby zapobiec tak zwanym memory leaks,

5:15więc to stosuje się dość rzadko niemniej warto o tym pamiętać,

5:19te dwie i tak sobie na razie pominiemy potrzebujemy tylko tej. Chodzi

5:24o to, że w momencie kiedy jest zamontuje się nasz komponent kiedy on się włączy

5:28to musimy sprawdzić Hej słuchaj jaki ty jesteś Page

5:32Type, Sprawdź sobie ten props match i dopasuj swój page type

5:37do tego gdzie obecnie się znajdujesz, więc teraz wywołamy

5:43sobie tę metodę componentdidmount i w niej stworzymy sobie switch statement,

5:47który będzie przyjmował this props much

5:52path i będziemy to porównywać do poszczególnych

5:56route'ów, na przykład routes twitter,

6:01mamy jeszcze notes i articles,

6:06o każdym z nich na końcu będzie break na pewno. Musimy

6:12wywołać metodę set state page type i teraz

6:17w zależności od tego co tutaj

6:21się porówna, co będzie prawdziwe to będziemy ustawiać, czyli twitters,

6:25nodes i articles. Okej i

6:30teraz tutaj sobie wylogowałem this state Page Type, więc zależnie

6:35od tego co się tutaj wydarzy to to powinno się wyświetlić na stronie. Zobaczmy

6:39notatki, mamy notes, na twitterach

6:44mamy twitters, na artykułach mamy nodes. Dlaczego,

6:48okej literówka, za

6:53to kochamy JavaScript, że na mnie mówi o takich rzeczach. Mamy articles, twitters i notes,

6:58więc teraz na tej podstawie możemy przekazywać do details

7:02template odpowiedniego props'a będzie

7:09to Page Type i jak już pamiętasz user page

7:13template przyjmuje Page Type i podaje go do sidebar'a, więc teraz wystarczy,

7:17że w naszym details

7:21template podamy Page Type w taki

7:25sposób i następnie w naszym

7:29details page w tym miejscu podamy też page type

7:34this props page type i teraz

7:38jeśli wszystko dobrze zrobiłem to kolory powinny się zmieniać,

7:45ale nadal tego nie robią, więc jeszcze krótkie rzucenie

7:49okiem nasz js no i oczywiście

7:54this state page type a nie this props. Teraz

7:59już musi działać, super,

8:05więc nasz sidebar zachowuje się poprawnie, pozostało

8:10teraz ostylować właśnie wykorzystując to renderowanie warunkowe, zwłaszcza

8:14ten state tutaj, który sobie ustawił, ustawiliśmy. Jak będzie wyglądała

8:19poszczególna notatka. Przypominam,

8:23że mamy notatki zwykłe mamy

8:28twitter'y i mamy jeszcze artykuły. Wszystkie

8:33z tych rzeczy znajdziesz w design'ach załączonych do tego kursu, więc

8:37teraz możesz sobie odpalić własne Adobe XD albo po prostu statyczne

8:42pliki i podejrzeć jak to wszystko działa i ostylować to wszystko samodzielnie,

8:46a my widzimy się w kolejnej części kursu gdzie będziemy zajmować się redux'em.

8:51Oczywiście pamiętaj, że jeśli utkniesz na jakimkolwiek momencie ze

8:55stylowaniem tych komponentów tego widoku to zawsze możesz zobaczyć po prostu kod``

8:59następnej lekcji i tamto wszystko będzie czekać gotowe rozwiązane,

9:04także zapraszam, jeśli masz jakieś wątpliwości, jeśli nie wiesz jak coś zrobić. Natomiast zachęcam

9:09do tego, żeby zrobić to samodzielnie, ponieważ właśnie tego typu praca tego typu

9:13jakby pchanie się trochę na głęboką wodę to jest najlepsza opcja, żeby nauczyć

9:17się React'a dlatego zostawiłem kilka takich miejsc w tym kursie, które

9:21właśnie pozwalają ci na dość sporo samodzielność.