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ść! Nasz mechanizm dodawania nowych notatek do state'u już działa
i pewnie, jak pamiętasz, to działa już ta lista, która wyświetla
nam notatki. Tylko, że do tej pory, ona wyświetlała tylko i wyłącznie twitter'y,
więc to, co musimy zrobić w tej lekcji, to dopasować ją
poprzez renderowanie warunkowe tak, żeby wyświetlała każdy rodzaj
notatki, w odpowiedni sposób. Przypomnę, twitter'y będą miały zdjęcie,
tytuł, opis i link do konta na Twitterze. Artykuły
będą miały tytuł, link i opis, a notatki
będą miały tylko tytuł i opis. Więc teraz przejdziemy
sobie do naszej listy.Sprawdzimy,
co tam mieliśmy w PropTypes. Teraz, na podstawie tego,
co powiedziałem przed chwilą, wiemy że dwiema
rzeczami, które będą na pewno wymagane, jest description i
name - name teraz zmieniamy na title. Musimy
je wszędzie zmienić, natomiast twitterLink
i image nie będzie wymagane, twitterLink też zmieniamy na link. Okej, i
teraz nasze props'y mają odpowiednie nazwy, mają odpowiednie
ustawienia i teraz to, co jeszcze musimy dodać, to wartość
dla nie wymaganych pól. Zróbmy, po prostu po null'u. Jeśli
ich nie będzie, to to będzie null i teraz jak już pewnie pamiętasz, żeby
zrobić renderowanie warunkowe, odpalamy klamry. Jeśli
mamy obrazek, to mamy też nasz
tag. Przypominam,
że jeśli nie robimy ternary operator, czyli czegoś, tak jak tutaj, że mamy znak
zapytania i dwukropek, czyli dwie opcje - na tak albo na nie. Jeśli,
po prostu, sprawdzamy, czy coś istnieje i jeśli istnieje, to ma się wyświetlić, to
robimy dwa ampersand. Jak to się nazywa po polsku? Ciekawe. Znaki
and. W każdym razie, takie rozwiązanie będzie działać. Tytuł
mamy zawsze, więc o to się nie martwimy. Description
mamy też zawsze. W przypadku button'a również zastosujemy
renderowanie warunkowe. Okej, link
i obrazek mają renderowanie warunkowe. Natomiast tytuł i opis będą
zawsze, więc one tego nie potrzebują. Teraz nie pozostaje nam innego, jak przetestować
nasze widoki w boju. To, co musimy zrobić, to do każdego widoku,
czyli do ArticlesView, NotesView i TwittersView dodać listę,
do której podamy props'y, a te props'y będziemy zaciągać z naszego
context'u. Żeby już wykorzystać ten nasz context na maksa. Więc
teraz zaimportujemy sobie w pierwszym komponencie List.
Sprawdźmy jak on przyjmował te props'y. Po
prostu, jako tablice, więc to, co teraz zrobimy, żeby sprawdzić
czy ten context będzie działał. Czy te rzeczy się teleportują do tego widoku, to
zaimportujemy sobie AppContext i tak jak robiliśmy to wcześniej,
stworzymy Consumer. Otworzymy
nasze wrota do portalu i
zwrócimy
listę, gdzie
podamy items, context.article. Sprawdźmy,
czy tak na pewno wygląda ten obiekt - context,
do context'u podajemy state, a w state'cie
mamy article i to jest tablica z naszymi artykułami. Teoretycznie
powinno działać. Jak wejdziemy
sobie na Article, to faktycznie zniknęło to, co mieliśmy wcześniej,
więc aplikacja się zaktualizowała i teraz jeśli jesteśmy na tym
widoku i dodamy jakiś artykuł, to teoretycznie powinniśmy zobaczyć go
w tym miejscu. Uwaga,
chwila prawdy. I nasz
artykuł się dodał. Co prawda, guzik wygląda, jakoś dziwniem ale
to jest tylko mały szczegół. Artykuły dodają się
do naszego widoku, ale
radość! Zróbmy
teraz to wszystko dla pozostałych kategorii. Najłatwiej będzie, jak skopiujemy
sobie po prostu cały ten widok i przekleimy go do
reszty. Tutaj zmienia się tak naprawdę to
i wartość w naszym
context'cie. Note, jeszcze twitter. Pamiętaj,
że to jest liczba pojedyncza. Usuńmy z
naszego widoku Hello World. A dodatkowo,
w naszej liście, zróbmy jeszcze tak że, jeśli nie ma nic, jeśli
jest to, po prostu, pusta lista i nie ma nic do wyświetlenia, to
wyświetli mi jakiś fajny komunikat - na zasadzie "Dodaj swoją pierwszą notatkę." Oczywiście
możemy zrobić to bardzo prosto. W ogóle ulepszmy trochę ten komponent. Zdestrukturyzujmy
tutaj items. Wtedy te props'y już nie są tutaj potrzebne. Wrzućmy
to wszystko we fragment. Otwieramy
klamry. Jeśli itmes ma długość, to
wtedy wyświetlimy sobie to, co mamy w naszej liście. Natomiast,
jeśli nie ma, to wyświetlimy... Okej,
coś zepsułem. Fragment nam się nie domknął, ale
wielki brzydki napis. Wejdźmy
jeszcze do List.module.scss i ostylujmy go. Okej,
komunikat dodany. Teraz, jeśli coś dodamy, w Articles,
bo tutaj nam odpala nasz widok, to to zniknie. Jeśli przejdziemy do innej
sekcji, to to nadal będzie, super. W następnej lekcji zrobimy
tylko coś, żeby troszkę poprawić wygląd tych notatek. Odstęp
za nim jest duży i ten button czasami nam się psuje. Postaram się to zdebugować
i to będzie chyba ostatni krok na drodze do
wydeploy'owania naszej aplikacji.