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.
Jeśli twój wybór, co do dalszej nauki programowania, padł na React to prawdopodobnie
dlatego, że zdajesz sobie sprawę z tego, jak popularne jest ta technologia, ale
czy zdajesz sobie sprawę, jakie problemy rozwiązuje? Przede wszystkim chciałem
tutaj powiedzieć o Virtual Dom. To jest bardzo ciekawe rozwiązanie, które znacząco
przyspieszyło działanie aplikacji, ich wydajność. Jeśli spojrzymy sobie na
to jak aplikacje webowe działały dawniej, to zobaczymy, że większość operacji była
wykonywana bezpośrednio na DOM. DOM, to oczywiście Document Object Model,
czyli cała struktura naszej strony prezentowana w oknie przeglądarki. Zmiany
bezpośrednio DOM'ie były o tyle kosztowne, że często nawet drobna zmiana
wywoływała renderowanie całego drzewa DOM od zera. Czasami kilkadziesiąt
razy na sekundę. Tego typu zabiegi powodowały, że korzystanie ze
stron było bardzo uciążliwe, dlatego powstała koncepcja Virtual DOM, który
jest niczym innym jak prostym obiektem w JavaScript, który trzyma lustrzane
odbicie naszego prawdziwego DOM'u. W React'cie to właśnie
na Virtual DOM odbywają się wszystkie zmiany i operacje. Tego typu zmiany dla
komputera to bułka z masłem. Dopiero następnej kolejności Virtual DOM porównywany
jest do prawdziwego DOM'u i jeśli istnieją jakieś różnice, to aktualizowane
są wyłącznie te elementy, które różnią się od siebie. Kolejnym
świetnym rozwiązaniem w React'cie są komponenty. Dzięki nim jesteśmy w stanie tworzyć
nasze interfejsy szybciej i skuteczniej, bezpieczniej, a dodatkowo
utrzymanie takiego kodu w przyszłości jest bardzo przyjemne, ponieważ istnieje pewna struktura
i hierarchia, której możemy się trzymać. Popatrz na przykład
tego Hero Image. Mamy tutaj obrazek, nagłówek, tekst i przycisk. Tylko przykład,
więc nie pokazuje tutaj zbyt skomplikowanych rzeczy, ale jeśli stworzymy sobie dalszą
część naszego interfejsu, to wyraźniej widzimy, że pewne komponenty powtarzają się. Dla
przykładu może być to Header albo na przykład Button. Dzięki
komponentom w React, wpisanie kodu stało się o niebo przyjemniejsze. Oczywiście React
ma mnóstwo innych jeszcze zalet, ale komponenty i zmiany w Virtual
DOM'ie, czyli właśnie reagowanie na nie, dynamiczna reagowanie na zmiany. Stąd w
sumie wzięła się nazwa React. To jest coś, co bardzo pomaga deweloperowi w tworzeniu
i utrzymaniu fajnych ciekawych aplikacji.