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 tej lekcji zajmiemy się przygotowywaniem pierwszych komponentów, które posłużą
nam do stworzenia tej oto listy i nie bez przyczyny używam tutaj słowa
lista, ponieważ będzie to Wrapper, który w tag'u będzie miał UL, a następnie zrobimy
sobie komponenty, które w tag'u będą miały LI, ale o tym za chwilkę, na razie przygotujemy
sobie taką pierwszą bazę. Development
Server już mamy odpalony, więc możemy sobie zamknąć konsolę i stworzymy
teraz folder components, w którym
następnie stworzymy folder ListWrapper. Generalnie
każdy komponent, który coś tam oplata, który coś tam właśnie wrapp'uje, zamyka w
jakąś całość. Jaką konwencję nazywamy go w Wrapperem, więc tutaj
stworzymy sobie ListWrapper, który wewnątrz będzie miał plik ListWrapper.js. Zaimportujemy
sobie do niego React'a, a następnie postaramy
się stworzyć coś, co będzie takim bardzo podstawowym Wrapperem.
Żebyśmy tylko zobaczyli
czy to działa. Następnie
wyeksportujemy sobie ten nasz komponent. Zaimportujemy
go w naszej app'ce. Jak
widzimy, nasz komponent poprawnie się wyrenderował, więc teraz możemy przystąpić
do pracy i pierwsze co zrobimy, to przygotujemy sobie taką
bazę pod style, bo jest to bardzo ważne, żeby odwzorować to, co
mamy tutaj na ekranie. Używałem tutaj font'u Montserrat,
który teraz pobierzemy sobie z Google Font'ów za chwilkę pokażę ci jak zaimportować
Google Font do React'a w taki najprostszy sposób, a następnie zaczniemy
dodawać sobie poszczególne style do naszej listy. Pierwsze
co zrobimy, to wejdziemy sobie na Google Fonts. Znajdziemy sobie
font Montserrat. Przy
okazji jest to jeden z moich ulubionych fontów. Uważam, że jest naprawdę piękny i teraz
jedyne, co musimy zrobić to zaimportować to, co mamy tutaj w zakładce import
do pliku CSS. W tym przypadku stworzymy sobie
taki główny plik CSS, który będzie na wierzchu naszej aplikacji, a
następnie dodam
jeszcze kilka stylów do naszego body. Dodamy
też właśnie nasz font-family. To będzie Montserrat, a
jako backup font zrobimy sans-serif i teraz
wrócimy sobie do pliku App.js i zaimportujemy nasze style,
ale zauważ, że nie podam tutaj żadnej nazwy pliku, tylko zrobię import, ścieżka
index.css I teraz ten plik CSS
został automatycznie przetworzony przez Webpack'a. Także został wpleciony bezpośrednio
do naszej aplikacji i w ten sposób możemy modyfikować style na
naszej stronie. Jeśli masz już trochę css'a za sobą, to pewnie
wiesz, że warto dodać jeszcze takie selektory, które pozwolą na
bardziej przewidywalne zachowywanie się naszej aplikacji. Okej i
dzięki temu wszystkie wielkości, które będziemy podawać będą
przeliczane w nieco bardziej przewidywalny sposób. Okej,
mamy już podstawowe style zaimportowane do naszej aplikacji. Tutaj możemy
sobie to zamknąć. Zaimportowaliśmy też ListWrapper, który będzie
takim podstawowym komponentem oplatającym naszą listę. Stworzyliśmy
go jako taki prosty komponent funkcyjny. Jest to zwykła funkcja strzałkowa, która zwraca
nam u UL, w którym mamy rzy item'y
i na razie to wszystko. Jak widzisz nasza lista
na razie w żaden nie przypomina tego co mamy tutaj, ale za chwilkę do tego dojdziemy. Pierwsze,
co musimy zrobić, to stworzyć tak zwany komponent prywatny, czyli
taki, który będzie wykorzystywany wyłącznie przez ListWrapper i to
jest właśnie ta różnica, że ListWrapper jest komponentem publicznym, ponieważ możemy
go wykorzystywać wielokrotnie w różnych komponentach naszej aplikacji. Natomiast ListItem
będzie wykorzystane wyłącznie w ListWrapper, w tym miejscu i dlatego
nazywamy go komponentem prywatnym, więc teraz stworzymy sobie taki folder ListItem,
który będzie zawierał nasz komponent prywatny. W nim oczywiście
stworzymy sobie plik JS, ListItem.js zaimportujemy
szybko React'a i stworzymy komponent. To
będzie komponent, który będzie miał tag'i LI. Eksportujemy
go jako default. Zaimportujemy
w naszym Wrapperze. Póki
co, wykorzystamy tylko jeden ListItem w naszej
liście. Okej on się pojawił w tym miejscu i teraz
stworzymy sobie style, które będą potrzebne do tego, żeby stworzyć całą
listę, a dopiero później zajmiemy się tym, żeby odpowiednie
dane pojawiły się w każdym z elementów. Na razie stworzymy sobie tylko jeden
taki komponent, który będzie napisany na sztywno, który będzie
miał po prostu wpisane teksty bezpośrednio do komponentu. Oczywiście chcemy
tego uniknąć na końcu, ale do tego przejdziemy w sekcji, gdzie opowiem
o props'ach, więc teraz wracamy do naszego ListItem
i trochę go ostylujemy. Żeby dodać style, musimy dodać plik ListItem.css,
w którym stworzymy sobie klasę listItemWrapper. Będzie
ona odpowiadać za ten najbardziej zewnętrzny Wrapper, który oplata
nasz pojedynczy item i na pewno nie chcemy, żeby było tam
list-style. Póki co, nie chcemy, żeby był tam żaden
padding, ani margin. Zobaczymy jak to będzie zachowywać i teraz
musimy zaimportować te style do naszego komponentu ListItem. Podobnie
jak robiliśmy to w pliku App.js, a następnie
dodamy className do naszego tag'u w
JSX'ie. Okej, zniknął nam bullet, to znaczy, że style zaczęły
działać, więc skoro już mamy podpięte style i wszystko nam działa to nie pozostaje nam
innego jak przygotowanie do szkieletu komponentu, który następnie będziemy stylować,
ale to wszystko już następnej lekcji.