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ę opanować naszą nawigację. Zmienia ona
klasy, w zależności od tego, która strona jest aktywna. Robimy to dla
przypomnienia, tylko powiem, poprzez props'a activeClassName, które
właśnie dodaje odpowiednią klasę, w momencie, kiedy nasza ścieżka odpowiada temu,
do czego prowadzi dany link, czyli na przykład, jeśli jesteśmy na ścieżce artykuł,
to link, który kieruje właśnie do articles, będzie miał aktywną
klasę. Pamiętaj też, że tego props'a może dostać tylko i wyłącznie NavLink,
a nie link, ponieważ to NavLink służy do wykorzystywania go w nawigacji,
ale to tak gwoli przypomnienia. A teraz przechodzimy do tworzenia nowego
komponentu, który nazwiemy header i biorąc pod uwagę, że Navigation
jest komponentem, który będzie wykorzystywany tylko i wyłącznie w tym header'ze, to
możemy tutaj dokonać małego refaktoringu i folder z Navigation zmienimy
na Header, a nasz komponent Navigation,
zmienimy na HeaderNavigation. Zmienimy jeszcze tylko
nazwę komponentu i eksportu
oraz
nazwę naszego pliku ze stylami. Teraz
możemy dodać nowy plik - Header.js,
w którym zaimportujemy sobie React'a, a także
HeaderNavigation. Dodatkowo
stworzymy sobie od razu styl, w pliku Header.module.css. Zaimportujemy
go w postaci styles i teraz
nie pozostaje nam nic innego, jak stworzenie komponentu i wyeksportowanie
go, żebyśmy mogli go wykorzystać w root'owym
widoku. Tylko coś tutaj na razie wrzucimy. Powiedzmy, że to będzie div, a wewnątrz
nasze HeaderNavigation. Oczywiście,
nasza aplikacja zaczęła się buntować, bo naszym root'owym widoku, mamy zupełnie
co innego zaimportowanego, więc teraz to zmienimy - importujemy Header
from... Następnie podmienimy nasze
Navigation, w JSX'ie, na Header. Mamy
jeszcze jakiś mały problem z importem
naszego stylu, tutaj, w tym miejscu. Nie zmieniliśmy
nazwy pliku, okej. Nasz header działa z powrotem.
Więc teraz możemy przejść sobie tutaj i zacząć stylować nasz header. Pierwsze
co zrobimy, to dodamy logo. Logo możemy dodać z naszego folderu assets. Tutaj
mamy logo.svg. Zaimportujemy je teraz ten
sposób. Pliki
svg możemy importować podobnie jak pliki PNG czy JPG, które
importowaliśmy już na początku tego kursu i teraz możemy go wykorzystać, w
taki sposób. Jak widzisz,
nasze logo zostało dodane. Oczywiście musimy coś zrobić ze stylami, jeszcze w tym komponencie,
ale zanim to zrobimy, dodamy jeszcze button, który również będziemy
potrzebować. I zaimportujemy go tutaj, pod React'em. Button
będzie na końcu naszego komponentu i tutaj
będzie napis new item. Okej,
nasz header jeszcze w niczym nie przypomina tego, do czego dążymy, ale za chwilkę się to
zmieni. Może, żeby było bardziej semantycznie zmienimy tutaj tego div'a na
header. Nadajmy mu klasę, zgodnie
konwencją nazwiemy go wrapper. Tutaj
jeszcze jedna ciekawa rzecz, nasz edytor kodu podpowiada, że każdy
element IMG powinien mieć jakiś alt text. Jeśli
to jest coś znaczącego, jeśli ten obrazek ma coś znaczyć. A jeśli
jest tylko taki dekoracyjny, to wystarczy, że zostawimy pustego string'a. W
tym momencie, możemy tutaj wpisać nazwę naszej aplikacji i dodać
logo, żeby było wiadomo do czego to służy. Okej,
teraz przejdźmy do naszego pliku ze stylami. Weźmy nasz wrapper i tutaj
też dodajmy grida. Zadeklarujmy,
że będziemy mieć tutaj w grid-template i trzy
kolumny - pierwsza kolumna będzie miała 120 pikseli, druga
będzie miała, po prostu, pełną szerokość, jaką tylko może wykorzystać
i kolumna z button'em będzie miała 100 pikseli. Zobaczymy,
jak nam to wyjdzie. Najwyżej później będziemy zmieniać. Teraz,
jeśli tylko zrobimy tutaj align-items, to
nam się to wyrówna na osi y i niepotrzebnie chyba
daliśmy do naszej nawigacji grida. Weźmy to wyrzućmy, tutaj,
w ogóle, ten wrapper, to będzie nam niepotrzebne. Nasze linki się teraz
wysypią i zrobi nam się z powrotem lista, ale jak tutaj dodamy display;
inline-block, to się wyświetlą w jednej linijce. Nie
będą mieli... nie będą miały żadnego marginesu, ale tutaj, teraz dodamy
z prawej 50 pikseli - powinno być spoko. Super,
wygląda to całkiem fajnie. Wróćmy
do naszego header'a i dodajmy mu jeszcze padding. Z góry,
niech to będzie 30, po bokach, niech to będzie 40 pikseli. Jeśli
porównamy sobie to z naszym designem, to jesteśmy już bardzo blisko. Musimy
jeszcze tylko zmienić nasz guzik, żeby był z odwracanymi kolorami. Całkiem
prosto możemy to zrobić, wrócimy na chwilę do buttton'u i w naszym button'ie
będziemy musieli zrobić jedną rzecz - dodamy tutaj props'a
secondary. To jest też taka konwencja, że jeśli
mam jakiś button, który wygląda w jeden sposób, ale zdarza się, że ten sam button ma
odwrócone kolory albo jakieś inne kolory, to wtedy możemy go nazwać po prostu
secondary i nasze secondary będzie boolean, czyli będzie albo true albo
false i na jego podstawie będziemy zmieniać klasę, ale z
racji, że mamy tutaj dwa przypadki,gdzie dodajemy tę samą klasę, to możemy
zrobić po prostu wspólną zmienną, którą wstawimy w to miejsce, żeby dwa nie wrzucać
ternary operator do naszego className. Tutaj zwrócimy
sobie naszego JSX'a. Stworzymy
teraz consta buttonClass. Jeśli
secondary jest obecny, wtedy
będzie to styles.secondary, a jeśli nie to
zwykły button. Teraz w
naszym className, zamiast
styles.button, możemy wpisać buttonClass i ta zmienna
nam wtedy obsługuje to, która klasa ma się dodać do naszego
button'a Coś tutaj zepsułem. Tylko buttonClass niedomknięta klamra,
okej. Wejdźmy do naszego pliku ze
stylami. Dodajmy
secondary. Możemy tutaj zrobić extend, czyli funkcja, która
rozszerza nam tę klasę - pobiera z niej wszystkie wartości i następnie
doda coś od siebie. I my
tutaj zrobimy sobie background-color, taki jak miał kolor border. Kolor
tekstu będzie biały. Sprawdźmy,
czy to nam zadziała w naszym headerze. Tutaj, jeśli dodamy secondary, to powinno
się wydarzyć to, co myślimy, czyli podmienią nam się kolory. Super, nasz
button działa i wygląda teraz tak, jak powinien. Kiedyś
przywrócimy naszą listę z powrotem, tutaj z Twitter'ami, to zobaczymy, że ten stary
button wygląda tak, jak wcześniej. Dzięki temu procesowi, możemy łatwy sposób wpływać
na to, jak ma wyglądać nasz baton, bez żadnego dodawania klasy - już tutaj nie
miałoby to zresztą sensu, skoro React nam udostępnia takie fajne narzędzia. A skoro byliśmy
już na chwilę w button'ie, to chciałbym odpowiedzieć na pytanie, które może pojawiły się twojej
głowie. Dlaczego button nie ma żadnych PropTypes? Z bardzo
prostego powodu - jest to kurs i pomijamy pewne elementy, żeby
nie tworzyć idealnie skonstruowanej aplikacji, tylko tworzymy taką aplikację,
która pozwoli nam wyjaśnić główne założenia React'a, niekoniecznie
wypełniając każde założenie, w każdym komponencie. Dobrze wiemy, że button
powinien mieć PropTypes'y, takie href, czy secondary, ale tego typu ćwiczenia
zostawiam Tobie i bardzo fajnie, jeśli zrobisz to na własną rękę. Natomiast umówmy
się, że w tym kursie nie będziemy, w każdym komponencie, dodawać tych PropTypes, ponieważ bardzo
dużo czasu na tym byśmy spędzili. Okej, skoro to już to sobie wyjaśniliśmy, to
wydaje mi się, że nasz header, w tym momencie, możemy zostawić już taki, jaki mamy.
Spójrzmy jeszcze na chwilę, porównajmy z tym. Tutaj widzę, że mamy lekko
zaburzenia proporcje, logo mogłoby być trochę większe i button też, ale
to zostawiam Tobie w ramach ćwiczenia. Ja zrobię to samo. Także od
następnej lekcji, zaczniemy już z poprawnie wykonanym header'em, z poprawnymi
wielkościami naszych elementów. Do zobaczenia w następnej lekcji.