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ść. Ostatnią rzeczą, którą chciałem tak, słowem wstępu, tutaj zagaić to
to, jakie rzeczy będą w tym kursie prezentowane. Czego dowiesz się w tym kursie. Tworząc
ten kurs, miałem na myśli takie dwie istotne rzeczy. Pierwsza to taka, żeby bardzo
low-level'o, czyli niskopoziomowo zrozumieć, jak działa React. Chciałbym,
żeby po tym kursie każdy wiedział, jak działa React od takich
zupełnych podstaw. Nie chciałem tutaj niczego ominąć. Chciałem poświęcić każdemu
elementowi React'a wystarczająco dużo czasu i pokazać mnóstwo
przykładów, dzięki którym pewne zagadnienia, które początkowo mogą wydawać
się skomplikowane, nagle stają się jasne, a drugą rzeczą jest to, że nie
wprowadzam tutaj takich narzędzi jak Redux czy MobX celowo, ponieważ
uważam, że w React'cie tkwi ogromny potencjał i tylko przy wykorzystaniu
API React'a jesteśmy w stanie stworzyć pełnoprawną aplikacje nawet
z własnym stanem, bo są na to sposoby. Dlatego w tym kursie, ograniczamy
do minimum użycie ekosystemu tak naprawdę z takich większych paczek będziemy
korzystać tylko z router'a. Natomiast to, na czym się skupimy to właśnie
React i bardzo, bardzo, bardzo głębokiego zrozumienia. Uważam,
że tylko dzięki takiemu sposobowi nauki, jesteśmy w stanie dokładając później
kolejne narzędzia do naszego ekosystemu, lepiej i szybciej się uczyć, ponieważ jeśli
rozumiemy bardzo dobrze podstawy, to reszta będzie już całkiem prosta, a teraz
taki krótki spis treści. Taki mały wstęp, o czym będę mówił. Przede
wszystkim zaczniemy od tego, jak ogóle działa React, z czego się składa, o co się opiera. Jakie
są jego główne składowe elementy, które powodują, że nasza aplikacje,
w ogóle, powstaje. Kolejną rzeczą, której poświęcimy ogromną Ilość czasu w tym
kursie są komponenty, bo żeby dobrze zrozumieć jak działa React, to trzeba dobrze
rozumieć. jak działają komponenty w React'cie. Jak tworzyć ich strukturę. Jak
wymieniać między innymi dane i tak dalej, aby finalnie, w końcu
rozumieć, jak tworzyć pełnoprawną strukturę aplikacji, bo okazuje
się, że w React'cie nie jest to wcale tak oczywiste. Mówiąc o komponentach, będziemy
też mówić dużo o komponentach klasowych, czyli ze stanem. Stan to nic innego jak
dodatkowa porcja informacji, które zawiera nasz komponent i która bacznie obserwuje. Podczas
jakiekolwiek zmiany, komponent się przerenderowuje i to właśnie dzięki tej funkcji,
możemy dodawać bardziej skomplikowaną logikę do naszej aplikacji. Nie
zabraknie też sposobów na to, jak stylować nasze aplikacje. Będziemy tutaj głównie
mówić o stylowaniu przez taki zwykły CSS, a w dalszej kolejności omówimy
CSS Modules i SCSS, zaaplikowany właśnie do naszego kodu. Opowiem
też czym jest routing, jak z niego korzystać i tutaj będziemy wykorzystywać React Router, najpopularniejszą
tego typu paczkę, a na końcu opowiem o Context API, który
jest swego rodzaju teleportem, który właśnie pozwala nam na imitacje
tego stanu aplikacji i to właśnie dzięki temu, będziemy mogli dodać
dość dużo skomplikowanej logiki do naszej aplikacji. Już nie mogę się
doczekać, aż ci to wszystko wytłumaczę. Dlatego już teraz zapraszam cię do następnej
lekcji, gdzie zaczniemy naszą przygodę z React'em.