React: Pobieranie danych od komponentów dzieci
od Podstaw
4 godz. 55 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorCzego się nauczysz
- Doglebne wyjasnienie zasad rzadzacych Reactem
- Stworzenie aplikacji wykorzystujacej potencjal Reacta
- Wykorzystanie React Router i jego komponentów w praktyce
- Przygotowanie do pracy w nowych projektach i z legacy code
- Stworzenie struktury aplikacji w oparciu o najlepsze praktyki
- Rozwiazania pochodzace z prawdziwej pracy nad wieloma projektami
Wszystkie 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.
Twoje pierwsze kroki w React
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.
Witaj w swiecie komponentów
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.
Komponenty z klasa
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.
Wytyczamy nowe sciezki
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.
Odkryj potencjal Reacta
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.
Dlaczego wybrac wlasnie ten kurs?
- Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, bys caly czas mógl go sledzic z zainteresowaniem i zaangazowaniem, a takze czerpac satysfakcje ze zdobytej wiedzy!
- Wiedza, która otrzymujesz w tym kursie, to nie tylko sucha teoria, ale równiez wskazówki od praktyka z wieloletnim doswiadczeniem, dzieki którym duzo latwiej bedzie Ci opanowac material.
- Uczysz sie na praktycznych przykladach. Kurs, który masz przed soba to esencja praktycznej wiedzy i doswiadczenia a takze wzorów, które oszczedza Ci godziny pracy i poszukiwan.
Dla kogo jest ten kurs?
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 zajęliśmy się przerobieniem
naszego App.js na klasowy komponent i teraz mamy tutaj inicjalny state,
inicjalny stan naszych elementów listy, które są wyświetlane dalej
w ListWrapper'ze. jedyną rzeczą, którą bym to zmienił, to tak naprawdę nazwa
tej zmiennej, bo to że jest to tablica, to nie za bardzo nam coś mówi, a w
naszym stanie, ten klucz na nazywa się items, więc proponuję,
żeby zmienić tutaj na initialStateItems. Pokazuję Ci
to celowo, ponieważ chcę pokazać, że tworzenie aplikacji, to często właśnie
dywagacje na temat tego, jak coś powinno się nazywać, żeby przyszli programiści
mieli trochę łatwiej. Żeby nie musieli się domyślać, o co nam chodziło i tak dalej,
więc takie refaktorowanie nazw zmiennych, nazw constg'ów, nazw
metod - jest tak naprawdę, na porządku dziennym. Dzieje się prawie, że
codziennie, ale ma to na celu tylko i wyłącznie podniesienie jakości kodu, więc
zostawiamy tutaj ostatecznie initialStateItems i teraz już chyba wiadomo o
co chodzi. Przejdźmy zatem do tworzenia formularza. Jak
już pewnie wiesz, pierwsze co musimy zrobić, to stworzyć po prostu nowy komponent w folderze components. Nazwiemy
go, nazwiemy
go form. Nazwiemy
go form, a nasz plik będzie się nazywał form.js. Zaimportujemy React'a i stworzymy
zwykły, funkcyjny komponent, który
zwróci nam form'a. Jeszcze
tylko go wyeksportujemy. Wewnątrz form'a wsadzimy jeden
input i wrzucimy
go do naszej aplikacji, do naszego widoku. W
tym miejscu pod ListWrapper. Mój
Visual Studio Code, tym razem nie pobrał mi tego, więc muszę to zrobić sam. Okej,
nasz komponent się pojawił tym miejscu. Na razie jest bardzo mały, ale teraz
dodamy kolejne pola, co pozwoli nam w efekcie dodawać kolejne elementy naszej
listy. Przejdźmy sobie zatem do form.js. Dodamy tutaj... jeszcze
spojrzymy tylko na layout. Mam tutaj name, link, image i description,
więc teraz dodamy kolejne pola. Pamiętamy o
tym, że ostatni, czyli textarea, to jest... pamiętamy
o tym, że ostatni to jest description, czyli będzie trochę dłuższy i to będzie textarea. Dodam
jeszcze button, który
będzie miał tekst - add new item. Na
razie nie przejmujemy się wyglądem. Nie przejmujemy się tym, że to
się układa w jednej linii. Tym zajmiemy się później, na
razie to, co nas interesuje, to jakim cudem mamy przesłać od dziecka do
rodzica jakieś informacje. Wiemy, że możemy podawać props'y, ale co możemy zrobić, aby
dziecko przekazało w górę jakieś dane do rodzica? Otóż
to, co możemy zrobić i co jest kolejną bardzo ciekawą rzeczą w React'cie -
to, że możemy podawać funkcję jako props'y. A jeśli możemy podawać funkcję
jako props'y, to do tej funkcji możemy podawać później jakieś argumenty, które
przecież wrócą do rodzica. Więc stwórzmy sobie teraz rodziców, czyli w App.js,
funkcje handleAddItem albo
po prostu addItem. I funkcja
ta będzie przyjmować event, podobnie jak nasz controlled input z poprzednich lekcji.
Jedyne
co na razie chcemy wylogować to console.log(e.target.value). Musimy
jeszcze zrobić jedną rezcz, ponieważ to, co mamy tutaj, to formularz. Jeśli
zrobimy submit, to domyślnie przeglądarka przeładuje nam stronę,
więc musimy zapobiec temu domyślnemu zachowaniu przeglądarki, poprzez
użycie e.preventDefault. W ten
sposób przeglądarka nie zostanie automatycznie przeładowana, po wywołaniu eventu
submit. Teraz
te funkcje możemy podać do naszego form'a, na przykład, jako submitFn. Podajmy
tutaj nazwę this.addItem. Przejdźmy
do naszego form'a. Wyciągniemy ją sobie z props'ów
przy pomocy destrukturyzacji. Podajmy submitFn, ponieważ tak
się nazywa w tym miejscu nasz props. Następnie
do naszego form'a podajemy onSubmit, submitFn
i jeszcze jedna rzecz. Nasz button musi być typu submit. W
tym momencie, jeśli sobie odpalimy konsole i wpiszemy
jakieś wartości do
naszych pól, to
coś tam jeszcze nie zadziała. Teraz sprawdźmy, dlaczego to nie działa, a no
tak - nie działa, ponieważ chciałem tutaj wylogować tylko jedną wartość z jednego
pola, ale w tym miejscu mamy tablice, więc... ale
tym miejscu mamy tablice, ponieważ w naszym form'ie znajdują się aż cztery elementy,
więc mógłbym się do niego dostać poprzez coś takiego. I
teraz jeśli zrobimy 23, czyli
wszystkie cztery elementy wylogujemy, to
zobaczymy że wszystko znajduje się na miejscu. Wszystkie cztery
pola zostały wylogowane. Jeśli
ktoś jest ciekaw, to Fava to mój pies. Tak, więc skoro nasz formularz już zaczął
działać, wszystko loguje się poprawnie, to teraz możemy przejść do kolejnej lekcji, w
której w końcu dodamy nowy element naszej listy za pomocą
formularza, który przed chwilą stworzyliśmy.