React: Ekstrakcja komponentu

0:00Cześć! Zanim zaczniemy wprowadzać jakieś nowe funkcje i

0:04możliwości do naszej aplikacji, to musimy zerknąć jeszcze na jedną rzecz. Nasz kod

0:08w niektórych miejscach wygląda po prostu tragicznie. Jednym najgorszych elementów

0:12tej aplikacji niewątpliwie jest form.js, gdzie mamy właściwie cztery

0:17takie same elementy pod rząd, gdzie zmieniają się tylko jakieś detale i spokojnie

0:21mógłby być to osobny jeden komponent, nazwany po prostu input

0:25i tak właśnie zrobimy. Wywalimy te cztery elementy te cztery div'y

0:29odpowiadające za nasze cztery inputy w tym miejscu i

0:33stworzymy z tego jeden komponent, który będzie przyjmował odpowiednie props'y.

0:37Więc otwórzmy sobie nasz Explorer i odpalmy folder

0:42Components. To w nim stworzymy zaraz nowy folder

0:46o nazwie input, a w nim input.js Od

0:51razu, przy okazji, stworzymy input.module.scss. Teraz

0:58wyjmiemy sobie naszego div'a z tego miejsca. On

1:03się kończy tutaj. W kleimy

1:09go do naszego input'a. Wyeksportujemy.

1:17Oczywiście musimy zaimportować Reacta i Style. Okej i

1:22teraz spójrzmy jakie elementy naszego komponentu muszą być

1:26dynamiczne. Przede wszystkim dynamiczny musi być ten tag, ponieważ czasami to

1:30będzie input, a czasami to będzie textarea, ale w przeciwieństwie do tego jak zrobiliśmy

1:35to w poprzedniej lekcji, gdzie tworzyliśmy nowego consta. Tutaj możemy po prostu zrobić props'a,

1:39który jeśli się pojawi to input będzie textarea, a jeśli

1:43się nie pojawi to będzie to po prostu input. Jak tam możemy zrobić? Otóż

1:48już tłumaczę. Przede wszystkim zdestrukturyzujmy sobie nasze props'y. Pierwszym

1:53z nich będzie tag. Drugim będzie name. Później

1:57id. możemy też dodać maxLength i teraz jak

2:01zobaczymy, to w sumie ta nazwa powtarza się w trzech miejscach, więc

2:06możemy po prostu zrobić jako name i będziemy

2:10wiedzieć, że użyjemy ją w trzech różnych tagach. Ten placeholder

2:14usunąć. On nie będzie nam jednak potrzebny i możemy

2:18dodać jeszcze label. Zobaczymy

2:23czy to nam wystarczy. Teraz musimy pobrać PropTypes i

2:27stworzymy sobie propTypes

2:34dla naszego komponentu. Tagiem zajmiemy się za chwilę. PropTypes.String.isRequired.

2:45Podobnie będzie w przypadku label

2:50i maxLenght. To

2:54będzie nie string, tylko number. Okej i

3:00teraz naszym tagiem będzie również string, ale

3:04on nie będzie wymagany, ponieważ tutaj zrobimy sobie defaultProps. Tag i

3:11jeśli nie będzie podanego tag'a w props'ach,

3:16to chcemy, żeby to było input. Dodatkowo

3:22w tym miejscu, ponieważ jeśli zmieniamy

3:26nazwę komponentu na nie generyczną nieHTML'ową, to musi

3:30być ona napisana wielką literą, a props'a podanego jaką małą

3:34literę, ale możemy zrobić coś takiego i w tym

3:39momencie nasz props powinien zadziałać. Zresztą

3:44zaraz to przetestujemy. Okej, pierwszy props podmieniony, teraz

3:48czas na następne. Type text i to się raczej nie zmieni. W

3:52tym miejscu dajemy name. Podobnie jak tutaj i

3:56tutaj. Zwróć

4:01uwagę, bo wcześniej o tym nie mówiłem, że w label, w JSX'ie

4:05musimy użyć takiego props'a - htmlFor. Wynika

4:09to z tego, że for w javascripcie jest słowem zastrzeżonym dla pętli,

4:13dlatego JSX musiał użyć jakiejś innej nazwy i tutaj stąd

4:18ten htmlFor. Dzięki temu możemy używać właśnie tego label'a. Jeśli

4:23użyliśmy zwykłego for'a to React od razu zasypał

4:28by nad błędami w konsoli i w tym miejscu Jeszcze podmienimy

4:33na label. Okej,

4:39czas przetestować nasz komponent. Wrócimy sobie do naszego form'a. A jeszcze

4:43jedna rzecz. Musimy skopiować wszystkie style dotyczące

4:48tego input'a. Więc skopiujemy

4:52sobie to. Powinno wystarczyć. Input,

4:57teraz możemy usunąć wszystkie te okropne div'y i zastąpić

5:05je naszym input'em. Jak

5:09widzisz zaimportował się tutaj bezpośrednio. Visual Studio Code zrobił to za nas

5:13i teraz pamiętając o props'ach, które musimy podać. Pierwsze

5:18z nich to jest tag, ale jest tam domyślny i akurat tam będzie input'em, więc nie musimy

5:22go podawać. Drugi to jest name i podamy mu po prostu

5:27name. Później

