Nowoczesny React: Używanie klasy, style i moduły CSS

0:00Wiemy już, że styl naszej aplikacji zawdzięczamy Bulmie i zaimportowaliśmy

0:04sobie ją tutaj jako Bulma CSS.

0:07Możemy zaimportować sobie dowolny plik CSS.

0:10Tak było z CSS.

0:12To co było w App JSX tutaj w JS był zaimportowany właśnie

0:16app, CSS i index CSS.

0:18Mogą być to w takim wypadku też pliki lokalne.

0:22Ponieważ nie korzystamy z żadnego z tych plików, możemy je po prostu usunąć.

0:26I teraz przejdźmy sobie do rozważań, jak działają style właśnie w takiej aplikacji,

0:32którą budujemy sobie z banderami.

0:34Chociażby możemy tutaj zauważyć H Trójkę jako list of people.

0:39I spróbujmy zrobić sobie jeszcze raz taki właśnie heading poziomu trzeciego, tylko

0:44tutaj już w komponencie header, czyli zamiast P użyję sobie tutaj H3.

0:49Zmieniam.

0:49Zobacz ten cały subtitle z background white.

0:53Załóżmy, że mamy taki cel, że to background white chcemy sobie przenieść

0:57właśnie tutaj z tego stylowania do background white, który będzie

1:02użyte właśnie poprzez CSS.

1:04Czyli zabieram sobie ten background white stąd.

1:07No i myślę sobie naiwnie, że jeżeli utworzę sobie przy komponencie plik

1:12stylesheet i nazwę go tak samo, czyli header, no to tutaj będę mógł

1:17sobie zrobić coś takiego jak H3.

1:19I chciałbym określić, że tylko header właśnie w tej trójce będzie miał coś

1:25takiego jak background color white.

1:27Oczywiście ta zmiana jeszcze nic nam nie zmienia, dlatego, że to że mamy header JSx

1:31i header CSS nie oznacza, że ten header CSS jest w ogóle wykorzystywany.

1:36Pamiętaj o tym, że należy go zaimportować.

1:39Czyli wszystkie elementy, które nie są importowane przez nas

1:42to po prostu zombiaki.

1:44Nie ma ich w kodzie, nie ma ich poprzez import.

1:47Bundler nie wie, że powinien je zebrać.

1:50No i widzimy charakterystyczną sprawę.

1:52To znaczy ten styl, który mamy tutaj, wylewa nam się i tak naprawdę jest

1:57zastosowany zarówno do tej trójki tutaj, jak i tutaj.

2:01W tym miejscu List of people.

2:03Mamy właśnie tego typu sytuacje, w których ten sam styl jest stosowany na całej

2:09stronie, czyli nie jest to hermetycznie zamknięte.

2:12Samo nazwanie tego header CSS, tak samo jak komponent nic nam nie daje.

2:17W takim układzie importujemy sobie coś, ale ten styl, który

2:21tutaj chcemy zastosować.

2:22On stosowany jest we wszystkich trójkach.

2:25Moglibyśmy sobie to jakoś rozgraniczyć i wpisać sobie tutaj na przykład BGWhite i

2:31to BGWhite zastosować tylko tutaj, w tym miejscu.

2:34No ale nie zmienia to faktu, że gdybyśmy mieli inaczej nazwane klasy CSS, one

2:39byłyby podobnie nazwane i stosowalibyśmy je w jeszcze innych plikach CSS, to po

2:44prostu dopisywalibyśmy tak naprawdę do nich.

2:48Czyli kaskadowali te style, które już są zdefiniowane.

2:51Zamiast tego chcielibyśmy hermetycznie zamknąć ten styl, żeby był on dostępny

2:56tylko i wyłącznie dla tego właśnie headera tutaj.

3:00Czyli ten header będzie miał własne definicje styli i to subtitle

3:04powinno mieć BG White.

3:06Okazuje się, że Wit obsługuje konwencję, która nazywa się CSS modules,

3:11czyli tutaj CSS modules.

3:13Jeśli wpiszemy sobie w wyszukiwarkę i tutaj guide na PC, zobaczymy, że jeżeli

3:18nazwiemy coś jako moduł CSS, to wtedy możemy sobie zaimportować

3:24klasy właśnie z takiego modułu i użyć je w taki bardzo przystępny sposób.

