React: Rozbudowa struktury aplikacji

0:00Cześć. Witaj w kolejnej lekcji, w której zajmiemy się w końcu zmianą oblicza

0:04naszej aplikacji. Zaczniemy tutaj trochę zmieniać w plikach wyglądzie. Mamy

0:08w końcu nowy design naszego klienta, który nam zlecił wykonanie

0:13tej aplikacji i dojdą nam nowe podstrony i tak dalej, ale zanim do tego wszystkiego przejdziemy,

0:17to muszę ci powiedzieć o kilku rzeczach. Wszystkie te zmiany, które tutaj

0:22ci pokażę, są na branch'u 04, więc możesz pracę zacząć

0:26razem ze mną zaczynając właśnie od tego branch'a. Kilka rzeczy tu się zmieniło

0:30w stosunku do poprzedniego działu. Żeby po prostu nam ułatwić pracę i żeby przygotować

0:34strukturę aplikacji do dalszego rozwoju. Przede wszystkim ujednoliciłem nazwy

0:40niektórych komponentów i teraz zamiast ListWrapper, mam po prostu List, List.js,

0:44a prywatny komponent ListItem jest na wierzchu w folderze List.

0:48Tym sposobem dostęp do prywatnych komponentów jest po prostu łatwiejszy i tego już

0:52się będziemy teraz trzymać. W poprzednich działach struktura plików nie miała aż takiego znaczenia

0:57i warto tutaj też podkreślić jedną bardzo istotną rzecz. Widziałem

1:02w swoim życiu co najmniej kilkanaście bardzo dużych projektów w React'ie i w

1:06kilku pracowałem. To co uderzyło mnie najbardziej ze wszystkich z

1:10nich to to, że nie ma tak naprawdę jednej jasno

1:14określonej struktury tego, jak powinien wyglądać wzorcowy

1:18projekt w React'ie. Jest nawet strona, która mówi o tym, jak tworzyć

1:23takie skalowalne duże projekty w React'ie i zawiera ona to zdanie "Przemieszczaj

1:28pliki, dopóki nie poczujesz, że wszystko jest na swoim miejscu." Żeby

1:34było śmieszniej to ta strona powstała na podstawie tweet'a, gdzie Dan Abramov

1:38właśnie mówi to samo, żeby najpierw zacząć od prostego rozwiązania i później,

1:43w miarę rozbudowania aplikacji, po prostu rozbudowywać też strukturę

1:47plików, więc to co pokażę ci w tym kursie nie powinno być

1:51dla ciebie wyznacznikiem tego jak powinna wyglądać każda aplikacja. Może

1:56być to wyznacznik tego, jak może wyglądać taka aplikacja, którą my tworzymy. Jednak pamiętaj,

2:01że to co my robimy, również mogłoby być tworzone w zupełnie inny sposób. Inny

2:05deweloper mógłby mieć do tego jakieś inne podejście, mógłby nazywać inaczej komponenty,

2:09mógłby inaczej je poukładać, więc pierwszą i najważniejszą lekcją, jeśli chodzi

2:13skalowanie projektu w React'ie jest to, że po prostu należy dostosować

2:17strukturę projektu do własnych potrzeb, tak żeby ona

2:21była przewidywalna, żeby była spójna, żebyśmy trzymali się standardów, które

2:25sami sobie wyznaczymy, żeby ciężko było to zepsuć i żebyśmy wiedzieli, które

2:30na przykład pliki możemy usunąć bez żadnych konsekwencji, ponieważ jesteśmy tak dobrze

2:34zorientowani w strukturze tej aplikacji. Więc pierwszą zmianę jaką

2:39dokonamy, pierwszym ulepszeniem, pierwszym rozbudowanym naszej struktury, będzie

2:43odpowiedzenie na taką podstawową potrzebę naszego klienta,

2:47czyli tworzenie podstron. Mamy teraz Twitter'y i mamy

2:52artykuły i mamy notatki i dla tych trzech rzeczy musimy stworzyć podstrony Dotychczas

2:57mieliśmy tylko App.js, który zawierał wszystko, co nam było potrzebne. To

3:02był taki nasz root'owy element, taki główny, taka strona

3:06główna po prostu i ona pozostanie tą naszą stronę główną, tylko

3:10teraz zmienimy jej nazwę i wrzucimy ją do nowego folderu. W naszym

