React: Przygotowanie struktury aplikacji

0:00Kontynuujemy budowanie takiej podstawowej struktury pod naszą aplikację,

0:04do której za chwilkę przejdziemy. Musimy tylko przenieść ten komponent App

0:08do osobnego pliku, ponieważ tego wymaga konwencja, której

0:12używamy w React'cie. Wytnijmy więc cały ten kawałek. Oczywiście

0:16w oknie przeglądarki pojawi nam się błąd. Tym się na razie nie przyjmujemy,

0:20stworzymy nowy plik o nazwie App.js, do

0:27którego wkleimy zawartość naszego komponentu i tutaj musimy

0:32pamiętać o dwóch rzeczach. O tym, że musimy zaimportować React'a

0:41oraz o tym, że ten komponent musimy wyeksportować,

0:45żeby następnie móc go zaimportować. Podobnie jak, na przykład, React albo React DOM

0:49do pliku index.js i wydaje

0:54mi się, że to jest dobre miejsce, żeby wytłumaczyć jak działają export'y, import'y w ES Modules

0:59i nazywam je celowo ES Modules, ponieważ możesz się spotkać

1:03w JavaScript'cie jeszcze z takimi importami, ale

1:11tym się w tym kursie na razie nie będziemy zajmować, bo taki rodzaj importów nazywamy CommonJS. Natomiast

1:18tego rodzaju importy weszły razem z wersją ES6. Natomiast nie

1:23są częścią dokumentacji ES6 i nazywają się po prostu ES Modules, czyli

1:27ECMAScript Modules. Chcę ci to teraz wytłumaczyć, ponieważ kiedy ja zaczynałem

1:32karierę programisty, to pamiętam, że sprawiało mi to dość spory problem, żeby zrozumieć czym

1:36się różni taki import od importu, który ma takie klamry,

1:41bo z nim również się możemy spotkać. Zasada

1:46jest tutaj bardzo prosta. Wystarczy to sobie poukładać w głowie. W JavaScript'cie mamy

1:51dwa rodzaje export'ów. Pierwszy z nich, to tak zwany Named Export

1:55i polega on na tym, że możemy każdego const'a, każdą

1:59funkcję, każdą zmienną w naszej aplikacji wyeksportować

2:03w taki sposób i wtedy jeśli chcielibyśmy to zaimportować w innym pliku, musimy

2:09użyć właśnie takiego zapisu, z klamrami. Jak

2:17widzisz wszystko działa i ten export nazywa się Named Export, ponieważ

2:22zawsze używamy takiej samej nazwy zmiennej,

2:26jaką eksportowaliśmy, czyli jeśli tutaj nasza zmienna nazywała się

2:30App to importujemy ją również jako App. Jeśli

2:34chcielibyśmy, żeby ona nazywała się jakoś inaczej, to możemy to zrobić podczas

2:38importu, robiąc

2:42taką operację i w tym momencie wykorzystujemy

2:47to w taki sposób i to również działa, czyli poprzez słowo

2:51klucz as, możemy zmienić nazwę zmiennej, którą importujemy

2:55z innego pliku, ale warto na tę chwilę zapamiętać, że Named Export wymuszają

2:59użycie klamry podczas importu oraz wykorzystanie

3:04takiej samej nazwy zmiennej, jaką eksportowaliśmy z naszego pliku. Co

3:09ciekawe takich Named Export'ów w naszym pliku JS może być kilka. Załóżmy,

3:14że chcemy sobie tutaj zrobić const'a name, którego

3:22później zaimportujemy w naszym index.js Możemy to

3:26zrobić po przecinku w nawiasach klamrowych, jeśli importujemy z tego samego pliku. Następnie, jeśli

3:33na przykład zrobimy sobie tutaj console.log'a, to

3:37zobaczymy, że w naszej konsoli ten Roman się pojawi, czyli

3:42taką dodatkową zaletą Named Export'ów jest to, że możemy ich mieć kilka w

3:46jednym pliku. Przydaje się to w momencie kiedy, na przykład, tworzymy sobie plik

3:51utils.js, gdzie trzymamy jakieś przydatne narzędzie, jakieś funkcje,

3:55które pomagają nam później w aplikacji, które wykorzystujemy wielokrotnie do

3:59wykonywania jakiejś operacji. Wtedy takie utils'y właśnie trzymamy

4:04sobie jednym pliku JS. Jest to mega fajne. Okej, a teraz

4:08przejdźmy do konwencji, którą zazwyczaj się stosuje kiedy eksportujemy

4:13komponent w React'cie. Mówię tutaj zazwyczaj, ponieważ do dzisiaj istnieją z spory, czy

4:17warto eksportować komponent jako Named Export, czy właśnie Default

4:22Export, które pokażę ci teraz. Żeby wykonać

4:26Default Export, jedyne co musimy zrobić to wpisać export default

4:31i nazwę zmiennej, czy też const'a, które

4:35eksportujemy. Następnie w pliku index.js

4:39importujemy to, podobnie jak przykład React'a, czyli

4:44jak DOM. W taki

4:48sposób. Jak

4:56widzisz, wszystko działa i w export default mamy dwie ciekawe sprawy. Pierwsza

5:00jest taka, że eksportując coś z takiego pliku możemy mieć tylko jeden export

5:05na cały plik. To znaczy, że jeśli mielibyśmy jakiegoś innego const'a, na przykład name,

5:09to nie moglibyśmy wykorzystać export default, ponieważ

5:13zostałby on po prostu zignorowany. Liczy się tylko jeden, a drugą

5:18ciekawą rzeczą jest to, że skoro mamy tylko jeden export i eksportujemy

5:23tak naprawdę jedną jedyną rzecz z takiego pliku,

5:27to nie obowiązuje nas już ta zasada, gdzie

5:31musimy wykorzystywać dokładnie taką samą nazwę, jaką

5:35miała nasza zmienna, czyli na przykład, jeśli tutaj mielibyśmy AppComponent, to

5:49tutaj mimo tego, że nadal importujemy tylko App, a nie AppComponent,

5:54to wszystko nam działa. Tak naprawdę

5:58w tym miejscu moglibyśmy użyć obojętnie jakiej nazwy i

6:02jak

6:10widzisz, każda nazwa działa i to też jest bardzo fajne w export default'owych,

6:15że możemy używać jakiejkolwiek nazwy, bo czasami te nazwy

6:19po prostu wygodniej jest podmienić. Są takie przypadki, nie robi się tego zbyt

6:23często i nie zachęcam cię do tego, ponieważ to musi mieć swoje uzasadnienie. Natomiast warto

6:28wiedzieć, że nie jesteśmy tutaj jakby zobligowani do tego, żeby używać dokładnie

6:32takiej samej nazwy zmiennej. Wróćmy więc do prawidłowej konfiguracji. Nazwijmy

6:37wszystko tak jak trzeba. Stosujmy się do konwencji, ponieważ

6:44w tym wypadku nie musimy tego nazywać żaden sposób inaczej. Usuńmy

6:50jeszcze to i tak

6:56przygotowana struktura aplikacji jest gotowa żebyśmy mogli zacząć z nią pracować. Lecimy

7:00dalej.