React: Pierwszy komponent klasowy

0:00Cześć! W poprzedniej pokazałem Ci, jak stworzyć taki podstawowy komponent klasowy w

0:04React'cie. Jednak, póki co nie ma on żadnego sensu, ponieważ extendujemy React.Component,

0:08udostępniający nam kilka bardzo fajnych funkcji, ale tej

0:12chwili nie wykorzystujemy, więc czas zacząć. Powiem tylko na wstępie,

0:17że React.Component udostępnia dwie takie podstawowe możliwości. Pierwsza

0:21to jest właśnie stan, czyli tak zwany state. Druga to jest lifecycle functions,

0:25o których opowiem w dalszej części tego kursu. W tej chwili skupmy się jednak

0:30na state'cie, czyli na stanie. Pierwsze co musimy zrobić, żeby zainicjować taki

0:34stan, to po prostu, stworzyć obiekt state w naszym komponencie. Wpiszemy mu

0:39tutaj tekst. A tutaj

0:45mały błąd. To jest obiekt, nie musi być dwukropek, a następnie chcielibyśmy

0:50go wykorzystać tutaj, w tym miejscu i żeby do niego dostać, musimy tak

0:54jak w przypadku każdej klasy w JavaScripcie, odnieść się do niego jako do this, czyli

0:59robimy this.state.text i w

1:03tym momencie nasz state jest wyświetlany już w naszym widoku. Oczywiście,

1:08nikt tą funkcją by się specjalnie nie ekscytował, gdyby służyła ona tylko do wpisywania

1:12i wyświetlania statycznych wartości w naszej aplikacji. State to jest

1:16bardzo potężne narzędzie, które pozwala nam na dynamiczną zmianę zawartości naszych

1:21komponentów i właśnie o to w nim chodzi. Więc teraz dodamy sobie input w tym miejscu i

1:25wpadniemy

1:32na mały błąd, ponieważ właśnie zdaliśmy sobie sprawę z tego, że wszystkie

1:36elementy w React'cie, w naszych komponentach, jeśli je zwracamy

1:40w ten sposób, w JSX'sie. Muszą być oplecione w jakiś pojedynczy element i mówi

1:44nam o tym sam React. Dokładnie mówiąc, w której linijce mamy błąd i z czego on

1:49wynika. Podpowiada nam nawet, co mamy zrobić, czyli użyć tak zwanego

1:53fragmentu. Pokażę ci teraz, jak to rozwiązać. Wcześniej używało

1:57się div'a, którym oplatało się nasze elementy

2:01i było to strasznie

2:05nie fajne rozwiązanie, ponieważ wtedy ten div faktycznie pojawiał się w

2:09naszym ostatecznym HTML'u, a być może my chcieliśmy, po prostu,

2:13dodać jakieś dwa elementy, które będą luzem wrzucone do naszej aplikacji i nie będę miał żadnego div'a,

2:18który będzie je oplatał. I tutaj z pomocą przyszły właśnie tak zwane fragmenty,

2:22które wyglądały początkowo w ten sposób i symulowały one

2:28w JSX'ie oplatanie naszych elementów, w jakiś pojedynczy, większy

2:32element. Natomiast w samym HTML'u nic się nie zmieniało.

2:36Jak widzimy, ten oplatający div zniknął. I to są

2:40elementy wrzucone luzem. Biorąc jednak pod uwagę, że ta notacja nie była najpiękniejsza na

2:45świecie, to stwierdzono, że jeszcze trochę się to uprości i teraz wygląda to

2:49w sposób. Jak widzimy, nasz aplikacja działa. Mamy tutaj

2:53fragment skróconej wersji i będziemy go wykorzystywać bardzo często w

2:57tym kursie. Dlatego chciałem to teraz szybko wyjaśnić - skąd to się wzięło i jak to działa.

3:01Nie ma tutaj żadnej dodatkowej magii i po prostu jest to coś, czego wymaga JSX. Jest

3:06to naprawdę bardzo fajne ułatwienie. Pamiętam sam, kiedy tworzono jeszcze aplikacje z wykorzystaniem

3:11tych div'ów w tym miejscu i to było okropne. Więc bardzo się cieszę, że w końcu to rozwiązano. Ale

3:16koniec tej dygresji, wracamy do naszego state'u i jak możemy go zmienić. Przede

3:20wszystkim, zaplanujemy co chcemy tutaj zrobić. Chcemy, aby nasz input wpływał

3:25na nasz state, który następnie będzie wyświetlany w tym miejscu, a dodatkowo

3:30zawartość naszego state'a, będzie także zawartością naszego

3:34input'a. Będzie jego value i w ten sposób stworzymy

3:39tak zwany, controlled input, czyli input kontrolowany, w którym posiadamy

3:43tylko jedno źródło prawdy. Tak zwane Single Source of Truth i pierwsze,

3:47co musimy zrobić, żeby do tego dojść. Żeby w ogóle to stworzyć, to musimy

3:52zrobić funkcję, która będzie obsługiwać nasz event, wywoływany

3:56podczas zmiany zachodzącej w naszym input'cie, czyli w momencie kiedy

4:00coś będziemy wpisywać do naszego input'a, to będzie wywoływana jakaś funkcja i

4:04żeby wywołać jakąś funkcję podczas zmiany, tworzymy EventListener

4:10o nazwie onChange, w którym podajemy nazwę funkcji. Nasza

4:14funkcja będzie się nazywać handleChange I w

4:20tym momencie to będzie bardzo prosta funkcja, która loguje nam prostu Change. I uwaga, tutaj

4:26podajemy tylko nazwę funkcji, a nie podajemy jej z nawiasami. Nawiasy

4:30zawsze sugerują, że ta funkcja w danym momencie w danej linijce kodu

4:35ma się wykonać. A my nie chcemy, żeby  się wykonała na naszej linijce, tylko

4:39żeby się wykonała w momencie wystrzelenia tego eventu. Więc teraz, kiedy

4:44odpalimy sobie konsole i zaczniemy coś wpisywać w naszym input'cie, to zobaczymy,

4:48że ta nie będzie zlogowane. Wyświetla nam się change, który mamy tutaj w console log'u. Więc

4:52wszystko działa, tak jak należy. Jesteśmy na dobrej drodze do tego, żeby

4:56zacząć zmieniać nasz state za pomocą tego input'a, ale o tym dowiesz

5:01się już następnej lekcji, ponieważ będziemy wykorzystywać specjalną metodę udostępnioną

5:06nam przez React'a.