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ść! Nasza nawigacja, dzięki
linkowi z React Router DOM, w końcu działa jak należy. Stronq nam
się nie przeładowuje, więc teraz możemy przejść do tego, żeby ostylować nasz header - żeby
stworzyć w końcu to tak, jak powinno wyglądać. Przejdziemy sobie tutaj i zobaczymy,
że mamy tutaj, tak naprawdę, trzy komponenty znajdujące się w headerze. Mamy
logo, mamy nawigację i mamy new item, czyli
nasz button, który będzie dodawał nowe elementy do poszczególnych kategorii. Pierwsze
czym zajmiemy się to oczywiście nasza nawigacja, bo ten komponent już mamy stworzony, więc
teraz przejdziemy sobie tutaj i stworzymy plik, dzięki
któremu ostylujemy naszą nawigację. Będzie
się nazywał Navigation.module.scss. Zaimportujemy
go od razu w tym miejscu. Gdzieś
zrobiłem literówkę - Navigation.
Okej, więc teraz opleciemy
sobie naszą nawigację jeszcze w znaczniki nav, żeby nikt nie
miał wątpliwości do czego służy ta sekcja. Wewnątrz ul
dodamy className, o nazwie wrapper,
a w
każdym elemencie li dodamy className, może
nazwiemy go navigationItem. Okej, przejdźmy
sobie teraz do stylów. Najpierw ostylujemy nasz wrapper. Najłatwiej
będzie, jeśli po prostu zrobimy z niego grida, czyli zrobimy display: grid i teraz
grid-template-columns: repeat. Trzy
kolumny o równych odstępach. Super, jeszcze
tylko w naszym navigationItem musimy zrobić list-style:
none i teraz jeszcze musimy ostylować te linki,
które tutaj mamy. Najłatwiej będzie przy użyciu CSS Modules. Jeśli zrobimy
coś takiego. Tylko sobie przenieśmy to na osobne linijki, żeby
nasz plik był bardziej czytelny. Teraz
w każdym linku nadamy className o nazwie styles.navigationItemLink. Nazwa
wydaje się długa, ale jak przyjdziemy sobie tutaj, to możemy przy użyciu scss'a
zrobić coś takiego - text-decoration: none i
to jest dobre miejsce, żeby wyjaśnić jak zrobiłem - navigationItem,
to jest nazwa klasy naszego rodzica, a navigationItemLink
zawiera całą tę nazwę i ma dodane tylko link. Dzięki temu w scss'ie
możemy odnieść się poprzez ampersand, dodając
tylko ten suffix, który jest na końcu tej nazwy,
czyli w tym przypadku navigationItemLink. Dzięki
temu, nie musimy pisać bardzo długich nazw klas już w samych stylach. Wystarczy,
że wpiszemy w tym miejscu, ale nie jest to też jakoś super skomplikowane. Natomiast style,
dzięki temu są dużo bardziej czytelne. Okej,
kolejną rzeczą jaką musimy zrobić, to sprawdzenie jaki to jest kolor. Akurat
łatwe do zapamiętania - 818181. Nasze
linki są wszystkie z wielkiej litery. Powinny być napisane małą literą. Okej,
powoli zbliżamy się do tego, co mamy tutaj w tym miejscu. Widzimy tylko, że aktywna
klasa, aktywne, aktywna strona, tak naprawdę, ma właśnie jakąś
dodatkową klasę, która sprawia że aktywna podstrona
ma pogrubiony link. I żeby to zrobić to zapowiadałem w
poprzedniej lekcji, że istnieje pewne ulepszenie, które możemy tutaj dodać i to jest
naprawdę świetne narzędzie, świetne rozwiązanie. Najpierw zaimportujemy
sobie inny komponent, zamiast linku, z naszego React Router DOM. Nazywa
się Navlink i jak sama nazwa wskazuje - służy do używania
go właśnie w nawigacji. Zamienimy teraz wszystkie nasze linki na NavLink'i. Póki
co, nic się nie zmieniło, ale NavLink przyjmuje dodatkowego props'a, który
bardzo nam się przyda. Zaznaczmy
sobie wszystkie NavLinki i dodajmy tutaj activeClassName. Nazwiemy
to navigationItemLink i dodamy sufiks -
Active. Dzięki temu, podobnie jak
poprzednim przykładzie, możemy dodać tutaj do naszego linku, tylko
jedną rzecz - coś takiego i teraz
tutaj możemy zrobić font-weight: 700. Sprawdźmy,
czy my importujemy taką grubość fonta. Tak,
700 działa. Ja zrobiłem
tylko tutaj literówkę. Okej i jak widzisz,
twitters nam się pogrubiło. Jak przyjdziemy do articles, to artykuł
z się pogrubia. Nodes - tak samo, ale podobnie jak przypadku,
kiedy tłumaczyłem jak działają ścieżki, że ścieżka articles zawiera w sobie również
ścieżkę główną. Tak samo tutaj - twitters nadal mamy grube, mimo
że jesteśmy na innej ścieżce i dlatego musimy zastosować tutaj słowo w
props'ie, które już znamy, tylko z innego przykładu, a mianowicie - exact.
I w tym momencie aktywna klasa będzie się aplikować do tego linku,
tylko w momencie, kiedy będziemy faktycznie na stronie głównej, a nie na żadnej innej stronie. I
patrząc na ten komponent, musimy jednak zmienić jedną rzecz, bo
nie mogę na to patrzeć. Ta nazwa - Navigation - zdecydowanie psuje
nam tutaj czytelność kodu, więc możemy ją zamienić, po prostu, na Nav, żeby było
jaśniej i żeby było szybciej, po prostu, to pisać. Więc teraz, żeby to
podmienić, możemy zrobić po prostu Ctrl+R lub CMD, jeśli jesteśmy na Macu
i tutaj Navigation zmienić na Nav. Jeszcze
tylko krótka zmiana po stronie CSS'ów i wszystko
wygląda, jak należy. Okej, mamy funkcjonujące menu. Teraz
możemy przejść do stylowania kolejnych elementów, ale tym zajmiemy się już w następnej
lekcji. Dodamy logo i dodamy button.