React & TypeScript: Nowy projekt

0:00W tej lekcji pokażę Ci w jaki sposób

0:01możesz skonfigurować TypeScript w nowym projekcie.

0:04I tutaj co prawda opcji jest niesamowicie

0:06dużo, ale jeżeli chodzi o tworzenie nowych aplikacji jak to w zasadzie najbardziej i

0:11najczęściej spotykaną praktyką jest wykorzystanie Creative App.

0:14Jak wiesz, dzięki temu otrzymujemy out of the box, konfiguracja Babel, Web Packa

0:18oraz klienta, jeżeli tylko chcemy go wykorzystywać, a dodatkowo jeżeli

0:23zastosujemy odpowiednią opcję, będziemy mieć również konfigurację skryptu.

0:27Zatem zobaczmy jak to dokładnie możemy zrobić.

0:30Mam tutaj utworzony nowy projekt i

0:31wystarczy, że z poziomu konsoli przejdę do tego katalogu, a następnie skorzystam z

0:35polecenia MPX Kreator, do którego przekazuję bieżący katalog oraz

0:40flagę template, do której przekazuję wartość type switch.

0:43Dzięki temu nasza aplikacja zostanie

0:45utworzona tak jak normalnie robimy to z pomocą jej jak Tab.

0:48Natomiast w tym przypadku zostanie dodatkowo skonfigurowany Type Spit.

0:52Co to dokładnie oznacza?

0:53Opowiem Ci w jednej z kolejnych lekcji.

0:54Natomiast tak jak widzisz, w tej chwili po prostu instalują się zależności.

0:58I teraz jedyne, co będziemy musieli zrobić, to po prostu uruchomić aplikację.

1:03W tym momencie wszystko zostało zainstalowane i wystarczy uruchomić

1:06polecenie Yarn Start, aby wszystko zaczęło działać.

1:09Natomiast nie będziemy teraz tego robić,

1:10aby zobaczyć tylko kręcącą się ikonkę jak ta.

1:13Natomiast jak widać nowe katalogi zostały utworzone już w naszym projekcie.

1:17Przede wszystkim mamy tutaj plik

1:19konfiguracyjny test config, który jak powiedziałem w kursie podstaw TypeScript

1:23jest wymagany do tego, aby pracować w wybranym projekcie.

1:27I tutaj mamy taką podstawową konfigurację,

1:30której szczegółowo przyjrzymy się w jednej z kolejnych lekcji.

1:32Najważniejsze jest tutaj to, że ta

1:34podstawowa konfiguracja w zasadzie załatwia temat rozpoczęcia pracy z tym

1:38skryptem i po prostu może zacząć tworzyć Twoją aplikację i ewentualnie dodawać

1:42tutaj opcje, które będą Ci niezbędne, bądź usuwać te, które potrzebne Ci nie są.

1:47Jeżeli chodzi o sam katalog st.

1:48C, to tutaj analogicznie jak w przypadku

1:50klasycznej aplikacji jak pojawiły się pliki naszej aplikacji, przy czym jak

1:54widzisz mają one rozszerzenie Tasks, a nie jest jak to bywa normalnie.

1:58Z kolei jeżeli chodzi o samą zawartość

2:00aplikacji tak jak widzisz nic się tutaj nie zmienia.

2:03Mamy tutaj po prostu jak dodać jej efekt.

2:06Natomiast jak pokazałem w poprzedniej

2:07lekcji, po prostu dodając nowe komponenty do naszej aplikacji, będziemy musieli

2:11stopniowo zajmować się również dodawaniem typów.

2:13W tym przypadku nie jest to wymagane, ponieważ jeżeli sobie np.

2:16przejdziemy tutaj, to

2:18wykorzystując impedancję typów jest w stanie domyślić się tego, że np.

2:22importowany komponent app jest rzeczywiście komponentem React.

2:25I mało tego, otrzymujemy tutaj informację,

2:27że zwracają one element g sex bądź też ewentualnie null.

2:31Zatem tak jak powiedziałem, same pliki projektu nie różnią się tutaj za bardzo.

2:34Poza plikiem react app i MV

2:37jest to miejsce, w którym jesteśmy w stanie definiować typy

2:40związanymi bezpośrednio z scripts, czyli mechanizmem, który

2:44odpowiada za generowanie naszej aplikacji, ponieważ korzystamy z Created App.

2:48To właśnie z pomocą tego pliku możemy dodać np.

2:51obsługę plików, oczywiście jeżeli tylko istnieje taka potrzeba.

2:55Na ten moment, jeżeli chodzi o

2:56konfigurację nowego projektu tak w zasadzie nie mam Ci do powiedzenia zbyt

3:00wiele, ponieważ faktycznie masz tu komplet informacji, które jest Ci niezbędne do

3:04tego, aby zacząć pracę z tym skryptem oraz wyjazdem.

3:07Nieco inaczej sytuacja wygląda w przypadku

3:09istniejących projektów, ale to omówimy sobie już w kolejnej lekcji.

3:13Tymczasem dzięki za uwagę i do usłyszenia za chwilę.