React: Dodawanie CSS Modules i SCSS

0:00Cześć! W ostatniej lekcji stworzyliśmy formularz, który pozwala nam w końcu dodawać

0:04nowe elementy do naszej listy. Mam akurat tutaj pod ręką

0:08rzeczy, które już wcześniej opisywaliśmy, ale sprawdźmy tylko, czy to na pewno działa. Okej,

0:14wszystko działa i mamy teraz tylko taki problem, że zawsze jak to dodajemy,

0:18to właściwie nie ma żadnej animacji, co sprawia, że ta aplikacja może być nieco

0:22chaotyczna dla użytkownika - takie skakanie ekranu, to nie jest najlepsze User Experience jakie

0:27możemy sobie wymarzyć. Więc tym się na pewno zajmiemy, a dodatkowo

0:31nie masz żadnej walidacji, czy to co tutaj dodajemy, jest w ogóle

0:35poprawne, czy na przykład linki są linkami? Czy imię,

0:39które wpisujemy już wcześniej nie zostało dodane, bo pamiętaj, że imię jest tutaj

0:44naszym kluczem. Dla przypomnienia, otworzymy sobie ListWrapper i

0:48w tym miejscu kluczem jest właśnie nasze imię - imię, które

0:52znajduje w tym miejscu, więc jeśli podalibyśmy dwa takie same, to

0:59nawet jeśli dodamy coś innego tutaj, to powinniśmy

1:04dostać błąd w konsoli. Tak, React

1:08ostrzega nas przed tym, że mamy dwójkę dzieci, o tych

1:12samych kluczach, co jest niedopuszczalne, dlatego musimy zadbać

1:17o to, aby użytkownik nie mógł dodawać dwóch takich samych elementów, a

1:21przynajmniej dwóch elementów, posiadających ten sam tytuł, to samo imię. A będziemy

1:25zapobiegać temu wyświetlając modal z informacją, że trzeba ten

1:29element nazwać jakoś inaczej. Ale żeby to zrobić, to też będziemy musieli trochę pogrzebać

1:33w stylach, dlatego teraz wprowadzimy nowe narzędzie do

1:37naszej aplikacji - narzędzie, które pozwoli nam na lepsze, bardziej

1:42świadome, ale też sprytniejsze dodawanie stylów, bo problem

1:46z którym mierzymy teraz naszej aplikacji, jest taki, że wszystkie style są dzielone, czyli

1:50jeśli w tym pliku, zrobimy sobie jakąś klasę, na przykład wrapper,

1:55to ta klasa będzie współdzielona ze wszystkimi plikami

1:59CSS w naszej aplikacji, więc tak naprawdę style mamy globalne - przez

2:03to musimy dodawać takie, a nie inne nazwy klas, co w większych

2:08projektach jest niedopuszczalne i może prowadzić ogromnego chaosu. Dlatego

2:12wymyślono coś takiego, jak CSS modules, które pozwala na nadawanie

2:17podobnych klas albo nawet identycznych klas, w każdym z komponentów, a mimo

2:21to każdy z tych komponentów, będzie miał swoje indywidualne style, a nazwy

2:25klas nie będą na to wpływać. Dodatkowo zainstalujemy też Sass'a, który

2:30pozwoli nam na wykorzystywanie plików scss w naszych Node Modules, dzięki

2:34czemu będziemy mogli po prostu trochę wygodniej posługiwać się takimi rzeczami, jak zmienne,

2:39jak mixin'y, jak zagnieżdżanie elementów stylowanych. Jeśli

2:44wejdziemy sobie na dokumentację Create React App, czyli tej paczki na

2:48podstawie, której budujemy nasze aplikacje. Ona zapewnia nam, po prostu, bardzo dużo

2:52narzędzi, które możemy wykorzystać out-of-the-box, czyli bez

2:56żadnego przygotowania. Między innymi właśnie CSS Modules. Zobaczmy

3:01zatem jak możemy to dodać. W tym miejscu "Styles and Assets"

3:05wybieramy CSS Modules i widzimy, że jedyne, co

3:09musimy zrobić, to tak naprawdę stworzyć pliki ze

3:13stylami, które mają prefiks module.css lub

