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ść. W tej lekcji powiem ci pokrótce jak działa React Router i dlaczego
potrzebujemy go naszej aplikacji. Na początek jednak musimy przypomnieć sobie,
jak działają takie klasyczne strony internetowe, oparte
o zwykłe pliki HTML, takie statyczne z CSS'ami z JS'ami
i tak dalej. Więc mamy jakiś serwer i mamy
jakiegoś usera i ten user wchodząc na jakąś
stronę wykonuje request, który jeśli wszystko pójdzie dobrze, zostanie
odebrany przez serwer i w odpowiedzi user dostanie index.html,
czyli zazwyczaj będzie to po prostu strona główna i tak to
działało do tej pory. Jeśli użytkownik wybierał, na przykład, jakiś inny
adres, na przykład /about, to w odpowiedzi otrzymywał
about.html, czyli inną podstronę z innym plikiem html. Sprawy się
komplikują w momencie, kiedy zaczynamy używać jakiejś aplikacji webowych, bo
jak pamiętasz, zresztą jeśli przejdziemy sobie dalszego edytora kodu, to możemy
to szybko udowodnić. Wejdźmy sobie do index.js. Mamy
tutaj element root, do którego renderujemy całą naszą aplikację,
każdą możliwą podstronę, która pojawi się w naszej aplikacji. Będziemy
renderować do elementu root, a element root znajduje się nigdzie indziej, jak
właśnie w index.html i to jest ten jeden pojedynczy div, do
którego cała nasza aplikacja, wszystkie możliwe rzeczy, które pojawią się w naszej aplikacji,
właśnie tutaj będą renderowane, co zatem w momencie,
kiedy użytkownik naszej aplikacji poda root,
na przykład, about? Będzie chciał się dostać do podstrony about, co wtedy? Wtedy
sprawy nam się komplikują, bo przy wykonaniu pierwszego request'a użytkownik
pobiera tak naprawdę index.html, razem z JS'em, CSS'em i
wszystkimi innymi plikami potrzebnymi do obsługi strony, ale przy
kolejnym request'ie dzieje się coś innego i tutaj pomaga
nam właśnie React Router, ponieważ jeśli chcemy wyświetlić stronę about, to
ona już nie znajduje się na serwerze w postaci pliku about.html. Ona znajduje
się w naszych plikach JavaScript i musi być wyrenderowana do pliku
index.html, więc to co robi React Router, to
mówi aplikacji, że ma wyrenderować teraz plik, na przykład about.js,
bo tak może nazywać ten widok, jeśli akurat znajduje pod rout'em about. Różnica
tutaj polega na tym, że linki, które podajemy w naszej przeglądarce przestają
już pytać bezpośrednio serwer, tylko najpierw komunikują
z React Routerem, który decyduje, co ma się wydarzyć później, czyli
jakie dane mają się zaczytać z serwera, czy w ogóle mają się zaczytać, czy może to już
jest gdzieś lokalnie użytkownika. Oczywiście, cała
ta sprawa ma wiele wymiarów i tak naprawdę ciężko ją wyjaśnić w tak
krótkim czasie. Natomiast to, co my musimy tutaj zrozumieć to fakt, że komunikacja
z serwerem, jeśli korzystamy z aplikacji React'owych już nie wygląda tak jak
w przypadku stron statycznych, że po prostu pobieramy sobie pliki, tylko to co
użytkownik dostaje przeglądarce, to co widzi, co mu się wyświetla, o tym
decyduje React Router i wydaje mi, że taki krótki wstęp teoretyczny na
razie wystarczy. Reszta wyjdzie w tak zwanym praniu. Pokażę ci na
przykładach jak działa dokładnie React Router. Dlaczego tak działa? To
wszystko już w następnych lekcjach.