React: Struktura projektu

16.8.x

0:00Cześć, skoro mamy już skonfigurowane nasze styled-components i możemy z nich spokojnie

0:04korzystać to teraz uporządkujmy trochę nasz projekt, przygotuj mojego do dalszego

0:08developmentu, żeby po prostu spokojnie muc sobie resztę

0:12tej aplikacji napisać, także najpierw usuniemy ten styled components

0:16stąd i uporządkuje trochę nasze app js, a właściwie przeniesiemy

0:20go do właściwego folderu jeśli pamiętasz z poprzedniego kursu. No to react

0:24ma pewną strukturę projektu, właściwie każdy może sobie wymyśleć inną, ale

0:28my tutaj przyjmujemy taką samą konwencję jaką przyjęliśmy w poprzednim

0:33kursie, dla przypomnienia tylko opowiem ci jaka jest to struktura. Przede

0:37wszystkim w naszym folderze src stworzymy sobie teraz folder components.

0:41Dodatkowo w folderze src utworzymy jeszcze folder

0:45views i póki co na tym się zatrzymamy, później jeszcze w

0:49dalszej części kursu dodamy kilka folderów, ale nie chcę na razie tutaj za

0:54dużo kłaść do głowy, no bo nie ma sensu teraz i w ogóle używać także

0:58przeniesiemy sobie teraz app js i nazwiemy go inaczej. W naszym folderze

1:02views stworzymy sobie root, ponieważ nasze abdeapp js jest root'owym

1:07widokiem, takim głównym widokiem plik app

1:15css możemy sobie usunąć, podobnie

1:19jak app test, na razie nie będziemy korzystać z testów, usuniemy

1:26też index css, ponieważ inaczej zaimportujemy globalne style.

1:30Możemy też wyrzucić całą zawartość tego co

1:34znajduje się w app i wrzuciłem

1:38tutaj na przykład tylko H1, sam

1:46plik app js jest zmienimy na root js i teraz

1:51poprawimy ten import. Musimy

1:55zmienić tutaj nazwę komponentu, który eksportujemy, na root

1:59i nasza

2:05aplikacja działa. Nic się nie wywala także porządek

2:09zrobiony, możemy przejść do dalszej części, póki nasz projekt jeszcze jest na takim

2:13bardzo wczesnym etapie zaawansowania to chciałbym tutaj wprowadzić jeszcze jedno bardzo fajne

2:17ułatwienie, a mianowicie absolutne importy, czyli takie, które nie będą

2:21wymagały ścieżek relatywnych w tym miejscu, żebyśmy mogli z każdego

2:26miejsca w naszej aplikacji importować rzeczy relatywne

2:30do naszego src, czyli jeśli na przykład byłbym 5 folderów

2:34niżej, to i tak ten import w tym miejscu wyglądałby tak, ponieważ

2:39tym takim punktem pierwszym jest src, a w

2:43nim mamy views root root. Jest to bardzo fajne, ponieważ

2:47jeśli będziemy importować bardzo dużo komponentów w jakichś widokach, to wtedy moglibyśmy

2:52się pogubić z tymi kropkami z ilu folderów wychodzimy i tak dalej, więc

2:56zawsze w praktyce w takich większych projektach stosuje się w importy

3:00absolutne i żeby to zrobić naprawdę nie trzeba wiele, wystarczy, że

3:05stworzymy sobie plik kropka env, który znajduje się poza

3:09naszym folder src, on się znajduje w tym głównym folderze i w

3:14tym kropka env wpisujemy node path tak jak tutaj w ten sposób

3:18równa się src. Jest to po prostu zmienna środowiskowa, która

3:23jest przekazywana później do webpack'a który

3:27obsługuje budowanie aplikacji Reactowej i kiedy on dostanie taką

3:31zmienną środowiskową to będzie wiedział, że importy, które stosujemy

3:35w naszej aplikacji właśnie odnoszą się do tego src i kiedy

