React: Komponent Input

16.8.x

0:00Cześć, skoro konfigurację i poznawanie storybook'a oraz styled-components mamy

0:04już za sobą to zaraz możemy przejść do kolejnego etapu naszego developmentu gdzie skupimy

0:08się właśnie bardziej na tworzeniu komponentów, które później będą

0:12nam potrzebne do stworzenia całego interfejsu naszej aplikacji i jak widzisz pewnie

0:16tutaj po lewej stronie przygotowałem już kilka komponentów gotowych takich jak

0:20na przykład heading czy paragraf, które są bardzo proste dlatego pominąłem

0:25ten etap. Jeśli masz ochotę możesz napisać je samodzielnie, natomiast my zajmiemy

0:29się bardziej zaawansowanymi rzeczami. Przygotowałem też input, którym za chwilkę się

0:33zajmiemy oraz stworzymy sobie button icon, czyli taki baton

0:37jak mamy w tym miejscu i on będzie również tym samym komponentem, który jest tutaj, jedynym

0:41props'em, który będziemy tutaj zmieniać będzie ten tutaj, te

0:45obramowanie, które będzie albo super okrągłe albo będzie takie tylko zaokrąglone,

0:50ale nadal będzie kwadratem, więc zanim to zrobimy jeszcze takie

0:54małe wyjaśnienie, ponieważ nie podawał nam theme provider

0:59tego, co potrzeba do naszego storybook'a, to znaczy wszystkie rzeczy, które w naszych

1:03komponentach odwoływały się jakoś do theme'u, w storybook'u były niezrozumiałe, więc

1:08trzeba było to naprawić, dlatego w naszej konfiguracji storybook'a musiałem

1:12dodać dekorator, który przyjmuje story jako argument funkcji,

1:16a następnie właśnie posiada tutaj nasz theme provider,

1:20który jest zaimportowany. On posiada tutaj props'a theme, którego

1:24również importuje. To jest ten sam theme, który podajemy w naszej aplikacji

1:28i to wszystko jest właśnie i to story, które tworzymy

1:32będzie oplecione właśnie tym themeprovider, więc to takie drobne usprawnienie,

1:36które po prostu pozwoliło na to, że możemy normalnie korzystać z theme

1:41providera również naszym storybook'u, a przecież jest to niezbędne, żeby tworzyć nasze

1:45komponenty, więc skoro to już sobie wyjaśniliśmy to teraz możemy przejść do tworzenia

1:50input'a i tutaj mamy taką jedną rzecz. W naszych

1:54design'ach widzimy, że mamy dwa rodzaje input'a, mamy taki zwykły login, na przykład, może

1:59być to cokolwiek tak naprawdę i mamy też taki mniejszy, który będzie po prostu

2:03search'em i teraz mamy tutaj przygotowany na razie tylko taki

2:07ten zwykły na przykład do logowania input. Natomiast nie mamy search'a, a chcielibyśmy

2:12żebyśmy mogli podać tutaj na przykład props'a search i jeśli będzie obecny to

2:16nasz input będzie się zmniejszał i pojawi się w nim ta właśnie lupkę, lupkę

2:20już tutaj wyeksportowałem, jest w plikach projektu, więc wystarczy

2:24ją zaimportować do naszego input'a. Jak sobie

2:28zerkniemy jeszcze na nasz storybook to zobaczymy, że ten pierwszy

2:33już jest gotowy, tak wygląda nasz input, on działa, przy

2:38okazji jeszcze pokażę ci co jeszcze przygotowałem. Tutaj mamy button'y, które już były

2:42pokazywane, mamy heading duży i mały

2:47i mam jeszcze paragraf, tak

2:52jak mówiłem to nie są żadne fascynujące komponenty dlatego pominąłem

2:56pokazywanie tego jak to się tworzy. Możesz podejrzeć, kod ma cztery linijki, także

3:00bez problemu na pewno wszystko ogarniesz, a teraz przejdźmy do development'u

3:05naszego input'a, więc to co możemy zrobić to wpisać