3:29Czyli te klasy będą w ten sposób zastosowane do obiektów JavaScriptowych,

3:34tak jak tu widzisz wyclassName.

3:36My oczywiście mamy React, ale mamy className y, więc te className, które będą

3:40tutaj dorzucane jako właśnie klasa, którą możemy sobie zastosować w zupełności

3:46wystarcza w takim układzie.

3:48Spróbujmy sobie zdefiniować ten moduł.

3:50Będzie się to sprowadzało do zmiany tego naszego header CSS, czyli Shift F6 tutaj

3:55albo po prostu klikając prawym refactor rename i dodamy sobie

4:00tutaj właśnie moduł CSS.

4:03W tym układzie import powinien nam się poprawić, Natomiast jeszcze nie jest to do

4:08końca poprawnie, dlatego, że jeśli chcemy sobie to zaimportować i użyć BGWhite teraz

4:14nam zniknęło, musimy sobie to zaimportować właśnie jako Classics.

4:18No i tutaj From Modul.

4:20Co zrobić, żeby złożyć sobie całe zestawienie tych klas?

4:25Zauważ, że to jest po prostu wartość typu string, więc jeśli zrobimy sobie

4:29konkatenację właśnie w taki sposób, że tutaj przestawimy to i będziemy w jakiś

4:35sposób składać sobie ten nasz classes BGwhite, czyli po prostu

4:40dodamy sobie ten string.

4:42Zwróć uwagę, że tutaj musimy mieć spację, musimy mieć odstęp, bo

4:45to będzie kolejna klasa.

4:46Zobaczysz jak to dokładnie działa.

4:49Jeżeli klikniemy teraz na Zbadaj.

4:50My tak naprawdę nie dostajemy klasy BGWhite, tylko BGWhite z

4:54różnymi tutaj szlaczkami.

4:56W ten sposób właśnie działa definiowanie czegoś w module CSS.

5:01Nie będzie to tak naprawdę ta nazwa BGWhite, co sprawia, że jeżeli

5:05gdziekolwiek użyjesz BGWhite to to po prostu nie zadziała.

5:09Czyli gdybyśmy tutaj w HeroBuddy użyli BGWhite?

5:12Widzisz, że to nie działa.

5:14Jeżeli użyjemy tego w Section. Tak samo.

5:16Czyli generalnie nie ma czegoś takiego jak klasa BGWhite.

5:20Bo ta klasa BGWhite zmieniła nazwę na swoją dedykowaną nazwę, z której będziemy

5:25korzystać w przypadku zaimportowania właśnie tych klas do konkretnego pliku.

5:31Więc tak, możemy to sobie hermetyzować.

5:33Poznaliśmy już sposób, jakim będziemy sobie modyfikować style.

5:37Czyli ten styl zawsze będzie obiektem, tak jak mamy tutaj.

5:41Natomiast warto sobie dorzucić jakąś obsługę tych klas, żebyśmy dużo, dużo

5:47łatwiej mogli sobie je składać właśnie w ten sposób.

5:50Służy do tego package class Names.

5:53Na npm js.

5:54com możemy sobie wyszukać coś takiego jak class Names.

5:58I to jest bardzo sprytna biblioteka, która pozwala nam na podstawie zdefiniowanych

6:04przez nas klas po prostu nam je złączyć.

6:07Możemy tutaj też conditional zastosować, czyli jeżeli spełniony jest jakiś

6:11warunek, to wtedy className doda nam coś.

6:14I na takiej zasadzie.

6:15Taka prosta biblioteka jest nam w stanie pomóc, tak, żebyśmy sobie

6:19elegancko przygotowali listę klas.

6:22Spróbujmy zainstalować Class Names do naszego projektu.

6:25I od razu mogę Ci pokazać miejsce, w którym będziemy mogli tego użyć.

6:30To znaczy tutaj warto by było wrócić do naszego komponentu App i tutaj przygotować

6:36sobie dobrze ten panel block, tak żebyśmy mogli sobie to klasę i tutaj poprawić

6:41właśnie w oparciu o tą bibliotekę.

6:43Spróbujmy ją sobie zainstalować, to będzie NPM install class names.

6:48I teraz będziemy w stanie złożyć sobie to za pomocą class Names.