5:32mamy label i mieliśmy tam jeszcze maxLength. Właściwie maxLenght też

5:41możemy zamienić. Nadać

5:51na przykład długości 50 albo 40 znaków,

5:55chociaż nie, zróbmy inaczej. Ponieważ mogą być też linki i

5:59opisy, więc niech to będzie 200 znaków. Tylko

6:03w miejscach gdzie będziemy celowo chcieli żeby było krótsze to nadamy wtedy inną

6:07wartość i od razu widzę, że nie zmieniliśmy jeszcze tego props'a - maxLength,

6:12Okej, teraz powinno wszystko działać. Wracamy

6:18do formy. Pamiętaj, że

6:22tutaj props maxLength musi być liczbą, więc musimy to podać w ten

6:26sposób. Okej,

6:30a teraz dodajemy pozostałe elementy i zobaczmy, czy wszystko jest

6:34jak trzeba. Tutaj mieliśmy link. Nazwijmy

6:39to Twitter link, żeby było bardziej jasno. Tu mamy image i zarówno

6:44w Twitter link jak i w image usuniemy nasze maxLenght. Czwarte

6:50było description i tutaj

6:56chcemy użyć props'a tag, w którym nazwiemy

7:01to textarea i zobaczymy czy to się zmieni. Tak,

7:05jak widzimy nasz

7:09komponent stał się tekxarea, więc ten dynamiczny props, który

7:14stworzyliśmy w tym miejscu jak najbardziej działa.

7:18Widzę jednak, że chyba trochę za bardzo się pospieszyłem usunięciem

7:22tego placeholdera, bo jednak wtedy ta animacja nie działa. Wynika

7:27to z tego, że to jest taki a'la Material Design Input, ale

7:31z czystym CSS'ie i stąd ten mały hack, żeby to była tu po prostu spacja,

7:35wtedy ten placeholder Idealnie działa, a w naszym kodzie właściwie

7:39nic to nie zmienia. Właściwie w działaniu input'a. A skoro wygląda

7:43lepiej, to czemu nie. Jeszcze dwie drobne rzeczy na koniec. Kopiując

7:47nasze style do input'a ukradłem też button, który teraz wygląda tragicznie, więc

7:52wrócimy go z powrotem w tym miejscu. Okej, a drugą

7:57rzeczą jest to, że przez ten dynamiczne tag, teraz nasz

8:01textarea nie łapie odpowiedniej klasy, ponieważ dostaje klasa input, a

8:06powinien dostawać klasę textarea i po raz kolejny

8:10możemy zaradzić temu po prostu stosując ternary operator, czyli

8:15tym miejscu robimy tag. Jeśli

8:20textarea, to styles.textarea,

8:25a jeśli nie to input. Jeśli to jest niejasne, to

8:29po prostu sprawdzamy czy tag, props tag, który podaliśmy wyżej

8:34u rodzica jest identyczny ze string'iem textarea,a

8:38nie może być inny, jeśli chcemy żeby to było akurat textarea i wtedy jeśli

8:42to spełnia ten warunek to nadaje mam klasę textarea, a jeśli nie spełnia

8:46tego warunku, czyli jest inne niż textarea to wtedy dostaje klasę input, a

8:51każdy inny przypadek input'a w tym form'ie jest właśnie

8:55niczym innym jakim inputem. Dlatego to zawsze będzie działać. Jeszcze jedna

8:59taka mała kwestia do wyjaśnienia, bo to może być dość magiczne. Jeszcze wcześniej

9:03tego nie tłumaczyłem. Przy destrukturyzacji możemy używać specjalnych znaków,

9:07które coś tam sugerują, na przykład jeśli chcemy, żeby nazwa

9:11props'a wewnątrz komponentu była użyta w inny sposób, czyli

9:15na przykład była pisana wielką literą, mimo że jest podawana jako mała litera,

9:19to wtedy możemy użyć dwukropka. Po prostu zmieniamy nazwę tego props'a.

9:24On mógłby się tutaj nazywać na przykład kangur i to też by działało. A czemu

9:28kangur? Nie wiem i wydaje mi się, że w tej lekcji to na tyle. Zauważ tylko

9:32jak bardzo usprawniliśmy nasz komponent, jak bardzo upiększyliśmy

9:37nasz kod, tak naprawdę redukując kilkadziesiąt linijek do kilkunastu, a

9:42jedyne co zrobiliśmy to przenieśliśmy zawartość jednego div'a do osobnego

9:46komponentu i trochę go pozmienialiśmy, żeby był bardziej dynamiczny, żeby nieco

9:50sprytnie i przyjmował props'y i to wszystko i na tym właśnie polega piękno i

9:54jak to, że możemy takie stosunkowo skomplikowane rzeczy robić w bardzo krótkim

9:59czasie i w tak naprawdę bardzo prosty sposób. Przed nami jeszcze druga

10:03część tej lekcji, ponieważ nie chcę tutaj przedłużać, a widzę jeszcze co najmniej dwa

10:07komponenty, które można taki sam sposób wyekstraktować do

10:12osobnego komponentu. Zanim przejdziesz do następnej lekcji, spróbuj w głowie odpowiedzieć,

10:16które to mogą być komponenty. Do zobaczenia w następnej lekcji.