3:39to zapiszemy, wrócimy sobie do naszego index js,

3:44to jak widzisz nasz aplikacja się buduje nie sypie błędu, natomiast sypie

3:48błędem ESlint, ponieważ on nie rozumie importów absolutnych i musimy mu to dość

3:52dobrze wytłumaczyć, więc teraz wejdziemy sobie do przeglądarki, zobaczymy co możemy z tym zrobić. Pierwszym

3:58rozwiązaniem na jakie wpadłem to właśnie ten wątek w którym ludzie pytają

4:03czy możemy importować rzeczy w sposób absolutny w React'cie

4:07i tutaj jest taki fragment kodu, który powinien to rozwiązać. Zaraz spróbuję

4:11go przykleić do mojej konfiguracji ESlint i zobaczymy co z tego wyjdzie. Generalnie

4:19w takich przypadkach często warto iść po prostu za tym co ludzie piszą i zazwyczaj te rozwiązania działają.

4:23Zaraz zobaczymy czy u nas działają, okej,

4:34po dodaniu tej konfiguracji odpaliłem ESlinta i niby

4:38nie rzucił tutaj błędem, natomiast tutaj nadal ten błąd widzimy i problem

4:43może być taki, że po prostu ten ESlint związany z edytorem, który podświetla

4:47nam kod się zawiesił, bo tak czasami bywa. Natomiast teraz

4:51usunę te konfigurację i zobaczymy, czy wtedy

4:56ESlint w konsoli rzucimy jakimś błędem tak,

5:00czyli to jest ewidentnie dowód na to, że ta konfiguracja działa.

5:04Ponadto sprawdziłem to w moim web storm'ie i tam również ten

5:08błąd się nie pojawia, więc jest jakiś problem z Visual Studio Code, który po prostu

5:12nie ogarnia tego, że powinien rezerwować te importy, więc to

5:16co możemy zrobić, żeby trochę załagodzić sytuację, to sprawić, żeby ESlint w tym

5:21Visual Studio Code nie rzucał nam błędem, tylko ostrzeżeniem. Możemy to zrobić poprzez

5:25dodanie tutaj zasady import no-unresolved i dać

5:32tutaj 1 i w ten sposób ten błąd zmieni

5:36się w ostrzeżenie. Nie gryzie to tak w oczy, wtedy nie

5:40jest to czerwone, poza tym jeśli faktycznie jakiś moduł nie będzie mógł zostać zaimportowany

5:44to aplikacja po prostu się nie zbuduje, więc nie musimy się tym przejmować, a korzyść

5:49z posiadania absolutnych importów jest tutaj dużo większa niż korzyści z tego,

5:53że ESlint będzie poprawnie lintował nam tutaj importy,

5:57okej, skoro z tym już się uporaliśmy, to teraz możemy przejść

6:02do komponentu i stworzyć strukturę dla naszego pierwszego komponentu i będzie

6:06to button, jak sobie

6:10zerkniemy na nasze design'y, tam button'y mamy w dwóch rozmiarach i w dwóch

6:14kolorach i to też również uwzględnimy w naszym komponencie, więc

6:20teraz w folderze button stworzymy sobie, button JS i na

6:28razie jedyne co mu damy background kolor, weźmiemy go sobie z tego komponentu, wyeksportujemy

6:35to,  zaimportujemy w naszym

6:39widoku root'owym, pamiętamy

6:45o tym, że mamy już importy absolutne, więc możemy wpisać po prostu components, button,

6:50button, okej,

7:00postawmy nasz projekt i zobaczmy jak to wygląda. Faktycznie nasz

7:04button się pojawił i ma odpowiedni kolor, więc nasz pierwszy komponent został

7:08stworzony, a w następnej lekcji pokażę ci jak możemy wykorzystać props'y które

7:12podajemy do tego button'a, żeby wpływać na jego wygląd w sposób bardziej dynamiczny

7:16i właśnie odpowiedni do tego jak stosuje się styled-components.