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.
Kiedy nasza aplikacja jest już gotowa i wydeploy'owana i już nie
możemy się doczekać, aż pobiegniemy i pokażemy ją naszym znajomym i rodzinie, to
może nas czekać jedna, niemiła niespodzianka, a właściwie kilka niemiłych niespodzienk,
ponieważ nadal jest to bardzo prosta aplikacja, która mogłaby
być jeszcze bardziej dopracowana, ale jest tu pewna, taka
bardzo uciążliwa rzecz, którą możemy rozwiązać już teraz i to w
bardzo prosty sposób. Jak już wiesz, React Router, za pomocą React Router Link'a
pozwala na przechwytywanie zapytań do serwera i sterowanie
naszą stroną, w taki sposób, żeby zawsze wyświetlała to, co potrzeba na danym
route'cie. Jednak, jeśli jesteśmy już na serwerze. Jeśli nasza strona jest wydeploy'owana i
wejdziemy sobie do Articles, co to... to, co prawda, nasza strona zostanie
wyrenderowana, ale w momencie, jeśli odświeżymy naszą stronę, to do
serwera nie pójdzie zapytanie z naszej aplikacji, tylko pójdzie
zapytanie z tego miejsca i wtedy na to nie mamy żadnego wpływu. React Router
nie może tego zatrzymać. Jeśli odświeżymy teraz stronę i nasz
serwer jest nie skonfigurowany poprawnie, to na tym route'cie dostaniemy
404, ponieważ taki plik nie istnieje. Articles.html
nie istnieje, dlatego zawsze po stronie serwera musi
istnieć jeszcze dodatkowa konfiguracja. I w przypadku netlify jest to bardzo proste, na
szczęście. Wystarczy, że dodamy jeden plik i jedną linijkę. W folderze
public, czyli w folderze, który zawsze zostanie włączony do naszego build'a.
Niezależnie, co tam wrzucimy, musimy wpisać plik redirects. Redirects z podkreślnikiem
na początku i bez żadnego rozszerzenia. I w takim pustym
pliku, musimy powiedzieć - słuchaj netlify, jeśli jakikolwiek request,
jakikolwiek tutaj oznacza gwiazdka, gwiazdka. Jest takim znacznikiem
uniwersalnym. Cokolwiek tu wpiszemy, to ty masz zaserwować
index.html i zawsze z kodem 200. Co
to znaczy? Jeśli jakikolwiek request się pojawi, coś po slash'u
napiszemy, to ty zawsze mi podaj index.html, a kod 200
oznacza, że wszystko jest w porządku. Że ten plik istnieje, że zapytanie
zostało zwrócone poprawnie. Jeśli już to zapiszemy, to
musimy ponownie zbudować naszą aplikację i
ponownie ją wydeploy'ować za
pomocą netlify deploy. Oczywiście
wskazujemy na build, a następnie na netlify deploy prod. I kiedy
nasza strona już powstanie, wejdziemy sobie na nią. Wejdziemy
na Articles i teraz po odświeżeniu, powinniśmy nadal mieć naszą
aplikację. Super, nasze route'y
działają tak, jak trzeba, więc skoro udało
nam się już naprawić ten palący problem, to można powiedzieć o
kilku jeszcze takich niedociągnięciach, które moglibyśmy tutaj poprawić. Przede
wszystkim, nasza aplikacja, no, jest taka goła, trochę pusta, niewesoła,
mimo wszystko. Mimo tych wielogodzinnych starań, nadal
jej wygląd pozostawia wiele do życzenia. Więc tutaj akurat
mogę pozostawić ciebie z tym problemem i możesz go rozwiązać, po prostu, rozwijając
dalej te aplikację i bawiąc się dobrze. Problem
kolejny jest taki, że nawet jeśli dodamy sobie coś w tym
miejscu, cokolwiek to będzie, to
po odświeżeniu strony, te dane znikną. Więc na pewno to, czego
tutaj brakuje, to jakiejś zewnętrznej bazy danych, gdzie moglibyśmy wysyłać
i zapisywać nasze dane, a następnie pobierać je w takiej właśnie zapisanej
postaci, żeby ten stan aplikacji, mógł zawsze istnieć
i zawsze moglibyśmy pobrać te nasze notatki, skądkolwiek, na jakimkolwiek
urządzeniu. Z drugiej strony czasami
mogą być takie notatki, w których, po prostu, nie chcemy już dłużej i nawet
jeśli zapiszemy to w bazie danych, to nie mamy na dany moment, żadnej
opcji, żeby usunąć te notatki. Więc to, na pewno, byłby taki kolejny problem,
który moglibyśmy rozwiązać. No i trzecim problemem jest to, że mimo
wszystko nadal wykorzystujemy Context API, który można powiedzieć, że
jest takim dość prymitywnym zastępstwem dla store'a, bo store
udostępnia nam dużo więcej możliwości i zdecydowanie na dalszych
etapach rozwijania tej aplikacji, on by się przydał. No i jest jeszcze taki jeden, ostatni
problem, który widzę tak gołym i który chciałbym wymienić. Nie mamy żadnej
walidacji naszego formularza, co prawda mamy tutaj pola
wymagane. Nie możemy dodać tego, jeśli nie wypełniamy tych wymaganych pól, ale przede
jest to walidacja, taka natywna, przeglądarkowa. Ona jest bardzo
nieładna. Moglibyśmy zrobić coś, żeby to wyglądało lepiej, ale to również
wymaga pewnych integracji, zewnętrznych bibliotek. Może nie
jest to konieczne, ale rzadko się to robi, bez użycia jakiegoś react-final-form'a
albo Formik'a. I to tyle, jeśli chodzi o takie
problemy, które widzę w obecnym kształcie naszej aplikacji, a tym
samym chciałbym Cię zaprosić na kolejny kurs, w którym opowiem właśnie, jak
rozwiązywać te problemy. Podczas tego kursu stworzymy dużo bardziej skomplikowaną
aplikację. Dużo bardziej rozbudowaną, gdzie właśnie będziemy odpytywać bazę
danych, zapisywać w niej dane. Będziemy łączyć się z zewnętrznymi API. B
ędziemy walidować nasze formularze, będziemy używać w końcu store'a, którego
trzeba się nauczyć, mimo wszystko, jeśli korzystamy z React'a. A tym
samym chciałbym Ci podziękować za ukończenie tego kursu. Jest to taki pierwszy krok, na
drodze do ogarnięcia React'a. Mam nadzieję, że po tym kursie, rozumiesz
bardzo dobrze podstawy, wiesz jak działa React, jak działają komponenty,
jak tego wszystkiego używać i przede wszystkim wiesz jak robić to samodzielnie
i tworzyć własne aplikacje. Natomiast pamiętaj, że jest to
dopiero pierwszy etap i przed nami jeszcze dużo pracy, dlatego już teraz zapraszam Cię
na kurs kolejny, w którym czeka nas jeszcze więcej pracy i jeszcze
więcej fajnych przygód z kodem i z React'em. Także, jeszcze
raz, wielkie dzięki i do zobaczenia w następnym kursie. Cześć!