3:17kropka scss. Ale jeśli zajrzymy sobie do fragmentu,

3:22gdzie mowa o Sass'ie, czy też też SCSS'ie, to widzimy, że musimy doinstalować

3:26jeszcze jedną rzecz, a mianowicie node-sass - narzędzie

3:30odpowiedzialne za przetwarzanie naszych plików, za preprocesowanie ich,

3:34żeby w efekcie powstawały pliki CSS, więc teraz robimy yarn

3:38add node-sass. Czekam, aż się zainstaluje

3:42i kiedy nasza paczka została zainstalowana, możemy teraz spróbować

3:46dodać jakiś plik SCSS. Załóżmy, że będzie

3:51to form. Zmienimy mu nazwę na form.module.scss,

3:58a następnie spróbujemy zmienić nazwę

4:03klasy na wrapper, a dodatkowo zagnieździmy sobie

4:07H2 - właśnie w tym miejscu. Spróbujemy

4:13odpalić naszą aplikację i możliwe,

4:18że wasz Create React App wyskoczy z błędem, z tak zwanego pre-flight

4:22check, gdzie powie wam, że coś się nie zgadza, na przykład z babel-loader. Tego

4:27typu błędy są dość powszechne i zdarzają się podczas używania Create React App

4:31i jedyne, co musimy zrobić to prostu postępować zgodnie z instrukcjami

4:36z nadzieją, że ten problem zostanie rozwiązany. Problem ten wynika

4:40z konfliktów, ponieważ są tak naprawdę zainstalowane dwie paczki w naszym repozytorium -

4:44jedna to babel-loader o wersji 804, a druga

4:48to wersja 802. Musimy zlokalizować skąd on w

4:52ogóle wziął, więc pierwsze, co robimy to po prostu postępujemy zgodnie

4:56z instrukcją, którą tutaj mamy napisaną. Jeśli to nie pomoże, to będziemy myśleć

5:00co dalej. Celowo nie pomijam tego fragmentu, ponieważ chcę ci pokazać że

5:04debugowanie takich rzeczy w konsoli, jest czymś, co jest

5:08na porządku dziennym w pracy dewelopera i po prostu trzeba wiedzieć, jak sobie z tym radzić. Nie

5:13trzeba panikować, więc pierwsze co musimy usunąć, to yarn.lock. Następnie

5:19usuwamy node_modules. Sprawdzamy,

5:24czy w package.json nie mamy babel-loader'a, ale nie

5:28mamy, więc teraz to co musimy zrobić, to zainstalować na nowo wszystkie

5:32dependencje. Zobaczymy, czy to pomoże. Okej,

5:38wszystkie paczki są z powrotem zainstalowane. Sprawdzamy i niestety

5:43nie pomogło, więc teraz przechodzimy do planu B, czyli

5:47sprawdzimy czy w moim globalnym node-modules znajduje

5:52się babel-loader. Tak, mamy

6:04tutaj babel-loader. W moim folderze globalnym, więc

6:08teraz to co musimy zrobić, to usunąć babel-loader

6:13z tego miejsca i

6:23po usunięciu sprawdzimy, czy teraz działa. Nadal

6:27nie działa, ale tym razem problemem jest webpack. Najwidoczniej

6:33mój folder zachował jakieś stare

6:37wersje tych paczek i

6:47w końcu wszystko działa, jak należy. To znaczy nie do końca, ponieważ mamy

6:51błąd, ale jest to błąd wynikający z tego, że nasza aplikacja w końcu

6:55ruszyła, więc to co musieliśmy zrobić, to usunąć rzeczy

6:59z globalnego node_modules - tam znajdowały się starsze wersje

7:03naszych paczek i w związku z tym wchodziły one konflikt

7:08w naszym Create React App, ale tak jak widzisz, wszystko było

7:12napisane w tych instrukcjach. Dlatego warto uważnie czytać błędy, które logowane

7:16są do konsoli, a teraz możemy przyjść pracy. Zainstalowaliśmy

7:21css-modules i zainstalowaliśmy preprocesor Sass, w związku

7:25z czym nasze style już za chwilkę ulegną dużej poprawie, ale

7:29o tym już następnej lekcji.