React: Refactoring formularza

0:00Cześć! W poprzedniej lekcji udało nam się stworzyć w końcu formularz, który

0:04dodaje nowe elementy, a dodatkowo ładnie się animują -

0:08jak je dodajemy to wjeżdżają ładnie w ekran, więc wszystko jest super. Niestety

0:12sam formularz nadal wymaga trochę pracy, ponieważ pierwszą taką

0:16jego główną wadą jest to, że możemy dodawać elementy, które kompletnie nic nie mają. Więc

0:20są puste i bezużyteczne. Chcemy temu zapobiec i żeby to zrobić

0:24najłatwiej, po prostu, dodać taką prostą walidację. Bardziej

0:30skomplikowaną walidacją zajmiemy w dalszej tego kursu. Natomiast teraz to

0:34zupełności wystarczy, czyli do wszystkich elementów dodamy tag -

0:38required, dzięki temu już nie możemy dodawać nowych

0:43elementów, bez pisania wymaganych pól. Jedynym elementem, którego

0:47nie chciałbym wymagać od użytkownika jest image, ponieważ może ktoś nie chce dodawać

0:51obrazka do każdego elementu i w takim wypadku fajnie jest zrobić coś, co

0:55będzie takim default'owym wyglądem. Jeśli nie będzie żadnego obrazka - w takim

1:01wypadku musimy usunąć z naszego image - required

1:05i dzięki temu możemy dodawać imię,

1:09link bez obrazka, jakiś

1:13tytuł i zobaczymy, że mamy bardzo brzydki

1:17element naszego HTML'a wynikający z tego, że wyświetla nam

1:21się alt, ale nie mam żadnego obrazka. W takiej sytuacji musimy

1:26pójść do naszego ListItem i naszych propTypes usunąć

1:30isRequired, ponieważ ten element nie jest dalej wymagany i musimy nadać

1:34mu jakąś domyślną wartość. W tym wypadku będzie to null, ponieważ

1:39jeśli damy tutaj null'a, to również jest dla nas bardzo cenna informacja i zaraz

1:43pokażę ci dlaczego. Zmieńmy tutaj nasz implicit return

1:48udziałem naszej funkcji na tak zwany explicit return, czyli

1:53słowo return pojawi się tutaj, w tej funkcji. Nadal będzie miało

1:57okrągłe nawiasy. Robię to

2:05w ten sposób, ponieważ w tym miejscu musimy dodać pewien warunek - musi on się znajdować

2:09wewnętrz naszej funkcji, ponieważ tylko wtedy ma dostęp do props'ów,

2:13które zostały podane do tej funkcji, więc tutaj robimy const ImageTag. Jeśli

2:21image jest podany, to będzie to IMG, jeśli nie, to

2:25będzie to div i zobacz w jak prosty sposób możemy wpływać

2:29na to, jaki tag ma nasz element w JSX'ie. Voilà, i

2:36w tym momencie, może sobie to sformatujemy. To

2:42wrzucimy na nowe linie, żeby lepiej wyglądało

2:47i w tym momencie, jeśli podamy

2:51image w tym miejscu, to zostanie on oczywiście wyświetlany jako zwykły IMG -

2:55tak jak nasz Dan Abramov, w tym i w tym miejscu. Natomiast, jeśli tego image nie

2:59będzie, to będziemy mieli div'a. Div'a, który póki co, nie

3:04wygląda. Zresztą zobaczmy sami.

3:08Damy tutaj Roman, image nie dajemy. Okej,

3:12jego nie ma, znaczy jest, ale nie widzimy go i w

3:17takim wypadku musimy wejść do naszego ListItem i stworzymy

3:23sobie klasę, która będzie odpowiadać za to jak

3:27wygląda nasz div, kiedy nie ma image. Robimy

3:33imageNone. Jedyne, co chcemy dodać,

3:37to background: lightgrey.  Extent

3:44to jest metoda właśnie Ssasa, czy też CSS'a,

3:49pozwalająca na rozszerzanie innej klasy, więc tutaj mówimy,

3:53że ta klasa ma mieć dokładnie takie same parametry jak klasa

3:57image, jednak z dodanym pewnym parametrem, jakim

4:02jest background i nie zapominając tym że className w tym

4:06miejscu, jest czystym JavaScript'em, to tutaj również możemy użyć ternary operator,

4:10czyli tego co mamy tutaj. Jeśli image

4:14nie ma, to będzie miało inną klasę, styles.imageNone I

4:21w tym momencie, kiedy dodamy

4:27jakiś element, bez

4:33żadnego obrazka to wyświetli

4:37nam się kółko, tak jak zadeklarowaliśmy w naszej klasie. Jest

4:41to zdecydowanie lepsze, niż po prostu brak czegokolwiek. A jeśli

4:46chcielibyśmy jeszcze trochę podnieść walory estetyczne naszej aplikacji, to oczywiście możemy to

4:50zrobić w naszym pliku ze stylami. Możemy

4:54zastąpić zwykły szary kolor, jakimś ładnym tłem. W tym wypadku

4:59możemy użyć na przykład https://unsplush.it, podajemy

5:05tutaj wymiary obrazka. Mówimy, że ma się nie powtarzać,

5:10to dam jeszcze background-size: cover i w

5:16tym momencie, jeśli dodam jakiś nowy element, to

5:21pojawi się ładny obrazek. Jest jeszcze jedna

5:25rzecz, która mnie denerwuje w tym formie, a mianowicie autoComplete.

5:29Myślę, że jest tutaj zupełnie zbędny i możemy go pozbyć i żeby to zrobić,

5:34najłatwiej jeśli wejdziemy do form.js  i przy tag'u

5:40form dodamy autoComplete pisane Camel Case'm,

5:44w przeciwieństwie do zapisu z HTML'a i

5:50teraz, o, już tego nie mamy. Pamiętaj,

5:54że jest to rozwiązanie, które jest sprawdzane na Chromie. Natomiast w innych przeglądarkach

5:58czasami trzeba jeszcze dodać input dodatkowy, który jest ukryty. Niemniej

6:03ma właśnie ten tag, autoComplete również w sobie, ale z

6:07racji, że my korzystamy wyłącznie Chrome'a w kursie, to póki co się tym nie przejmujemy. I

6:11w tej lekcji to na tyle. W następnej lekcji zajmiemy się wyjęciem

6:16pewnych elementów powtarzalnych naszych komponentach do osobnych komponentów,

6:20żeby stały się one bardziej reużywalne, żeby nasz kod stał się jeszcze bardziej czytelny

6:24i dzięki temu będziemy gotowi na dalszą podróż dalsze rozbudowywanie

6:28naszej aplikacji, ponieważ mam jeszcze kilka ciekawych funkcji, które chciałbym tu z tobą

6:32zaimplementować. Także do zobaczenia w następnej lekcji.