6:53Spróbujmy użyć to zgodnie z tą dokumentacją, którą mamy tutaj.

6:57Nie używamy składni require, więc my potrzebujemy class Names zaimportować.

7:01Mamy tutaj importClassName from class Names i możemy to class Names zastosować

7:06sobie właśnie w taki sposób dalej będziemy potrzebowali tego, żeby były tutaj nawiasy

7:11cząsteczkowe, dlatego, że chcemy po prostu złożyć coś, dać wynik

7:15działania jakiejś funkcji.

7:17Zauważ, cały czas to działa poprawnie i tutaj dla tej jednej klasy nie

7:21wygląda to zbyt specjalnie.

7:23Co prawda ułatwiliśmy sobie sprawę, bo nie musimy pamiętać o tej dodatkowej spacji,

7:26która ma rozdzielać klasy i to robi za nas class names, ale tutaj jakoś specjalnie

7:31nie błyszczy w tym przykładzie dlatego, że jak gdyby musieliśmy się nawet troszeczkę

7:35więcej napisać, żeby to dopisać w ten sposób fajnie by było, gdybyśmy

7:39rozważyli sobie właśnie taki conditional.

7:42Czyli zwróćmy uwagę, że tutaj ten blok jest if else.

7:47Gdybyśmy chcieli sobie to uprościć i zrefaktoryzować właśnie w oparciu o klas

7:51name, które by było tutaj, to można sobie założyć, że tutaj klasy, które będą

7:56komponowane, to będzie zawsze blok, tak?

7:59Czyli tutaj sobie na przykład to dodamy, ale możemy sobie właśnie klas names

8:03zastosować, żeby dopisać te dodatkowe klasy, ale tylko i wyłącznie, jeżeli

8:08jest selected jest zaznaczony.

8:10Jak by to wyglądało?

8:11Przede wszystkim importujemy sobie clasnames właśnie stąd.

8:15Czyli tutaj będzie import class names from class Names.

8:18I tutaj zobacz, że zamiast robić to w ten sposób, możemy sobie przeprawić

8:24i zrefaktoryzować całość.

8:26Czyli to class, które tutaj jest będzie class Names.

8:29Zawsze będziemy mieli panel block, ale uwaga będzie pewien obiekt reprezentujący

8:35pole, które tylko będzie dodane, czyli to, co jest tutaj w tym polu, tylko jeśli

8:40selected będzie miało wartość true.

8:43Mamy tutaj Isactive, mamy tutaj nasze class.

8:46W takim układzie chcemy sobie to dopisać tutaj jako ClassName.

8:51Zobacz, że class możemy dopisać tutaj.

8:53Co więcej, to nam się upraszcza dlatego, że className class moglibyśmy

8:57zrobić w ten sposób.

8:59Co więcej, możemy teraz ClassName przerzucić sobie tutaj,

9:04a tutaj zrobić conditional rendering, który sugerowałem Ci na samym początku,

9:08czyli żebyśmy nie mieli if else Możemy tutaj sobie jeszcze to zrefaktoryzować,

9:12czyli będziemy mieli class Names, które jest dopisane tutaj.

9:15Jeżeli ta wartość będzie na true.

9:18Tego totalnie nie potrzebujemy, ale tutaj będziemy mieli tego pana.

9:23Ale uwaga tylko i wyłącznie jeżeli selected ma wartość true.

9:28I w tym oto prostym układzie możemy sobie zrefaktoryzować ten nasz komponent i on

9:34będzie właśnie przyjmował taką wartość.

9:36Czyli mamy tutaj klas name, które będą dopięte tylko jeżeli jest selected.

9:40Tutaj będziemy mieli name i tutaj jest selected i zaznaczenie.

9:46Sposób działania class Names możesz kojarzyć z innych

9:49frameworków JavaScriptowych.

9:51Jeśli kojarzysz takie narzędzia jak View czy Angular.

9:55One mają właśnie w ten sposób computowane klasy.

9:57Niestety React nie ma tego out of the box dlatego, że nie przychodzi z takimi

10:01rzeczami, ale właśnie takie pomocnicze biblioteki, które możemy instalować z npm,

10:06a takie jak właśnie Class Names pomagają nam w tym, żeby taką funkcjonalność dodać.