React: Tworzenie panelu dodawania notatek

16.8.x

0:00Cześć, w poprzedniej lekcji zaczęliśmy sobie refactoring naszej aplikacji. Mam

0:04nadzieję, że tobie poszedł równie szybko jak mi, bo mi zajęło to z zegarkiem w ręku jakieś

0:083 minuty i to jest właśnie fajne w React'ie, że nawet jak wpadniemy na pomysł

0:12jakiegoś refaktoringu, to zazwyczaj zmiany wprowadzone do naszej aplikacji zajmują

0:18bardzo mało czasu. Właściwie naniesienie tych zmian, więc w każdym

0:22komponencie już teraz mamy page context, nie podajemy nigdzie

0:26tego props'a Page Type. Jedyny komponent, w którym, który

0:30mógł ci sprawić, jedyny komponent, który mógł ci sprawić

0:35problem to card js, bo tutaj była taka tricky rzecz, ponieważ mieliśmy

0:39tutaj już Connect, który podaję na mapDispatchToProps, ale musieliśmy jeszcze opleść nasz

0:43komponent w nasz Higher Order Component i okazuje

0:47się, że jest to bardzo proste, po prostu trzeba było ten with context wrzucić tutaj w ten

0:51nawias i opleść po prostu nasz card, wynika to z tego, że Connect podaje props'y

0:56do naszego komponentu, a nasz Higher Order Component to props'y przecież przekazu normalnie

1:01sposób tutaj z tej funkcji, te props'y idą tutaj, więc cokolwiek jako props

1:05zostanie podane do naszego komponentu, to mamy pewność, że to również zostanie przekazane

1:09ostatecznie i skoro to wszystko już mamy zrobione to

1:13teraz po usuwaniu notatek wypadałoby dodać w końcu mechanizm, który pozwoli

1:18nam nie dodawać i z racji, że mamy już tutaj ten context, który

1:22nam gwarantuje to, że możemy sobie czerpać z dowolnego miejsca w naszej aplikacji

1:26informacje o tym w którym miejscu się znajdujemy to moim zdaniem powinniśmy

1:30to zrobić w grid-template ponieważ jak sobie zerkniemy na nasze design'y

1:34to właśnie tutaj po prawej stronie mamy guzik, który nam odpala nasze dodawanie. On

1:39wygląda w ten sposób, nie zajmiemy się w tej lekcji stylowaniem, zrobimy coś bardzo podstawowego.

1:43Natomiast jeśli masz ochotę to ostylować to później zostawię to dla ciebie, a

1:47od następnej lekcji, to już będzie wyglądało dokładnie tak jak tutaj zaprojektowane,

1:52więc teraz przejdźmy sobie do naszej aplikacji i spróbujmy to stworzyć,

1:56żeby zaoszczędzić tam trochę czasu możemy sobie skorzystać

2:00z gotowego komponentu, który mamy już w atomach. Nazywa się button icon, więc

2:05teraz go sobie zaimportujemy i dodatkowo

2:18zaimportujemy sobie od razu ikonę plus, którą mamy w asset'ach. Podałem

2:22jeszcze złą ścieżkę, atoms, dobra

2:26i teraz to, co chcemy zrobić, to napisać

2:30style tego button icon, żeby on był okrągły i żeby miał taki kolor

2:34tła jaki chcemy, więc możemy sobie stworzyć styled button icon. Wrzucić

2:43tu nasz buttoniIcon i w nim stworzymy sobie background color,

2:48page context

2:54i theme jeszcze musimy

2:58wyciągnąć, żeby

3:03może trzymać się tej konwencji nazewniczej w naszych button'ach

3:07to tam było active color theme, okej. Zrobimy

3:21też żeby był w 100% okrągły i teraz

3:26spróbujmy go sobie zaimplementować. Aha, jeszcze jedno, on

3:31musi mieć position fixed, ponieważ musi być zawsze przez

3:35scroll'u nawet w tym samym miejscu i to będzie gdzieś od

3:40dołu 40, od prawej 40 pikseli. Dobra,

3:45spróbujemy go sobie tutaj wrzucić. Musimy jeszcze mu

3:49podać active color, żeby

3:54nasz button znajdował się w tym miejscu. Upewnij się, że nasz styled wrapper ma position

3:58relative, bo może u ciebie w kodzie tego jeszcze nie być i wtedy

4:02dopiero jeśli rodzic jest relatywny, to dziecko może się pozycjonować albo na

4:06fixed albo absolutnie, ale względem właśnie tego rodzica. Ja

4:12bym tutaj jeszcze trochę zmniejszył, bo background size. Zobaczymy

4:17do 40% jak to będzie wyglądać, może nawet 35,

4:22żeby ta ikona była nieco bardziej subtelna, okej i tym

4:26sposobem mamy nasz button gotowy. Teraz wystarczy, że stworzymy sobie z tego komponentu

4:30klasę i stworzymy logikę, która będzie pozwalać tam na pokazywanie albo ukrywanie

4:35naszego komponentu do dodawania nowych elementów

4:39w naszej aplikacji. Ten komponent

4:43możemy sobie stworzyć wydaje mi się, że w organizmach, bo to będzie taki właśnie standalone

4:47komponent. Nazwiemy go new item bar. W

4:52nim stworzymy

4:56sobie new item bar js i zaczniemy

5:01go pisać, okej. Widzimy,

5:30że nasz komponent pojawił się tutaj na stronie, więc teraz możemy sobie do niego wrócić, jeszcze

5:34go trochę ostylować. Pierwsze, co chcemy zrobić na pewno, to zmienić

5:39nieco wygląd naszego text area, ale może najpierw stwórzmy

5:43sobie jakiś wrapper, który nam to faktycznie ustawi po prawej stronie. Dobra,

5:56teraz sprawimy, żeby to było na flex'ie i zaimportujemy

6:05sobie with context z naszego Higher Order Component żeby

6:11nasz baton mógł wiedzieć gdzie się znajduje. Okej,

6:18teraz zajmiemy się tym text area i zamiast tworzyć nowy komponent

6:22text area, to zrobimy sobie coś takiego, że ostylujemy sobie po prostu nasz

6:27input i użyjemy props'a has żeby to się wyrenderowało

6:31jako text area. W ten sposób praktycznie

6:35nic tu nie musimy zmienić, może trochę zmienimy border radius na nieco mniejsze,

6:40bo na razie jest zbyt okrągłe i tu dodamy sobie jeszcze heading,

6:45okej. W

6:54ten sposób stworzyliśmy sobie nasz taki podstawowy komponent, który będzie się pokazywał, żebyśmy

6:59mogli dodawać nasze notatki. W następnej lekcji zajmiemy się

7:03renderowaniem warunkowym, wewnątrz niego oraz ukrywaniem i pokazywaniem go.