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 poprzedniej lekcji udało nam się stworzyć w pełni działający controlled
input. Jednak chciałbym Ci pokazać, takie dwie rzeczy, na które możesz wpaść gdzieś
w przyszłości, w prawdziwym kodzie. W może nieco starszym kodzie, ponieważ
to jak my teraz stworzyliśmy ten komponent, wynika z nowego zapisu w
React'cie Create React App wykorzystuje to bezpośrednio,
od razu jest wbudowane i wykorzystuje to, tak zwane proposal
do nowej składni JavaScript'u, ale o tym za chwilkę. Chciałbym ci pokazać, jak
wyglądało wcześniej konstruowanie komponentów. Pierwszą rzeczą z którą możesz
się spotkać, to wykorzystanie konstruktora w naszym komponencie. Wynika
to z tego, że nasza klasa extend'uje inną klasę React.Component i
żeby ten React.Component działał poprawnie, musieliśmy wywołać
jego konstruktor, a żeby wywołać w konstruktorze, konstruktor klasy
extend'owanej, musieliśmy wykorzystać funkcję super, więc
jeśli tworzono konstruktor, w którym podawano props'y.
Props'y to oczywiście, to były props'y podawane do naszego komponentu, to
następnie uruchamiano też konstruktor klasy
React.Component, w którym te props'y były podawane. To gwarantowało
poprawne działanie naszego komponentu. I dopiero tutaj, w konstruktorze,
tworzono this.state. Jak
widzisz, nasz komponent działa dokładnie tak samo. Proposal
Dan'owej składni JavaScript'u, o którym mówię nazywa się class-properties. Możemy
zobaczyć, na przykład, stronie Babel'a, co ona zmienia, co ona wnosi i jak ją zainstalować do
naszego projektu. My tego robić nie musimy, ponieważ ten plugin jest
już zainstalowany w Create React App, więc nie musimy się tym martwić. My właśnie tę
paczkę wykorzystujemy do otworzenia naszej aplikacji. Natomiast mówi
ona o tym, że jeśli nie odpisujemy tego konstruktora żaden sposób, to tak naprawdę,
nie ma potrzeby, żeby tworzyć tutaj całą tą dziwną składnie. Wystarczy,
że zadeklarujemy zwykły state i on
również będzie działał. W tym kursie nie będziemy wchodzić w jakieś takie
głębsze meandry tego, jak działają klasy i konstruktory, ponieważ
jeśli nie jest to dla ciebie do końca jasne, to warto zobaczyć sobie jakiś kurs
JavaScript'u, w którym te kwestie będą nieco lepiej wyjaśnione. Wrócimy
na chwilę konstruktora, ponieważ drugą rzeczą, z którą możesz się
spotkać, to inny zapis metod w naszej klasie. Wygląda
on tak. Jest on, po prostu, odzwierciedleniem funkcji
deklarowanej w ten sposób. Tutaj po prostu nie musimy używać słowa function. Problem
jednak, jaki pojawia się w tym momencie, to to, że takie zwykłe funkcje nie
mają, tak zwanego, leksykon this, czyli to this, odnosi się do zupełnie
innego this, niż w funkcji strzałkowej, ponieważ funkcja strzałkowa zachowuje
referencje do this, dokładnie taką jaką miała w momencie zapisania
tej funkcji, czyli jeśli na tej linijce mieliśmy this odnoszące
się do naszej klasy, to w funkcji strzałkowej to this, pozostanie właśnie takie samo.
Natomiast w tym miejscu, jeśli wylogujemy sobie this, to w
naszej konsoli, przy wywołaniu event'u, dostaniemy undefined i
błąd. Dlatego to this musiało być dodatkowo
zbindowane, w naszej naszym konstruktorze, tak żeby ta
funkcja wiedziała czym jest nasze this. Więc tutaj trzeba było robić jeszcze coś
takiego i wtedy
mieliśmy pewność, że nasza this będzie działać poprawnie. Natomiast wyobraź
sobie, że takich funkcji mieliśmy na przykład 20 w naszym komponencie, w naszej klasie i
wtedy tych bindingów było też 20, więc
było to naprawdę skomplikowane. Było to łatwo zepsuć i łatwo
zapomnieć o którejś z funkcji, dlatego dobrą praktyką jest po prostu stosowanie
funkcji strzałkowych, a dodatkowo teraz -
przy wykorzystaniu class-properties, możemy zapomnieć o konstruktorze. Przynajmniej w
większości przypadków. Nasza Klasa znowu działa poprawnie. Mamy
już nowy zapis. Możemy zapomnieć o tamtym starym. Po prostu chciałem zwrócić
na to twoją uwagę, ponieważ nadal można spotkać się z tym starym zapisem. Zarówno
w jakichś projektach, jak i w kursach, więc warto wiedzieć do czego to
służyło i dlaczego tak to się zapisywało. A teraz, skoro już wiem jak tworzyć
klasy, jak zmieniać state, jak tworzyć metody, funkcję w naszej
klasie, to w końcu możemy przejść do prawdziwej aplikacji - do tworzenia
prawdziwego state'u w naszym komponencie, który będzie pozwalał na
dodawanie nowych elementów naszej listy. Zapraszam do kolejnej lekcji.