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ść! Skoro udało nam się już rozwiązać ten konflikt z paczkami w poprzedniej
lekcji, to teraz w końcu możemy przejść do refakturowania naszych stylów, żeby miały
one ręce i nogi. W końcu wyglądały nieco nowocześnie i ponieważ nie używa
się tak naprawdę, w takich zwykłych projektach komercyjnych, czegoś takiego
jak CSS. Jest to zbyt ograniczone narzędzie, przynajmniej jeśli chodzi o
duże skalowalne projekty. Prędzej czy później będziemy potrzebowali
czegoś większego, czegoś bardziej skomplikowanego, ale też czegoś, co udostępnia
nam narzędzia, których zwykły CSS nam po prostu nie daje, ale
najpierw rozwiążemy ten błąd, który straszy nas tutaj w przeglądarce i też
w konsoli mamy dokładnie to samo. Wynika on z tego, że importujemy plik,
który nie nazywa się już form CSS. Teraz się nazywa form.module.scss
i nie będziemy importować go ten sposób, tylko zaimportujemy styles
z niego. Tak wygląda poprawne importowanie rzeczy
dla CSS Modules. Jak widzisz, nasz aplikacja już
nie wyrzuca błędu - po prostu źle wygląda, ale tym też zaraz się zajmiemy, bo
teraz skoro już zmieniliśmy nazwę naszej klasy na wrapper, to
musimy ją podmienić też w tym miejscu i nie robimy tego w taki sposób, ponieważ
importujemy teraz obiekt styles z naszego CSS
Module, czyli z Form.module.scss, więc musimy wykorzystać styles,
jako obiekt i dopiero z niego wyciągniemy sobie nasz wrapper. Usuniemy
tutaj ten cudzysłów. Jak
widzisz, nasz header pojawił się już w odpowiednim miejscu. Tak samo jak nasz
button. Jednak cała reszta wygląda źle. Z tego względu, że każda
klasa, którą deklarujemy w naszym pliku jest jeszcze w formie stringa, a żeby
ją dostać z naszego piku ze stylami, musimy użyć właśnie tego obiektu styles, więc
teraz wszystko to trzeba refakturować i żeby zaoszczędzić czas na takie rutynowe
rzeczy, to teraz lekko przyspieszymy i ja po prostu przeskoczę ten fragment - nie będę
go nagrywał. Natomiast gotowy kod znajdziesz na branchu 03.8 w
repozytorium tego kursu. Okej, nasza aplikacja znowu wygląda
dobrze, ponieważ wszystkie style zostały zaaplikowane tak jak trzeba. Zauważ, że
każdy className teraz podany, zawiera obiekt styles, z którego
wyciągamy sobie nazwę klasy. Warto też zauważyć, że nawet
takie elementy jak input, czy label - dostały teraz swoją nazwę
klasy. Wynika to z tego, że chcemy, żeby te wszystkie elementy
zostały jakby zamknięte w tym komponencie i nie stawały się globalnymi
stylami. Dlatego wszędzie musieliśmy dodać klasę. Zmiany dotyczą
nie tego pliku form, ale także ListItem, ListWrapper. I zaraz
coś ci pokażę. Zobacz, że w tym miejscu mamy wrapper, czyli w ListItem i
też w tym miejscu, czyli w formie, czyli tak naprawdę mamy dwa razy,
taką samą nazwę klasy. Jeśli zajrzymy sobie tutaj, mamy wrapper. Jeśli
tutaj, też mamy tę samą nazwę. Jakim cudem udało
nam stworzyć dwie klasy, które wyglądają zupełnie inaczej i nie
są ze sobą współdzielone? Odpowiedź jest bardzo prosta - CSS Modules działa właśnie
w taki sposób, żeby nam to umożliwić. Jak sobie zajrzymy do naszego
domu, to zobaczymy,
że nasza nazwa wrapper, tak naprawdę, nazywa się wrapper, podkreślnik
dwa razy i jakiś dziwny ciąg znaków i każdy element naszej
aplikacji, ma teraz właśnie taki dziwny ciąg znaków. Ten dziwny
ciąg znaków umożliwia tworzenie nazw klas takich samych, które dopiero
w momencie kompilowania, dodawane mają taki
właśnie suffix, który sprawia one stają się niepowtarzalne. Dzięki
temu możemy nazywać nasze klasy tak, jak chcemy i nie martwić się o nadpisywanie
klas innych komponentów, poprzez nadawanie takiej samej nazwy. Tak właśnie działają
CSS Modules i to jest ich główna zaleta. I tak jak zapowiadałem
wcześniej, widzę tutaj w tej aplikacji szereg możliwych usprawnień, które
możemy wprowadzić i zaczniemy sobie od dodawania animacji tutaj, później
od walidacji naszego formularza. Następnie przejdziemy do momentu,
kiedy będziemy, tak naprawdę, tworzyć uniwersalne komponenty,
które będą wykorzystywane w naszej aplikacji, w kilku miejscach, czyli
komponenty prywatne, do tej pory, takie jak button, który jest tutaj
i tutaj, i one w tej chwili są na razie osobnymi bytami. Staną
się jednym komponentem, ale o tym już za chwilkę. Zanim
jednak zaczniemy pracę to chciałbym jeszcze na chwilkę zajrzeć do konsoli, ponieważ jeśli tam zerkniemy,
to będziemy mieć błąd, wynikający z tego, że używanie samego target, blank
jest potencjalnie ryzykowne. Jeśli chcesz dowiedzieć o tym
więcej, to nawet React tutaj podpowiada artykuł, w którym możemy przeczytać dlaczego
używanie samego target, blank nie jest najbezpieczniejszym wyjściem i musimy
do tego dodać jeszcze jedną rzecz, którą również nam podpowiada.
Jak pamiętasz
target, blank zadawaliśmy w tym miejscu, aby nasze strony Twittera
odpalały się na nowej karcie. Po
załataniu tej dziury jesteśmy w stanie ruszyć dalej z naszą pracą. Przejdźmy
więc naszego piku ListItem.module.scss i dodajmy animacje, żeby
to zrobić musimy dodać keyframes. Nazwiemy je appear. Nazwa wynika
stąd, że będzie się wykonywać za każdym razem kiedy dodamy jakiś nowy element naszej
listy. Na 0% damy opacity. Zero, top,
35 pikseli na 100%, opacity
będzie wynosić 1, top zresetujemy na 0, żeby ten top
działał, musimy to zrobić w position: relative i na
razie animacja nie działa, ponieważ musimy ją jeszcze dodać. Animation nazwa - appear. Będzie
trwać pół sekundy i będzie miała ease, czyli z każdej strony
będzie miała zwolnienie. Zarówno z początku jak i z końca. I
widzimy, że to wszystko działa. Już teraz Dan Abramov nam się
animuje, więc teraz dodajmy sobie Kent C. Dodds'a. Link
na razie tutaj nie ma żadnego znaczenia. Obrazek dodany Kent C. Dodds'a,
wcześniej przygotowałem go z Twittera. Lorem Ipsum - nasze ulubione
i teraz, jak kliknę add item, to powinien pojawić nam
się Kent C. Dodds ze swoim avatarem. Pięknie
i nawet się zaimował. Wszystko działa jak należy, udało nam się zrefaktorować
całą naszą aplikację, tak żeby dodać CSS Modules, które
znacząco podniosą komfort pracy nad dalszym kodem. A w dodatku
dodaliśmy jeszcze ładną animację, która sprawia, że to dodawanie naszych elementów
ze strony takiej UX'owej stało nieco przyjemniejsze, nieco mniej chaotyczne
i po prostu przyjemne dla oka, a w
następnej lekcji podrasujemy trochę nasz form, ponieważ pozostawiono wiele
do życzenia. Zapraszam do następnej lekcji.