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ę debugowaniem wyglądu naszej aplikacji, bo trochę
to pozostawia do życzenia. Jeszcze to nie wygląda tak dobrze, jak mogłoby wyglądać. Zajmiemy
się na pewno wyglądem tego button'a, który jest dziwny. On na szczęście
działa, więc nie jest jeszcze tak źle. Natomiast ta odległość tutaj jest za wielka. Z
lewej strony mamy jakiś dziwny margin, więc teraz
to zrobimy. Dodałem taki state, inicjalny,
znowu do naszej aplikacji, ponieważ pewnie widzisz, że jeśli dodamy jakieś
elementy własne, jakiekolwiek i odświeżymy
nasz kod. Zmienimy tutaj cokolwiek, to
ten state nam ginie, więc na potrzeby debugowania, przygotowałem
takie gotowe elementy, na których będziemy pracować. Wejdźmy sobie teraz do widoku
naszej listy i sprawdźmy style. Co my
tutaj mamy? Wydaje mi się, że te style dla wrapper'a możemy usunąć. Zobaczymy
czym to poskutkuje. Okej, nasza lista ustawiła
się ładnie po lewej stronie. Mamy jeszcze jakieś dziwny odstęp, który należy
do ListItem. Wejdźmy teraz do ListItem. Sprawdźmy po lewej stronie co
on tutaj ma. Okej, mamy padding, 30 pikseli po lewej
stronie. Możemy zrobić tak, okej.
I teraz idealnie, nasze item'y są zrównane z naszym
logo. Sprawdźmy tylko, czy to też będzie działać dla artykułów. Tak,
one wtedy ładnie ustawiają się po lewej stronie, wszystko jest okej. Wróćmy do tych
elementów. Wydaje mi się, że możemy też zmniejszyć
padding na górze i na dole. Te odstępy
są zbyt wielkie, zdecydowanie. Może zamiast z góry, zróbmy
go z dołu. W ten
sposób, te nasze elementy są przyklejone bardziej do górnej części naszej aplikacji. Ta
przestrzeń nie jest taka nienaturalna i ona później, im dalej w dół,
tym lepiej, tym ładniej się układają. Jest, jest wszystko fajnie. Sprawdźmy
jeszcze, co jest grane tym button'em. On ma pewno ma coś związanego
z flex'em, że nam się tak rozciąga. On
ma niby display: block, ale pewnie rodzic, czyli ListItem ma
flex'a. Okej, więc teraz, jeśli nadamy naszemu button'owi, max-width,
120 pikseli, to
powinno wystarczyć, a jeszcze jak dodamy text-align. Okej
i nasz button wygląda dobrze, więc teraz możemy usunąć
też inicjalny state i po
raz ostatni w naszej aplikacji przetestować, czy wszystko działa.
Dodajmy notatkę z prawdziwego zdarzenia. Okej,
nasz tytuł może mieć tylko 30 znaków. To
jest pierwszy błąd, który znaleźliśmy. Takie debugowanie
aplikacji, nawet przed wysłaniem tego do QA, czy do
testera, jest bardzo fajne, bo też możemy sobie sprawdzić, gdzie
popełniliśmy jakieś błędy. Więc teraz w naszym formie, myślę, że
możemy wywalić, po prostu, to max-length. Pierwsza
rzecz z debugowana. Notatkę
się pojawiła, zresztą zobaczymy, jak te notatki wyglądają, Jak
są pod sobą, czy
jest okej? Jest okej, wygląda fajnie. Artykuły - wejdźmy
sobie nq jakikolwiek artykuł. Dajmy link. Tutaj
wszystko działa. No i twitter'y działają, bo przed chwilą mieliśmy przygotowaną
listę taką gotową. Więc cała nasza aplikacja działa tak, jak trzeba. Nie
pozostaje nam nic innego, jak wydeploy'owanie jej, a będziemy to
robić na Netlify. Ja Ci bardzo dziękuję za całą naszą współpracę
przy tym kursie. Jestem przekonany, że ten kurs
bardzo Ci pomógł zrozumieć React'a. Że po tym kursie wiesz,
jak korzystać z komponentów, jak tworzyć strukturę aplikacji, jak w
zaawansowany sposób wykorzystywać props'y, jak wykorzystywać Context API i
mnóstwo, mnóstwo innych rzeczy. Przygotowanie tego kursu, to była dla mnie
ogromna frajda i już nie mogę się doczekać, co pokażę Ci w następnych
kursach - w tym średnio zaawansowanym i zaawansowanym, dotyczącymi React'a. A
tymczasem, nie traćmy więcej czasu i wypuśćmy tę aplikacje
do sieci.