React: Konfiguracja projektu

16.8.x

0:00Cześć. W tej lekcji zaczniemy sobie konfigurować naszą aplikację React'ową

0:04i zrobimy to przy pomocy create-react-app, czyli takiego repozytorium,

0:08które pozwala nam po prostu szybko stworzyć szkielet aplikacji, zresztą

0:13w poprzednim kursie o podstawach React'a wykorzystywaliśmy dokładnie tę samą paczkę,

0:17tylko tutaj podejdziemy do sprawy zupełnie w inny sposób, dużo bardziej zaawansowany.

0:21Pokażę ci jak to robić od samych podstaw. Jeśli zastanawiasz się dlaczego w

0:26ogóle korzystamy z gotowej paczki to nie bez powodu ten kurs nazywa się React

0:30w praktyce, ponieważ w praktyce rzadko korzysta się z jakichś custom'owych

0:34setup'ów tworzonych od podstaw, zazwyczaj właśnie korzysta się z create-react-app. Ewentualnie

0:40jeśli ktoś potrzebuje jakiś dużych zmian to robi się tak zwanego fork'a, czyli

0:44taką własną wersję gdzie zmienia się kod tego create-react-app albo

0:48ewentualnie robi się tak zwanego eject'a, ale to już jest zupełnie zaawansowana

0:52kwestia i bardzo rzadko do tego dochodzi. Zazwyczaj to, co oferuje create-react-app

0:56naprawdę wystarcza i w tym kursie ci pokażę, że nam w

1:00zupełności to wystarczy do odtwarzania całkiem imponującej aplikacji. Zanim

1:09przejdziemy do strony creat-react-app, to dwa słowa jeszcze o moim setup'ie,

1:13ja tutaj korzystam z Visual Studio Code w wersji insiders, czyli takiej, która posiada

1:18wszystkie najnowsze feature'u, to jest taka trochę beta wersja. Niemniej uważam, że jest ona

1:22bardzo stabilna. Jeszcze nigdy mnie nie zawiodła, więc polecam ci ją gorąco. Natomiast

1:26jeśli chodzi o terminal to jest to terminal unix'owy, zsh nie

1:31bash. Tutaj totalna dowolność czy to będzie bash czy zsh,

1:35raczej nie będzie tutaj żadnych konfliktów i różnic wszystko powinno wyglądać zupełnie

1:39tak samo. Natomiast jeśli pracujesz na Windowsie to postaraj się zainstalować

1:43Windows Linux subsystem i właśnie stworzyć sobie terminal

1:47unix'owy i jeśli tego nie zrobisz to prawdopodobnie

1:52wszystko również będzie działać, nie mniej nie będzie to identyczne

1:57jak to co robię w tym kursie. Niektóre komendy mogą się różnić, niektóre rzeczy

2:01można trochę inaczej zainstalować i to będe w tym kursie pomijał, koncentrujemy

2:06się na tym środowisku Unix'owym, ponieważ Windows 10 i tak oferuje to środowisko,

2:10więc tutaj to jest tylko i wyłącznie kwestia wyboru kto jakie narzędzia

2:14sobie wybierze i jeśli chodzi o na node'a to ja korzystam z wersji 10.15.1. Jest

2:20to obecnie najnowsza wersja z tej wersji LTS, czyli która

2:24wspiera rzeczy, które były w poprzednich wersjach a nie tak odcina

2:28się od niej grubą kreską, więc tutaj żadnych konfliktów nie powinno

2:32być w tym kursie jeśli chodzi o używaniu tej wersji. Jeśli chodzi o npm'a to

2:37mamy tutaj wersję 670, to jest o tyle ważne, że od którejś tam piątki

2:41weszło takie narzędzie npx, które tutaj za chwilkę użyjemy. Jeśli

2:46nie wiesz co to npx to głównie chodzi o to, że ono pozwala na wykorzystywanie

2:50paczek, których nie mamy zainstalowane globalnie na komputerze lub wykorzystywanie

2:54paczek, które mamy w node modules, ale bez konieczności podawania takiej bardzo długiej

