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ść! Nasza aplikacja zyskuje coraz więcej, dość skomplikowanych
komponentów i elementów, i logiki, którą musimy obsługiwać. I bardzo
często pojawia się właśnie potrzeba, żeby coś wylogować, żeby zrobić console.log'a, ale
jest na to jeszcze lepsze rozwiązanie, które za chwilkę ci pokażę. Tylko jeszcze
małe drobne usprawnienie w naszym form'ie, ponieważ activeOption
to jest nazwa, która dość dobrze aplikuje się
do tylko tego komponentu, ale jeśli będziemy chcieli ją podawać gdzieś wyżej, właśnie
jako typ notatki, którą chcemy stworzyć. No, to lepiej, żeby
ona nazywała type. Więc teraz activeOption, każde
które mieliśmy w naszym form'ie zmienimy na type. Teraz to
dużo lepiej oddaje to, co chcemy przekazać wyżej, do naszego root'owego
widoku, ale teraz czas na nowe narzędzie w naszym kursie. Jak
widzisz, nawet sam React podpowiada, że fajnie by było, gdybyśmy korzystali
z dedykowanego narzędzia, które pomoże nam tworzyć naszą aplikację,
ponieważ zawiera mnóstwo ciekawych opcji, gdzie możemy sobie na przykład właśnie podejrzeć state
i tak dalej, więc teraz klikniemy tutaj - w React DevTools. To
nas przeniesie do dokumentacji React'a. Jeśli korzystasz z Chroma,
to oczywiście wybieramy Chrome. Jeśli z innej przeglądarki, na przykład, Firefox, to tutaj też jest
link. My wybieramy Chroma i wystarczy,
że klikniemy Add i teraz, jeśli zainstalowaliśmy już rozszerzenie
i odświeżymy naszą aplikacje, to zobaczymy, że nasza strona używa Development
Build, czyli takiej wersji deweloperskiej - nie przeznaczonej dla
produkcji. Jeśli odświeżamy
nasze DevTools'y i otworzymy je jeszcze raz, to zobaczymy, że pojawiła nowa
zakładka, która nazywa się React i niech nie zwiedzie cię fakt, że to
jest tylko jedna mała zakładka, bo w tej zakładce kryje się mnóstwo narzędzi, które uratują Ci
nieraz życie. Jeśli chodzi o debugowanie aplikacji React'owych. Powiększymy sobie trochę okno
i zobaczymy, co tutaj się kryje. Przede wszystkim wszystkie elementy
w drzewku mamy nazwane tak, jak są nazwane w naszej aplikacji, czyli nie mają
jakiś dziwnych nazw - tak mamy tutaj. Nie mają tych strasznie
długich klas stworzonych przez CSS Modules. Wszystko
ma swój porządek i wszystko wygląda tak, jak w naszej strukturze w aplikacji. Co
więcej, jeśli gdy klikniemy na poszczególny komponent, to zobaczymy w
jakim pliku on się znajduje. I na przykład, w index.js mamy nasz najbardziej
root'owy element. Nie mylić z root'owym widokiem, bo root'owy widok,
to jest ten dopiero w JS. I tutaj mamy BrowserRouter - to on jest zewnętrznym
elementem, który oplata całą aplikacje. Wewnątrz mamy nasz Provider. Możemy
podejrzeć, co do tego Providera przekazaliśmy i tutaj uwaga - jeśli wrócimy sobie
do root, to w tym, takim najbardziej zewnętrznym state'cie naszej aplikacji, mamy na
przykład boolean, który się nazywa isModalOpen. Pamiętasz do czego służy?
Jeśli zmienimy jego wartość tutaj, to pojawi nam się nasz modal. Mamy
też dostęp do wszystkich notatek, które na razie nie istnieją, co prawda.
No, ale możemy je podglądać i teraz, na przykład, jeśli chcemy wejść do naszego
modala, na to musimy właśnie tutaj, odpalić modal najpierw. Dopiero
wtedy on pojawi w naszym drzewku, a w modalu mamy form. Jeśli
zaczniemy coś zmieniać w naszym formie, w tym miejscu, to w czasie rzeczywistym, zobaczymy, jak
zmieniają się wartości w naszym stoiciestate'cie, czyli nie musimy już nic logować. Wszystko
mamy jak na dłoni podane, tutaj w naszym React DevTools. W
dalszej części kursu, jeszcze nie raz, użyjemy tego narzędzia. Możemy tutaj, na
przykład, wyszukiwać jakichś elementów po regex'ie, też. No, mnóstwo jest opcji
i mnóstwo jest fajnych rzeczy, które na pewno nam pomogą i przyspiesza naszą pracę. Już
nigdy więcej nie będziemy console.log'ować. No, albo będziemy robić to dużo,
dużo rzadziej. To tyle w tej lekcji. Chciałem Ci pokazać kolejne fajne narzędzie. Proszę
zainstaluj je teraz w swojej przeglądarce, ponieważ bardzo Ci przyda i teraz tym
kursie i w ogóle w przyszłości. A my widzimy się już w następnej lekcji.