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 mamy już działający modal, który otwiera się i zamyka, kiedy tego chcemy, to
w końcu, możemy przejść do momentu, chyba najbardziej ekscytującego w tym
dziale, a mianowicie - zmieniania state'u naszego formularza,
w zależności od tego, którą opcję wybierzemy. Będziemy tutaj mieli trzy radio button'y
i to one będą decydować o tym, jakie pole zostaną wyświetlone w
naszym formularzu, a także, jaka notatka, jaki rodzaj
notatki zostanie dodany do poszczególnych kategorii naszej aplikacji. Więc,
teraz przejdziemy sobie naszego komponentu form i zaczniemy tutaj
trochę psuć. Przede wszystkim,
nasz komponent musi mieć jakiś stan, musi wiedzieć, co z nim dzieje, Dlatego zmienimy
go na klasę. Wytniemy
sobie wszystko, co zwracaliśmy z naszego JSX'a. Stworzymy
funkcję render, a w niej zwrócimy wszystkie te elementy. Oczywiście
mamy błąd, ponieważ submit function musi mieć teraz prefiks this.props,
żeby mieć do niej dostęp. Okej,
nasz formularz działa. Zrobimy tylko jeszcze jedną rzecz, żebyśmy nie musieli za każdym
razem, kiedy odświeży nam się aplikacja, resetować naszego modala i odpalać go
nowo. To niech ma domyślną wartość true, wtedy będzie
otwarty za każdym razem, kiedy odświeżymy naszą aplikacje. Będzie nam się łatwiej na nim pracować
i zawsze w takich sytuacjach, lubię najpierw definiować sobie,
co my właściwie chcemy tutaj zrobić, a chcemy mieć trzy opcje i te
trzy opcje będą wybierane na podstawie tego, który radio
button klikniemy. Więc teraz tutaj w state'cie stworzymy sobie takie coś jak activeOption. I teoretycznie
powinien to być string, ale z doświadczenia wiem, że kiedy
mamy coś, co się zmienia i określa to jakiś typ, czyli
tutaj mielibyśmy na przykład twitter, article i note, to tego typu opcje
często są bardzo podatne na błędy, bo jeśli wszędzie, w każdym miejscu aplikacji
programista miałby wpisać string'a, to prawdopodobnie, w którymś string'ów
zapomni jakiejś litery albo zrobi jakiś, jakąś literówkę. Dlatego
bezpieczniej jest zdefiniować consta z typami, gdzie
zrobimy coś takiego, twitter. Zapytasz
pewnie, co to ogóle nam zmienia. Przecież i tak zwracamy tutaj string'a
z tym samym, co napisaliśmy tutaj, tylko że tym momencie, jeśli zrobimy type.twitter,
to dostaniemy od razu błąd, że nasza zmienna nazywa
się types, więc każdy błąd, każda literówka naszej
zmiennej, teoretycznie spowoduje, że coś nam się tutaj zepsuje.
Okej, teraz tworzymy właśnie nasze radio
button'y. Będą to zwykłe input'y. Jako id
podamy types.twitter dla pierwszego. Typem
oczywiście będzie radio i teraz
pierwsza rzecz, którą chcemy zrobić, to onChange i tutaj podamy
funkcje, która będzie odpowiedzialna za zmianę
naszego state'u. Będzie
się nazywać handleRadioButtonChange
i będzie przyjmować jakiś typ, a następnie
odwoływać się do naszego setState, activeOption,
ustawiając właśnie na ten typ i teraz
nie możemy po prostu zrobić this.handleRadioButtonChange
i podać tutaj, na przykład naszego typu w ten sposób, ponieważ, jak
pamiętasz, nawiasy zawsze oznaczają wywołanie funkcji w danym momencie. Dlatego
musimy stworzyć tutaj funkcję, która
zwracać będzie funkcję. Jak sobie rozciągniemy trochę nasze okno. Teraz
to widać. W ten sposób, możemy stworzyć funkcję, do której
możemy podać jakiś typ, podczas jej wywołania, nie wywołując jej od razu, ponieważ
tworzymy tutaj, definiujemy tutaj, tak naprawdę funkcję, która
dopiero jak zostanie wywołanea, zwróci nam te funkcje, czyli tak jak chcemy. Musimy
tutaj stworzyć jeszcze jedną rzecz, a mianowicie checked, czyli
właściwość, która decyduje o tym, kiedy nasz radio button będzie zaznaczony. Tutaj
możemy stworzyć zwykły warunek this.state.activeOption,
jest taki sam jak types.twitter. I jak
widzisz, nasza opcja jest zaznaczona. Teraz stworzymy trzy pozostałe, article i note. Pod
każdym dodamy jeszcze label i nasze
checkbox'y i powinny działać, ale nie działają, czyli coś zepsułem. Spójrzmy
na kod. Okej, onChange oczywiście
musi być napisane Camel Case'm. Teraz,
jak widzisz, nasze checkbox'y działają i żeby jeszcze to trochę
urozmaicić, to zrobimy jedną rzecz, bo jak widzisz, nasz opis
w modalu na razie jest przeznaczony tylko dla Twitter'ów, więc teraz
stworzymy sobie jeszcze const descriptions i dla każdego z
typów, stworzymy inny tytuł. Tutaj
damy favourite Twitter account. Tutaj
dodam, po prostu, Article i Note. I teraz
biorąc pod uwagę, że oba te obiekty mają takie same klucze, to możemy
zrobić coś takiego - Add new, tutaj
wstawiamy descriptions i dostaniemy
się do odpowiedniego klucza, w taki sposób, podając
tutaj this.state.activeOption, czyli
jeśli naszym activeOption jest Twitter. W taki sposób
napisany, to on będzie, po prostu, kluczem, który tutaj
wykorzystamy. A nasz klucz, w tym miejscu, nazywa się Twitter, więc
teraz jak zmienimy nasze radio button'y, to
zmienia też opis. Delikatnie rozjechał nam się styl w naszym modalu,
więc jeszcze tutaj szybko to poprawimy. Usuniemy height, dodamy
50 pikseli od dołu paddingu. Okej,
podobnie jak przypadku tego button'a, stylowanie
naszych radio button'ów pozostawiam tobie. W następnej lekcji one będą już gotowe
z mojej strony, więc jeśli chcesz, możesz wykorzystać mój kod, powiązany
z następną lekcją. A dodatkowo w następnej lekcji zajmiemy się warunkowym
renderowaniem pewnych pól naszego form'a tak, żeby tylko te odpowiednie
dla danej kategorii wyświetlały się w momencie kiedy poszczególne opcje są zaznaczone. Do
zobaczenia w następnej lekcji.