React: Styled components – konfiguracja

16.8.x

0:00Cześć, w tej lekcji zainstalujemy sobie style component's w naszym projekcie i sprawdzimy,

0:05czy to wszystko będzie działać, z racji, że używamy create react app, to nie mamy aż takich

0:09możliwości konfiguracji wszystkich paczek, które instalujemy. Nie mamy dostępu do

0:13webpack'a, ani innych takich rzeczy, moglibyśmy eject'ować nasz create-react-app,

0:18o czym w tym kursie nie opowiem, ponieważ jest to rzecz, którą robi się niezwykle

0:22rzadko i zazwyczaj większość konfiguracji można zrobić jednak z nie eject'owanym

0:27create-react-app, o eject'cie możesz poczytać oczywiście nieco więcej w dokumentacji

0:31create-react-app do czego cię zachęcam, zawsze warto wiedzieć więcej. Natomiast

0:35teraz po prostu zainstalujemy sobie nasze styled-components. Skopiujemy, więc sobie

0:40ten fragment, który mamy tutaj w tym miejscu, wkleimy

0:45go do naszego terminala i po zainstalowaniu naszego

0:49style-component możemy użyć go w naszym widoku, na

0:53przykład w app js, spróbujmy czy on w ogóle zadziała, pierwsze co musimy zrobić to zaimportować ze

0:58style components i

1:02teraz spróbujmy sobie stworzyć jakieś pierwszy bardzo

1:06prosty ten components. Nazwijmy go na przykład button, mybutton. Okej

1:16już widzimy jeden problem, nasz Visual Studio Code nie podświetla nam

1:21składni stale components, więc musimy teraz wejść sobie do naszego

1:25extensions, do naszych zakładek i znaleźć paczkę, która się nazywa VS

1:31Code style componentes. Gdzieś tu powinna być. Jest

1:36tutaj, instalujemy te paczkę i teraz jak wrócimy

1:40do naszego komponentu, to nasze style już są normalnie podświetlane. Tutaj

1:45ESlint nam się czepia, że jest to nie w prawidłowym

1:49miejscu. Najpierw powinny być o importy absolutne,

1:53a dopiero później importy relatywne, czyli takie gdzie podajemy dokładną ściężkę, teraz

1:58spróbujmy wykorzystać ten button w naszym komponencie, na

2:04przykład w tym miejscu. Jedyne, co musimy zrobić to

2:16wykorzystać, wykorzystać go tak jak zwykły komponent, spróbujmy teraz

2:20odpalić nasz projekt, jeśli wszystko poszło dobrze to nasz baton powinien się pojawić w

2:25naszym widoku i tak też właśnie się stało, nasz

2:29baton jest i działa. Nic nie robi, co

2:33prawda, ale działa zauważyłem jednak jedną niepokojącą rzecz, a mianowicie, że

2:37kiedy pisze kod to nie jest podpowiadane mi syntax

2:41CSS'a powinno tak być, więc wróćmy jeszcze na chwilę do naszych

2:45extensions i jak się przyjrzymy to widzimy, że mamy tutaj 2 takie

2:49same plugin'y, a przynajmniej tak samo się nazywają, więc można wpaść w

2:53niezłą pułapkę tutaj autorem jest make flow, natomiast oficjalny plugin do style components

2:59stworzył Julien Poissonnier, prawdopodobnie

3:03to czyta jest jakaś po francusku, ale nie mam pojęcia jak to zrobić, nie mniej widać po

3:07liczbie pobrań, że ten drugi jest dużo bardziej popularnym, a właściwie

3:12ten pierwszy, czyli ten. Także odinstalujmy teraz ten który zainstalowaliśmy

3:16przed chwilą, trochę

3:22celowo ci to pokazuje, żeby pokazać że ten marketplace na jest

3:26VSCode'ie potrafi być zwodniczy i czasami potrafi wpuścić nas w maliny i trzeba

3:30po prostu uważać, co się instaluje, czasami warto zajrzeć sobie do

3:34repozytorium, na przykład takiej paczki i zobaczyć kto jest autorem. Z czym jest

3:38powiązany i tak dalej, teraz jak wrócimy sobie do naszych style components i wpiszę

3:42margin, to mamy teraz elegancko wszystkie wartości

3:46CSS'a więc od teraz pisanie stylów w naszym js'ie

3:50będzie banalne, do zobaczenia w następnej lekcji.