React: Globalne zmienne

16.8.x

0:00Cześć, w tej lekcji przygotujemy sobie globalne

0:04zmienne, z których będziemy mogli później korzystać we wszystkich naszych komponentach

0:08będzie nam to bardzo przydatne, ponieważ mamy na przykład style zdefiniowane w

0:12naszych designach, które fajnie, żeby było prostu były gdzieś zapisane, żebyśmy nie musieli

0:17ciągle przeklejać tych kodów hsl do naszych styled-components,

0:21więc teraz wywalimy sobie ten obiekt, który stworzyliśmy tutaj

0:25wcześniej na razie to też wywalimy i nie

0:29bez powodu wcześniej w tym kursie pojawił się folder theme tutaj w tym miejscu, ponieważ

0:34to on właśnie będzie przechowywał tak zwany main theme js

0:38i to w nim stworzymy sobie teraz obiekt, który

0:44następnie będziemy eksportować i pierwsze co musimy zrobić

0:48to przepisać wszystkie kolory, które mamy w naszych design'ach, teraz

0:53podzielimy sobie tak ekran i tutaj mamy wszystkie

0:57nasze kolory. Nazewnictwem już się zająłem

1:01tutaj w tych, w tym miejscu i tak właśnie będą się nazywać, więc teraz lecimy

1:05po kolei, primary. Pamiętaj, że te

1:10kody hsl muszą być w formacie stringów, okej

1:18kolory przepisane. Tutaj widzę, że mamy jeszcze jeden problem z naszym

1:22ESlintem, wywalimy sobie te zasadę, żeby preferował

1:26Export Default, ponieważ w przypadku tego

1:31typu rzeczy moim zdaniem lepiej je stosować właśnie

1:35named exporty. Dodatkowo zerknijmy sobie

1:39jeszcze na nasze style globalne i zobaczmy, że importujemy tutaj 300 i 600 jeśli

1:43chodzi o grubości font'ów, więc teraz możemy zrobić coś takiego, że zamiast

1:48zapamiętywać liczby wpiszemy sobie prostu light i bold, mimo

1:54że jest to semibold, ale w naszym projekcie nic to nie zmienia. Dla

1:58nas tak naprawdę jest bold, ponieważ jest po prostu grubszy od tego. Okej

2:03i z tak przygotowanym theme'em możemy go teraz zaimportować w naszym

2:07komponencie root'owym, właściwie w widoku root'owym. Pamiętaj,

2:12że jest to named export, więc musimy użyć klamer i teraz

2:16ten main theme możemy tutaj zapisać naszym theme providerze, Adobe XD

2:23możemy sobie już zamknąć i teraz jak przyjdziemy sobie do naszego

2:27button'a to możemy tutaj w końcu zrobić to, co chcieliśmy zrobić na samym początku,

2:31czyli zdestrukturyzować theme i podać

2:38tutaj theme primary, dodatkowo

2:43to możemy wywalić, bo to był tylko test i

2:51nasz button działa, jeśli podamy mu tutaj secondary,

2:56to będzie niebieski i tertiary zielony,

3:03więc nasze globalne zmienne działają. Możemy

3:08z nich korzystać. Oczywiście tę logikę związaną z tym, że one

3:12będą się zmieniać w trakcie zmiany theme'u kiedy będziemy przechodzić na różne rodzaje notatek

3:16to wdrożymy sobie później, tym się na razie nie martwimy. Możliwe też,

3:20że gdzieś tam po drodze jeszcze będziemy dodawać do naszego theme'u jakieś nowe

3:25rzeczy, więc na to też będziemy gotowi. Tego typu obiekty,

3:29które gdzieś tam podajemy w naszej aplikacji często ulegają zmianom i jakimś ulepszaniem

3:34w przyszłości także w tej chwili to wszystko i do zobaczenia

3:38w następnej lekcji.