React: Wstęp do styled components

16.8.x

0:00Cześć, w tej lekcji przechodzimy już do tej bardziej wizualnej części

0:04naszej aplikacji, mianowicie zajmiemy się tym, żeby w łatwy

0:08sposób móc tworzyć komponenty, które później będziemy sklejać w całość, pokażę

0:12ci w tym kursie takie jedno z ciekawszych podejść do projektowania aplikacji, które

0:17nazywa się Atomic Design, które polega właśnie na tym, że wybieramy

0:21sobie takie najmniejsze elementy aplikacji, które możemy znaleźć jak na przykład pole input'u

0:26albo baton a następnie na bazie tych malutkich komponentów

0:30tworzymy nieco większe i większe i większe, a dopiero później te większe

0:35konstrukcje sklejemy w całość w tak zwane template'y ale o tym dopiero

0:39później ci opowiem. Na razie chcę ci powiedzieć jakie narzędzie umożliwi nam

0:43to, żeby w ogóle do tego dojść i jakiś czas temu w ekosystemie React'owym pojawiło

0:47się fascynujące narzędzie, które odzwierciedla tak zwane podejście css-in-js

0:51i to narzędzie nazywa się style components, pozwala nam na napisanie

0:56stylów w naszych plikach JS i uwierz mi to początku

1:00tylko brzmi jak bardzo zły żart, jak zobaczysz jak to działa w praktyce to

1:04jestem pewien, że się w tym zakochasz. Teraz pokażę ci czym jest style components

1:08i właściwie po co nam one są potrzebne. Jest to biblioteka,

1:13którą możemy zainstalować w naszym projekcie, która umożliwia nam nie więcej,

1:17nie mniej jak pisanie naszych stylów właśnie w JavaScripcie i jak

1:21widzisz używanie JavaScriptu wewnątrz stylów to jest naprawdę fascynujące, pokażę

1:25ci krok po kroku jak tego używać i co dzięki temu możemy zrobić, a

1:29czego nigdy nie moglibyśmy osiągnąć w zwykłym CSS'ie, a nawet w Sass'ie, style components,

1:34podobnie jak css-modules, o którym mówiłem w poprzednim kursie pomaga

1:38nam w kilku rzeczach. Na przykład w tym żebyśmy nie mieli konfliktów między nazwami klas, więc

1:43tym się nie musimy martwić, style components automatycznie dodaje takie id do

1:47każdej klasy i zapobiega dzięki temu mieszaniu się tych klas i nadpisywaniu

1:51się jednej przez drugą, także może mieć na przykład w każdym komponencie

1:55klasę wrapper, a właściwie to tej klasy nawet nie będzie ponieważ, my

1:59nie nazywamy klas i to też jest taka rewolucja w styl components. My nazywamy całe komponenty, w

2:03style component's wszystko jest komponentem i to również brzmi jak z żart

2:07tylko na początku, uwierz mi dodatkowo. Dodatkowo style components są dużo łatwiejsze

2:12w utrzymaniu, automatycznie dodają wszystkie prefiksy, które są potrzebne, pozwalają

2:17właśnie na dynamiczne stylowanie dzięki temu, że mamy wewnątrz CSS JavaScript

2:21i wiele, wiele innych rzeczy, o których możesz poczytać właśnie w tej dokumentacji i

2:25zanim przejdziemy dalej i pokażę ci tak krok po kroku w detalach jak

2:29to tak naprawdę działa to pokażę ci tutaj na szybko, ponieważ mamy takie snippet'y kodu, które

2:34możemy sobie edytować jak wygląda taki style components, na przykład w tym

2:38miejscu, mamy właśnie taki typowy style component, składa się on z tego, że

2:42deklarujemy const'a, którego nazywamy jako komponent, tu jest ważne to,

2:46żeby component był wielką literą napisany, ponieważ tego wymaga React, następnie

2:50wykorzystujemy obiekt style, który importujemy do naszego pliku i on

2:54ma metoda odpowiadającą każdemu elementowi html'a, więc tutaj wpisujemy jego

2:58nazwę to może być section, to może być button, to może być H1,

3:02to może być p, cokolwiek. Zróbmy sobie na przykład button i następnie,

3:08to jest bardzo ważne, po tym button'ie czy po jakimkolwiek innym elemencie, który tutaj deklarujemy,

3:12otwieramy backtick'i, ponieważ ten style component's wykorzystują tak zwane

3:16tag template literal, o których możesz poczytać sobie więcej na npm'ie i

3:24taki zupełnie w podstawowej wersji, to co piszemy tutaj wewnątrz

3:28tego string'a to po prostu nasze CSS'y i dzięki temu,

3:32że edytory wspierają syntax style, component's, one

3:36są normalnie podświetlane również jak CSS i wszystko wygląda dokładnie tak samo, więc wpisze

3:41się to naprawdę wygodnie, teraz spróbujmy coś zmienić, spróbujmy na przykład zmienić

3:45padding tego button'a na 2m i widzisz, że od razu zmiany się tutaj zapisały

3:50i widzimy efekty tego co wpisałem tutaj, w naszym edytorze, powiedzmy

3:55że na przykład chciałbym dodać border, który ma 3 piksele. Jest

4:01niebieski i tutaj mamy taki uproszczony syntax komponentu

4:05React'owego, mamy po prostu funkcję render, która nam zwraca tego JSX'a, oczywiście

4:10w React'cie wygląda to nieco inaczej, tutaj twórcy pewnie stworzyli to na potrzeby

4:15właśnie tego przykładu, żeby to było uproszczone, natomiast nasz wrapper jest

4:19właśnie tutaj w tym miejscu, więc używamy go dokładnie tak samo, jak

4:23na przykład component'u ,który moglibyśmy zaimportować do naszego pliku z innym

4:27komponentem albo z jakimś widokiem. W tym przypadku akurat zadeklarowaliśmy ten

4:31komponent w tym miejscu. Niemniej ten wrapper, w momencie kiedy użyliśmy

4:36tego tutaj styled stał się pełnoprawnym komponentem React'owym.

4:40Co to znaczy? To znaczy, że na przykład możemy podawać mu props'a i dzięki tym propsom,

4:45które podajemy możemy później zmieniać nasz CSS, ale to pokażę ci już następnych

4:49lekcjach.