od Podstaw
4 godz. 55 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorWszystkie tresci podzielilem na piec rozdzialów, w których bedziemy rozwijac wymyslona przeze mnie aplikacje sluzaca do kolekcjonowania najciekawszych artykulów, notatek oraz kont twitterowych znalezionych w sieci.
Zaczniemy od prostych widoków, na podstawie których wyjasnie Ci, co stoi u podstaw Reacta – dowiesz sie czym jest JSX, oraz poznasz pojecie komponentu funkcyjnego. Dzieki temu oswoisz sie ze skladnia Reacta, która poczatkowo moze wydawac sie nieco obca.
W React niemal wszystko opiera sie o komponenty. Czym one sa? Dowiesz sie tego w drugim rozdziale. Opowiem Ci jak je tworzyc oraz jak tworzyc relacje miedzy nimi. Wyjasnie Ci bardzo szczególowo jak dzialaja propsy oraz w jakich sytuacjach nalezy je wykorzystywac. Zobaczysz tez, jak w Reactcie pracujemy z danymi, jak mozemy je przetwarzac a nastepnie stosujac kilka strategii stylowania komponentów, wszystko wyswietlic w atrakcyjny sposób.
W trzecim rozdziale poznasz sposób konstruowania komponentów klasowych, posiadajacych wlasny stan, dzieki któremu stworzysz miedzy innymi dynamiczny, inteligentny formularz, a takze wiele innych interaktywnych elementów. Dzieki temu szybko zrozumiesz róznice miedzy komponentami funkcyjnymi a klasowymi.
Kiedy juz poczujesz sie dosc pewnie budujac komponenty, dodamy tzw. routing w rozdziale czwartym, który pozwoli nam na stworzenie wielu podstron, które urozmaica nasza aplikacje – dowiesz sie dzieki temu jak integrowac dodatkowe narzedzie w naszym projekcie, oraz jak budowac bardziej skomplikowana strukture aplikacji.
Na sam koniec zostaimy sobie tzw. state managment, czyli zarzadzanie informacjami wspóldzielonymi przez wiele komponentów i podstron. Nie wykorzystamy jednak ani Reduxa ani Mobxa, poniewaz chce Ci pokazac, ze w samym Reactcie kryje sie ogromny potencjal nawet przy tak kompleksowych zadaniach. W tym przypadku uzyjemy Context API, który w latwy sposób pozwala nam teleportowac dane z jednego miejsca naszej aplikacji do drugiego. Podczas rozbudowywania naszej aplikacji o Context API dopracujemy tez wszystkie inne jej elementy, aby na samym koncu kursu wydeployowac nasz gotowy produkt w serwisie Netlify – zobaczysz, ze wypuszczenie aplikacji Reactowej do sieci i udostepnienie jej innym, jest niezwykle proste.W tym kursie skupiamy sie wylacznie na Reactcie z uzyciem jedynie niezbednych narzedzi. Wierze, ze doskonale opanowanie fundamentów, na których opiera sie ta technologia pozwoli Ci pózniej latwiej wkroczyc w swiat setek pluginów i paczek dostepnych w jego ekoystemie.
Ten kurs powstal z mysla o osobach chcacych zaczac swoja przygode z frameworkami JavaSript. Zaklada on wiedze na temat podstaw JavaScript (w tym ES6), jednak przy bardziej skomplikowanych rozwiazaniach zawsze pojawia sie slowo wyjasnienia. \n\nPoziom kursu zostal dopasowany do osób, które maja za soba juz kilka projektów w czystym JavaScript i chca wejsc na wyzszy poziom, przygotowujac sie tym samym do pracy z ta technologia.
Cześć! Skoro nasza aplikacja już działa, to pora żeby w końcu świat się o niej
dowiedział. W końcu marzeniem każdej aplikacji webowej jest, w końcu, zaistnienie
gdzieś w sieci, żeby każdy mógł na nią wejść. Co to za frajda trzymanie
aplikacji na lokalhost'cie, więc teraz wydeploy'ujemy naszą
aplikację na prawdziwy serwis. Ten serwis nazywa się Netlify. I na Netlify
właśnie w łatwy sposób możemy wydeploy'ować nasze aplikacje, bez żadnych
kosztów. Jest to totalnie za darmo. Tylko wtedy dostajemy taki, powiedzmy, automatyczny
link. Nie mamy tam za bardzo możliwości konfiguracji, ale to, co jest świetne to to, że
możemy wydeploy'ować naszą aplikację przy użyciu dokładnie dwóch
komend w naszym terminalu. Nie musimy się tutaj rejestrować, nie musimy nic robić. Oczywiście,
moglibyśmy się zarejestrować i wtedy mielibyśmy dostęp do większego panelu. Do
logów zdeploy'owania i tak dalej. Ale biorąc pod uwagę to, że to jest
kurs i jest naprawdę bardzo prosta aplikacja, to nie musimy mieć nad tym, aż
tak ogromnej kontroli, więc pierwsze, co musimy zrobić, to dodać Netlify
do naszego komputera, dodając to globalnie - yarn global
add - u mnie, netlify-cli -
to ważne. I kiedy
netlify-cli już się zainstaluję, to teraz musimy wykorzystać inną komendę,
która pozwoli nam zbudować nasz projekt. Przede wszystkim, musimy się
upewnić, że jesteśmy w odpowiednim folderze. U ciebie to musi być folder odpowiadający
za ostatni etap aplikacji, czyli tak jak u mnie był, dajmy na to w poprzedniej
lekcji, gdzie wszystko jest pokończone i dopracowane. W moim
przypadku jest to folder numer 05. I jak sobie wejdę do mojego package.json,
to zobaczę, że mam tutaj kilka komend. Te komendy wynikają z tego, że korzystamy
z Create React App i on zawiera coś takiego, jak react-scripts. To
są takie gotowe komendy, dzięki którym mogę odpalić serwer
deweloperski, mogę budować moją aplikację i te dwie
rzeczy omówimy w następnym, bardziej zaawansowanym kursie. To, co nas teraz
najbardziej interesuje, to właśnie komenda build, dzięki której zbudujemy
taką finalną wersję naszej aplikacji. Taką, gdzie wszystkie pliki
JavaScript, wszystkie CSS'y, HTML'e, JSX'y i tak
dalej - wszystko łączy się piękną jedność i po prostu mamy gotowy produkt, który
można odpalać w przeglądarce, nie w wersji deweloperskiej, tylko właśnie w wersji produkcyjnej. Więc
teraz nie pozostaje mi nic innego, jak użycie magicznej komendy yarn build
i muszę poczekać, aż się wszystko zbuduje. Jeśli
wszystko pójdzie dobrze, dostanę tutaj komunikat, że wszystko zostało zbudowane
i że mój folder build jest gotowy do tego, żeby go wydeploy'ować. Tutaj
nazwa folderu jest kluczowa, ponieważ zaraz będziemy ją podawać w netlify-cli. Tutaj
mamy ten build folder, więc skoro to już mamy gotowe, to nie pozostaje nic innego,
jak użyć netlify i komendy deploy. Chcę
stworzyć nową stronę. Tutaj wszystko możemy zrobić domyślnie. On
się pyta teraz - deploy path i to jest ważne, bo musimy podać właśnie nazwę folderu,
gdzie jest nasz build. U nas to się nazywa, po prostu, build. Jeśli
wszystko pójdzie dobrze, zobaczymy, że tutaj wszystko poszło na zielono. Możemy
podejrzeć Live Draft, czyli taką wersję roboczą naszej strony. Jak
widzimy, wszystko działa i teraz, żeby ją wydeploy'ować już tak dobre, musimy
użyć netlify deploy z flagą prod, jak produkt,
produkcja, production. Tutaj również podajemy build i nasza
strona została wydeploy'owana. Mamy lepszy, fajniejszy link. Nie
jest może najpiękniejszy, ale jest krótszy od tamtego. I jak widzisz,
nasza strona działa. Możemy dodawać artykuły
tak, jak na lokalu. Tak
więc moje gratulacje - udało ci się wydeploy'ować pierwszą aplikację w React'cie
i musisz przyznać, że było to chyba całkiem łatwe.