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ść! Witaj w kolejnym rozdziale tego kursu. Masz przed sobą właśnie widok,
który zaprogramowaliśmy podczas naszych ostatnich lekcji i teraz
przyszła pora na to, żeby te aplikacje jeszcze trochę bardziej rozwinąć i tak z każdym
krokiem w tym kursie, będziemy rozwijać ją coraz, coraz bardziej. Będziemy dodawać kolejne
funkcje, kolejne możliwości, które pozwolą nam stworzyć już taką
prawdziwą aplikacje React'ową. Taką z prawdziwego zdarzenia, więc
to co zrobimy w tym dziale, to możliwość dodawania kolejnych
osób, właściwie ręcznie, przez użytkownika. Bez konieczności
modyfikowania jakiegokolwiek kodu. A więc to, co
wyglądało tak, będzie od teraz wyglądać tak. Po
prawej stronie pojawi nam się formularz, dzięki któremu będziemy mogli dodawać kolejne
item'y, kolejne elementy naszej listy. I mamy tutaj miejsce
na imię czy też tytuł, na link do Twittera,
na link do jakiegoś obrazka, który będziemy mogli sobie załączyć oraz
na jakiś krótki opis. Po wypełnieniu
tego wszystkiego, użytkownik kliknie add new item, to ten nowy item pojawi
się właśnie w tym miejscu, na dole. Ale, żeby tego wszystkiego dokonać, to będziemy
musieli się nauczyć kolejnego takiego podstawowego terminu
związanego z React'em. Takiego podstawowego pojęcia, jakim są Stateful Components. Tak
zwane komponenty klasowe, ponieważ wykorzystują one notację klasy
znanej z ES6. Jeśli nie wiesz czym są klasy ES6, to
nie bój się, za chwilkę cię przez to przeprowadzę w takim super skrócie, ponieważ
nie jest kurs o JavaScript'cie. Natomiast, uważam że w kontekście React'a
warto o tym wspomnieć. Więc przejdźmy teraz do naszej aplikacji, czy
też do widoku, który zakodowaliśmy. Mamy już tutaj odpalony yarn start,
na drugim wątku naszego terminala. Jeśli nie pamiętasz
jak to robiliśmy, to wpisujemy po prostu yarn start i to wszystko. I nasz
widok wygląda dokładnie tak, jak go zostawiliśmy. Wszystko jest na swoim miejscu. Nasze
komponenty się nie zmieniły w żaden sposób. Natomiast, żeby dodać te
funkcje, o których przed chwilą mówiłem, trzeba będzie trochę przeremontować naszą
aplikację, ale zanim to wszystko zrobimy, pokażę Ci, jak tworzyć
taki bardzo podstawowy komponent klasowy, czy też Stateful Component,
ponieważ o to wszystko się tutaj rozchodzi. Stworzyłem więc sobie komponent,
którego później nie wykorzystamy może jakoś bezpośrednio, ale on pozwoli nam
w łatwy zrozumieć, jak to właściwie działa i po co to się tworzy. Stworzymy
więc w folderze components, folder MyComponent, gdzie
wrzucimy plik MyComponent.js. Zaimportujemy React'a. I
teraz w odróżnieniu od
tego, jak stworzyliśmy komponenty funkcyjne, czyli const i nazwa
komponentu - robimy teraz class, ponieważ jest to komponent klasowy,
więc wykorzystują notację klas z ES6. Tworzymy MyComponent
extends React.Component. Te
kwestię z extends component zaraz wyjaśnię, ponieważ
wymaga ona trochę szerszego wyjaśnienia. Natomiast, tak
wygląda podstawowa składnia klasowego komponentu i teraz, żeby
cokolwiek z niego zwrócić, żeby cokolwiek wyrenderować do widoku. Musimy
wykorzystać funkcję render, która jest wbudowana w React.Component, a
następnie zwrócić z niej jakiś JSX. Załóżmy, że to
będzie zwykłe Hello World. Następnie
eksportujemy nasz komponent i wejdziemy
sobie teraz do widoku App.js. Czyli naszego głównego widoku i
tutaj wrzucimy MyComponent. Jak
widzisz Visual Studio Code zaimportował to sobie bez problemu. Ten plik także. Nie
musimy już tego robić. On zrobił to za nas i nasz komponent
został poprawnie zaimportowany i wyrenderowany w naszej aplikacji, więc
tak to działa. Ale pewnie teraz zastanawiasz się, po co właściwie to robimy. Przecież
nic tutaj się nie różni od takiego zwykłego funkcyjnego komponentu, który robiliśmy
już wcześniej. No i w tym właśnie sedno sprawy, ale to opowiem ci już w następnej
lekcji.