React: Stworzenie rodzica ze stanem aplikacji

0:00Skoro takie wprowadzenie do klasowych komponentów mamy już za sobą, to możemy z

0:04pewnością przejść do dalszej części naszej aplikacji, gdzie po prostu stworzymy

0:08sobie nasz pierwszy taki prawdziwy, klasowy komponent ze state'em.

0:12Jeśli spojrzymy na nasz design, to mamy tutaj

0:16takie dwa duże komponenty. Jeden to jest ListWrapper, który już posiadamy, a drugi

0:20to jest form, który właśnie stworzymy, w tej części kursu. Natomiast musimy się jeszcze zastanowić

0:25i odpowiedzieć sobie na pytanie, który z naszych komponentów będzie trzymał stan? Który

0:29będzie zawierał wszystkie elementy naszej listy? Jeśli spojrzymy sobie na ten layout,

0:34to zobaczymy, że mamy tutaj dwa te komponenty jako dzieci i mamy

0:38też rodzica, który zawiera oba te komponenty i to on właśnie będzie

0:42trzymał nasz state. Ponieważ z jednej strony będzie otrzymywał od

0:46naszego form'a informacje o nowym elemencie, a z drugiej strony będzie

0:51podawał ten nowy element do naszego ListWrapper, który po prostu renderuje

0:55te wszystkie elementy. Celowo, w tym kursie nie wprowadzam żadnego State Management, na

0:59zasadzie MobX albo Redux'a, ponieważ chcę pokazać, że

1:03w takiej podstawowej formie React sam w sobie, zawiera bardzo dużo

1:07ciekawych narzędzi, które pozwalają na zarządzanie stanem w naszej aplikacji. Bez

1:12dodatkowego komplikowania naszego kodu. Wiele kursów zawiera

1:16od razu wprowadzenie do Redux'a, co moim zdaniem jest błędem, ponieważ niepotrzebnie

1:21komplikuje początkowy etap nauki, co w efekcie owocuje

1:25tym, że ludzie często przekomplikowują swoje projekty, przekomplikowują swoje

1:29aplikacje, nie chcą wykorzystywać całego potencjału React'a

1:33i niepotrzebnie dokładając kolejne biblioteki, do swoich projektów. Uważam,

1:38że jest solidne nauczenie się podstaw danego framework'a pozwala na lepsze

1:42jego wykorzystanie, mądrzejszego wykorzystania i w efekcie na budowanie

1:46szybszych i wydajniejszych aplikacji. Przejdźmy zatem do kodu. W tej

1:50chwili możemy już się pożegnać naszym przykładowym MyComponent. Nie będziemy już go wykorzystywać

1:54w naszej aplikacji. Możemy go po prostu usunąć. Jeśli spojrzymy

2:00sobie na nasze App.js, to zobaczymy, że przypomina ono strukturę

2:04naszego layoutu, czyli jest rodzicem dwóch komponentów, w tym ListWrapper,

2:09który już się w nim znajduje. Więc jedyne, co musimy zrobić, usunąć

2:13tutaj MyComponent i stworzyć

2:18nowy komponent, który będzie odpowiadał za formularz, ale zanim

2:22to zrobimy, tak jak mówiłem - najpierw przekształcimy ten komponent w klasę ze state'em. Więc

2:27musimy tutaj zmienić na class extends, React Component. Tak

2:43jak mówiłem poprzednich lekcjach tworzymy funkcję render, która zwraca nasz JSX. Dodatkowo

2:50tworzymy state, który będzie zawierał elementy

2:56naszej listy. I co, będzie to

3:00pusta tablica, ale za chwilkę się to zmieni. Tutaj musimy

3:04jeszcze podać propsa items, this.state.items.

3:11I to właśnie będą te elementy

3:15renderowane w naszej liście. Póki co, jest to puste

3:19i jeszcze tego nie zmieniamy, ponieważ chcemy jeszcze stworzyć tak zwany inny initial state,

3:24czyli inicjalną wartość naszego stanu. Tak, żeby te wartości,

3:28te elementy nam nie zniknęły, ponieważ chcemy je zachować. To są bardzo cenne zasoby,

3:33bardzo cenne i ciekawe konta. Więc wejdźmy sobie teraz do folderu data i naszą pustą

3:37tablicę w state'cie podmienimy na tę oto tablice

3:42z naszymi elementami. I tutaj

3:46mamy jeszcze jeden błąd, ponieważ wszystkie nasze obrazki są zapisane

3:50na dysku i są importowane w tym miejscu. Natomiast

3:55już pora, żeby przejść na zwykłe linki - linki do obrazków, ponieważ nasz

4:00formularz również będzie wspierał właśnie taką formę dodawania obrazka, tylko

4:05w postaci linka, więc w tej chwili usuńmy sobie folder data. Już nie

4:09będzie nam potrzebny i żeby zaoszczędzić nam czasu, żeby już nie dodawać

4:13każdego osobnego avatara - po prostu dodajmy

4:18jakikolwiek obrazek, na przykład, obraz Malewicza. Zamiast

4:24naszych image. Oczywiście,

4:29póki co, nie widzimy żadnych zmian, bo jeszcze renderowane są stare elementy. Ale

4:34teraz jeśli przejdziemy sobie do ListWrapper.  Usuniemy

4:42to. Podamy props'a

4:47i zmapujemy props.items. W

4:54ten sposób, to nasze

4:59elementy z powrotem się pojawią i zamiast avatarów, mamy kwadrat Malewicza.

5:04Wszystko gra i tym prostym sposobem, stworzyliśmy właśnie komponent, który

5:08ma własny state i podaje dalej jego dzieci. A co więcej, umożliwiliśmy tym

5:12sposobem, dodawanie nowych elementów w bardzo prosty sposób. Zaraz

5:16zobaczysz, jak to będzie wyglądać, ale jeszcze zrobimy jedną rzecz. Wszystko

5:21to wchodzimy do osobnego consta, ponieważ wygląda to okropnie. Jeśli tak

5:25dużo zajmuje miejsca w naszej klasie. Nazwiemy to initialStateArray i

5:36w tym miejscu, za pomocą spread operator - dodamy

5:44te elementy. Używamy spread operator, tak jak już mówiłem w poprzednich lekcjach

5:48tego kursu. Po to, żeby nie wsadzać tablicy w tablice, tylko żeby zawartość

5:52tej tablicy została umieszczona, po prostu, w tej tablicy tutaj, bez

5:56zbędnego zagnieżdżenia. Okej, skoro mamy nasz klasowy komponent - zostaje

6:00tam, to możemy teraz przejść do tworzenia formularza, ale tym zajmiemy się w następnej

6:05lekcji.