React: Theme Provider

16.8.x

0:00Cześć, skoro już wiesz czym jest Atomic Design to teraz czas żeby trochę

0:04uporządkować nasz projekt i przygotować się do tego żebyśmy mogli pracować z tą metodyką

0:08właśnie w naszym projekcie, więc pierwsze co zrobimy to stworzymy

0:12sobie kilka folderów, które będą nam sygnalizować

0:16do jakiej grupy należą nasze komponenty, czyli atoms, molecules, organisms,

0:25templates zrobimy poza folderem

0:29components i w naszym pages będzie właśnie folder

0:33views, więc skoro to już mam przygotowane to teraz

0:37możemy na przykład przenieść button do odpowiedniego folderu i pewnie

0:42jak się domyślasz, button jest atomem, teraz możemy go spokojnie tutaj

0:46przenieść i przy okazji możemy zapdejtować importy

0:50w tym miejscu, żeby nasz projekt się nie zaczął wywalać, okej i

0:56skoro nasz projekt jest przygotowany do pracy z Atomic Design'em to teraz pora

1:00żebyśmy jeszcze powiedzieli sobie o dwóch takich bardzo istotnych elementach styled-components,

1:06które będą niezbędne do dalszego development'u. Już są one nieco

1:10bardziej zaawansowane dlaczego dlatego nie mówiłem o nich na samym początku. Powiem

1:14op niech teraz i ustalimy sobie to raz a dobrze i po prostu przejdziemy już

1:18do pracy na naszych komponentach. Pierwsza rzecz o której chcę ci powiedzieć to tym theme

1:23provider. Jeśli oglądałeś lub oglądałaś mój poprzedni kurs

1:27to wiesz, że React zawiera coś takiego jak context api

1:31i i jest to taki, swego rodzaju teleport, który pozwala nam na przenoszenie

1:36danych czy też funkcji czegokolwiek czego tak naprawdę chcemy w różne

1:40miejsca naszej aplikacji, z innego miejsca i tym właśnie jest

1:44theme provider dla naszego styled-component'cie, jest takim

1:48teleportem, który pozwala nam na przenoszenie danych dotyczących wyglądu

1:52naszych elementów do różnych miejsc i żebyśmy mogli mieć

1:56dostęp do tych danych z każdego komponentu, w którym będziemy

2:00tworzyć nasze style. To może brzmi skomplikowanie na początku,

2:04natomiast zaraz zobaczysz, że w praktyce jest to naprawdę banalne. Spróbujmy

2:09teraz stworzyć sobie nasz theme provider, który pozwoli nam na teleportowanie

2:13naszych stylów do każdego miejsca w naszej aplikacji. Pierwsze

2:18co musimy zrobić to oczywiście zaimportować theme

2:23provider ze styled-components. Kolejna

2:30rzecz, która bardzo nam się przyda to oczywiście sam theme, czyli ten wygląd,

2:34który będziemy przekazywać. Na razie stworzymy sobie w

2:39tym miejscu i będzie naprawdę bardzo prosty. Powiemy,

2:43że będzie tam jeden kolor, który będzie

2:47czarny i teraz

2:54jedyne co musimy zrobić to opleść nasze

2:59elementy, nasz theme provider, podając

3:03mu theme w ten sposób i tutaj

3:11jest tylko jedno zastrzeżenie, theme provider musi oplatać jeden

3:15element, więc możemy się tu posłużyć fragmentem, który nie zostanie

3:19wyrenderowany, ale pozwoli nam na użycie właśnie theme providera i teraz

3:24globalstyle możemy sobie spokojnie poza naszym theme provider'em wrzucić, ponieważ

3:28on nic tutaj tak naprawdę nie zmienia i też samym globalstyle nie

3:32pobieramy w żaden sposób tych rzeczy, które będziemy theme wykorzystywać,

3:36więc tutaj theme podaje wszystkie props'y,

3:41które mu podajemy tutaj z tego obiektu, w dół do wszystkich komponentów. Jak

3:45to działa? Odpalmy sobie teraz button i powiedzmy,

3:50że na razie sobie wyrzucimy tę linijkę i wpiszemy

3:57background color, otworzymy

4:07sobie funkcję strzałkową i teraz jeśli pamiętasz context api mógł być przekazywany

4:11po prostu jako props, więc w tym miejscu możemy zrobić coś takiego, że

4:15wyciągniemy sobie props'y, z props'ów wyciągniemy

4:19sobie theme i z tego theme wyciągniemy sobie primary,

4:23bo tak się nazywa nasz kolor, jak

4:27sobie to zapiszemy i odpalimy naszą apkę to zobaczysz,

4:31że button przybrał kolor czarny, czyli ten kolor

4:36tutaj stąd tak naprawdę znajduje się w tym miejscu. Został

4:41podany w obiekcie jako theme przez nasz thmeme provider,

4:46theme provider użył swojego magicznego teleportu do

4:50tego, aby button dostał właśnie ten kolor w props'ach. Props'y

4:54zawierają ten obiekt theme, a theme zawiera primary. Tak to działa, taka jest

4:58droga tego wszystkiego. Możemy sobie oczywiście zdestrukturyzować theme, w ten

5:02sposób i to również będzie działać, więc w ten

5:07sposób używając theme provider'a możemy robić przede wszystkim dwie

5:11rzeczy. Z jednej strony wpływać na to jak jest na przykład obowiązujący

5:15kolor w aplikacji, a przyda nam się to bardzo, ponieważ przy wyborze

5:19różnych notatek, na przykład przy wyborze notatek zwykłych mamy żółty,

5:23przy wyborze twitter'ów mamy niebieski, a przy wyborze artykułów mamy zielony

5:27kolor, więc to będziemy właśnie zmieniać naszym theme'em, a dodatkowo

5:32możemy jeszcze używać takich globalnych zmiennych, które możemy importować

5:36sobie później naszych komponentach i z nich korzystać, czyli na przykład właśnie z rozmiarów

5:40fontów albo z grubości fontów żebyśmy nie musieli pamiętać co to jest 600,

5:45to możemy to wpisać inaczej, jako na przykład font regular albo light.

5:49Tak, więc generalnie theme provider przyda nam się naprawdę

5:53wielu rzeczy i właśnie w następnej lekcji stworzymy sobie takie globalne zmienne dzięki

5:58którym będziemy mogli używać niektórych właściwości, nie zapamiętując

6:02ich i nie używając ich po prostu gdzieś tam wyciągając je z pamięci tylko posługując

6:07się prostymi fajnymi zmiennymi w taki sposób. Do zobaczenia

6:11w następnej lekcji.