3:15folderze src stworzymy sobie nowy folder o nazwie views i tam

3:19będzie zawierał wszystkie widoki, które będziemy mieć w naszej aplikacji. Również ten

3:23główny root'owy, jak już to nazwałem widok i tak właśnie go nazwiemy - Root. Nasz plik App.js

3:30przeniesiemy do tego folderu. Visual

3:36Studio Code zapyta się czy update'ować importy do tego pliku. Możemy to

3:40zrobić i on wtedy nam podmieni te ścieżki, żeby nam nic nie zepsuło, a sam

3:45App.js przemianujemy na Root. To

3:49samo zrobimy z nazwą komponentów tym miejscu, tutaj

3:55tak jak już mówiłem, stosujemy się po prostu do

4:00terminologii i do podejścia, które wynika gdzieś z mojego doświadczenia. Natomiast

4:04nie jest to jakaś wyrocznia, nie traktuj tego jako coś,

4:08co jest wyznacznikiem i czego zawsze każdy będzie się trzymać. To nie jest

4:13tak, w React'ie mamy pełną dowolność i nie należy wartościować,

4:17nie należy oceniać projektów na podstawie ich struktury, jeśli ona jest dobrze

4:21skonstruowana, jeśli jest stworzona z głową, po prostu. Więc

4:25teraz przejdźmy sobie do index.js update'ujmy nasz import

4:30w tym miejscu, ponieważ teraz importujemy Root i nasz

4:36komponent Root znajduje się w folderze views. Coś

4:41jeszcze nie działa, zaraz sprawdzimy o co chodzi. Okej,

4:50musimy zaimportować to z pliku Root. Dobra, teraz

4:54kolejna rzecz się zepsuła, index.css. Index.css

5:02przenieśliśmy do Root i tutaj będziemy go też importować. Jak widzisz już

5:06wszystko się naprawiło, co prawda istnieją lepsze sposoby na importowanie

5:10czy też inject'owanie, jak to się mówi, wstrzykiwanie stylów

5:14globalnych. Natomiast na potrzeby tego kursu zostawimy po prostu index.css,

5:19nie będziemy tego ruszać. To działa, to jest okej. W następnych

5:24kursach pokażę ci jak w bardziej zaawansowany sposób możemy to robić. Tutaj

5:29nie musimy się tym przejmować i skoro stworzyliśmy już nasz nowy folder

5:33to pewnie powoli zauważasz, że kształtuje nam się taka struktura. Mamy assets,

5:37czyli zasoby. Tutaj będziemy trzymać nasze obrazki. Jak

5:41widzisz pojawiło logo, ale to pokażę ci w następnej lekcji, co z nim zrobimy. Mamy

5:45też komponenty, które już znasz i to bardzo dobrze. Mamy tutaj kilka komponentów.

5:49Wszystko pozostaje bez zmian. Komponenty tego nowego, używalne elementy naszej

5:53aplikacji, tutaj się wszystko zgadza. Na pewno dojdzie tutaj kilka nowych komponentów

5:57i mamy też views. Views to po prostu pojedyncze, całe

6:02widoki składające się właśnie z komponentów. Views mają to do siebie, w

6:06przeciwieństwie do komponentów, że nie mogą być nieużywane. To jest jedna strona

6:10naszej aplikacji i też nazywa się w taki sposób, aby sugerować,

6:14że jest ona jakąś stroną, nie jest pojedynczym komponentem. Tutaj

6:18mamy akurat Root, ale inne widoki będziemy nazywać nieco inaczej. Tutaj

6:22też założymy sobie pewną konwencję, o której opowiem ci w już następnej lekcji. Natomiast

6:27to, co jeszcze w tym widoku możemy zrobić, to usunąć kilka rzeczy, biorąc

6:31pod uwagę, że to będzie nasz taki główny widok naszej aplikacji, to

6:35on nie będzie zawierał sam sobie żadnych komponentów, takich jak lista, czy

6:40formularz, przynajmniej nie w takiej postaci. Możemy

6:44to usunąć też stąd. W tej chwili zostawimy

6:48tutaj znane lubiane Hello World. Widok

6:52naszej aplikacji na chwilę trochę zbiedniał, ale już w następnej lekcji

6:56stworzymy nowe widoki, nowe podstrony i wprowadzimy

7:01w końcu React Router. Do zobaczenia w następnej lekcji.