2:58ścieżki typu node modules slash bin slash i tutaj

3:02dopiero nazwa naszej paczki, więc jest to całkiem wygodne narzędzie. Jeśli cię ciekawi

3:07w szczegółach jak to działa, to zapraszam cię do dokumentacji, jest naprawdę bardzo dobrze

3:11opisane. A my już teraz przechodzimy do strony create-react-app i

3:15mamy tutaj przed sobą repozytorium create-react-app,

3:19jeśli cię interesuje co tak naprawdę kryje się tutaj w tej konfiguracji. Co

3:23możemy znaleźć w kodzie, to masz tutaj pełen dostęp do tego. Natomiast my przyjdziemy

3:27sobie do strony dokumentacji, ponieważ jest ona naprawdę doskonale przygotowana

3:31i wszystkie albo prawie wszystkie rzeczy, które będą dotyczyć

3:35konfiguracji naszej aplikacji znajdziemy właśnie tutaj w dokumentacji, więc

3:40od tego sobie zaczniemy i pierwsze co musimy zrobić to oczywiście stworzyć naszą

3:44apkę i wykorzystano właśnie do tego npx, wspomniany przed chwilą. Zrobimy

3:49to teraz, wpisujemy npx

3:53create-react-app i podajemy nazwę naszej

3:57aplikacji. Ja z uwagi na to, że będę to numerował foldery

4:02w zależności od tego w jakim rozdziale będziemy się znajdować, to ja sobie to nazwę 01

4:06natomiast ty możesz nazwać to jak chcesz, możesz nazwać na przykład favnote, ponieważ

4:10tak się będzie nazywać nasz aplikacja. Ja teraz sobie tworzę folder 01

4:15i teraz po prostu musimy poczekać, aż nasz aplikacja

4:19się zainstaluje, a właściwie nasza paczka do skonfigurowania naszej aplikacji. Okej,

4:25wszystko poprawnie się zainstalowało i teraz jak przyjdziemy sobie do naszego folderu

4:30z aplikacją, spojrzymy na struktura plików to zauważymy jedną rzecz są

4:34oczywiście osoby, które korzystają z yarn'a i są osoby które korzystają

4:38z npm'a. Nie ma to w zasadzie żadnego znaczenia, jest to tylko narzędzie

4:42i każdy wybiera sobie to co chce. Natomiast czasami mam wrażenie, że osoby

4:47początkujące nie wiedzą w jakim package menadżerze zainstalowane

4:51są dane pliki w jakimś projekcie i najłatwiej poznać to po prostu po

4:55pliku log, czyli po albo yarn log albo po package json log

5:00w przypadku npm'a. Tutaj mamy yarn'a, więc możemy wykorzystywać

5:04yarn'a. Natomiast jeśli ktoś chciałby skorzystać z npm'a to jedyne co

5:08musisz zrobić to usunąć yarn'a, a właściwie plik yarn log

5:13i wpisać npm install

5:17i teraz zaczekać aż wszystko zainstaluje

5:21się na nowo i utworzy się plik package json log i wtedy

5:25możemy już korzystać z npm'a i z racji, że ja na początku tej lekcji opowiadają

5:30o npm'ie, npx'ie i tak dalej to zostanę już przy tym npm'ie,

5:34nie nie będę wam kazał instalować kolejnego narzędzia, czyli

5:39yarn'a, zostaniemy sobie w obrębie tutaj jednego narzędzia.

5:43Jeśli jednak wolisz yarn'a to też nie ma problemu, możesz korzystać z

5:47czego chcesz. Okej, teraz jeśli wszystko poszło dobrze widzimy,

5:52że został dodany plik pakiet json log. Jeśli wpiszemy teraz npm

5:56start to

6:03nasza aplikacja powinna się załadować i tak właśnie się stało. Wszystko

6:07działa. Nasz aplikacja hula, więc konfigurację create-react-app

6:13mamy za sobą, a w następnej lekcji opowiem ci jak skonfigurować lintera i

6:17czym właściwie linter jest.