3:10tutaj funkcję strzałkową i powiedzieć słuchaj, jeśli search jest obecny

3:14to chcielibyśmy, żeby

3:20również został zwrócony taki CSS. Teraz CSS musimy sobie

3:24zaimportować tutaj ze styled-components i wpiszmy

3:33tutaj na przykład, że font-size będzie mniejszy. Jeśli tutaj jest

3:37eska, to my będziemy mieć x eskę. Na

3:44pewno zmniejszy się też padding, który

3:48będzie wynosił pewnie koło 10 i 20 pikseli, natomiast

3:52po lewej stronie chcielibyśmy, żeby on miał pewnie gdzieś ze 40,

3:57bo trzeba zostawić miejsce na lupkę i teraz z racji

4:01że input'y nie mogą posiadać atrybutu before, ponieważ nie posiadają

4:05żadnego contentu, dlatego musimy tutaj użyć background image i teraz

4:10zaimportujemy sobie naszą ikonę. Zwykłym importem, możemy to

4:14importować jak każdy inny komponent w taki sposób, na przykład magnifier icon

4:20from i tutaj podajemy ścieżkę assets

4:24magnifier kropka

4:29svg i teraz, żeby ta ikona się pojawiła w background image, musimy

4:33oczywiście zadeklarować background image. W tym

4:39miejscu utworzymy sobie funkcję strzałkową, która

4:43co prawda nie przyjmuję żadnego argumentu, ale za to zwraca właśnie nasze zaimportowane

4:47magnifier icon, jeszcze tylko ustawimy, że background size

4:52będzie wynosić pewnie koło 20 pikseli, background position ustawimy

4:58na 10 pikseli, 50%, to jest oś X,

5:02to jest oś Y i jeszcze możemy

5:06dodać że background repeat, Oczywiście

5:11moglibyśmy to napisać short hand'em. Natomiast ja zawsze lubię w taki sposób

5:15bardziej explicit pokazać jakie właściwości przypisujemy naszemu

5:19tłu, więc jest to po prostu moim zdaniem bardziej czytelny, ale jak

5:23kto woli. Teraz sprawdźmy czy to zadziałało, musimy

5:27dodać nowe story do naszego storybook'a, tutaj w tym miejscu. Zmienimy

5:41sobie placeholder na search i dodamy tutaj props'a

5:45search i teraz teoretycznie okej. Nie

5:52pojawiła nam się ikonka, zaraz zobaczymy dlaczego tak się stało. Jest

5:56dobry moment na to, żeby zobaczyć jak działa debugowanie, spróbujmy

6:04tutaj wpisać URL, dopiero

6:08to zamknąć w taki

6:18sposób, okej nasza ikonka się pojawiła po prostu zapomniałem

6:22tutaj dodać URL do background'u, a przecież on inaczej nie zorientuje

6:26się, że jest to po prostu ścieżka referencje do tej ikony, którą zaimportowaliśmy. Na

6:33pewno ta ikonka jest zbyt wielka, teraz jest lepiej i wydaje

6:39mi się, że mogłaby być troszkę dalej, teraz jeśli

6:46porównamy to z naszym designem to wygląda niemalże identycznie. Tutaj

6:51też taka drobna uwaga, chcemy się zbliżyć jak najbardziej do tych design'ów, natomiast nie

6:55będziemy tutaj stosować podejścia Pixel Perfect. Jeśli coś będzie delikatnie

6:59w bok, delikatnie inaczej to nie będziemy sobie z tego powodu mi wyrzutów sumienia. Chcemy

7:04te aplikacje przede wszystkim napisać szybko. Nie chcemy tutaj tracić czasu na tworzenie

7:09Pixel Perfect layout'ów, od tego są prawdziwe projekty, w prawdziwej pracy.

7:13My się po prostu uczymy React'a. Okej to na tyle w tej lekcji, a w następnej zajmiemy się

7:17tworzeniem właśnie tych button'ów, zanim przejdziemy do tworzenia bardziej skomplikowanych

7:22komponentów naszej aplikacji.