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ść. Witam w kolejnej lekcji i w nowym dziale tego kursu. Aż ciężko
mi uwierzyć w jak krótkim czasie udało nam się opanować naprawdę ogrom
materiału. Opanowaliśmy komponenty, komponenty klasowe, modyfikowanie
stanu, renderowanie warunkowe i mnóstwo, mnóstwo innych rzeczy,
które są takimi podstawowymi funkcjami w React'ie. Tak naprawdę,
jeśli już ogarniemy komponenty, jeśli ogarniemy state, jeśli ogarniemy props'y,
to niewiele więcej pozostaje nam w samym React'ie do opanowania, czyli
tak naprawdę w... czyli tak naprawdę w swoich rękach trzymasz
już naprawdę potężną część arsenału związaną z tym framework'iem i to jest bardzo
dobra wiadomość. Na razie napisaliśmy apkę, która po prostu pozwala
nam dodawać kolejne konta Twitter'owe do naszej listy, zapisywać
je, ale wyobraźmy sobie, że nasz klient dostrzegł ogromny potencjał w
tym właśnie rozwiązaniu i pomyślał, że może by tak stworzyć
coś więcej, może stworzyć by coś, co pozwalałoby nam trzymać, nie tylko konta
Twitter'owe, ale też na przykład ciekawe artykuły albo nawet własne notatki
i tym właśnie zajmiemy się w tym dziale. Przejdźmy
zatem do naszego widoku projektu i sprawdźmy, co przygotował dla nas
nasz klient i jego designerzy. Od tego widoku wyszliśmy
i to właściwie zaprogramowaliśmy w bieżącej aplikacji. Oczywiście
nieco odbiegamy tutaj od tego widoku poziomego, ponieważ pracujemy
głównie na takim oknie podzielonym i przez to wszystko trzymamy raczej w
pionie, ale nie to tutaj chodzi. Chodzi głównie o funkcję tego, jak to działa. W
tym dziale rozszerzymy możliwości naszej aplikacji o kolejne podstrony. Będzie
to wyglądać mniejwięcej tak. To jest ten widok, który do tej pory mieliśmy. To są nasze konta Twitter'owe.
Nasza aplikacja będzie się nazywać FavNote, od favorite note. Będzie
mogła zawierać konta Twitter'owe, artykuły z neta oraz
notatki, które sami napiszemy, a to wszystko będziemy dodawać za pomocą specjalnego
modal'a, który pojawiać się będzie po kliknięciu w new item i ten modal będzie
wyglądał tak. Całość naszej aplikacji lekko wyblaknie, a modal
wyskoczy nam na przód. Będziemy mogli wybrać sobie rodzaj notatki, czy będzie
to Twitter, czy będzie to artykuł, czy będzie to notatka i w
związku z tym co zaznaczymy, tutaj będą się pojawiać odpowiednie pola naszego
formularza i w odpowiednim miejscu będzie się to zapisywać. Już
teraz widzisz, że brakuje nam tutaj jednego bardzo ważnego narzędzia,
którego sam React nie posiada, a tym narzędziem jest routing, czyli możliwość
zarządzania tym, w którym miejscu, pod jakim adresem znajdujemy się w naszej
aplikacji, bo przecież nie chcielibyśmy, żeby nasza aplikacja ciągle
była pod tym samym adresem. Czasami mamy jakieś podstrony, które właśnie w
tym dziale stworzymy w naszej aplikacji i z racji, że sam
React wewnątrz własnych narzędzi, nie posiada żadnego narzędzia,
które odpowiadałyby za routing, to musimy się tutaj posiłkować zewnętrzną
biblioteką, którą właśnie za chwilę zintegrujemy z naszym projektem. Biblioteka
ta nazywa się React Router i możliwe, że już wiesz coś na jej temat,
ponieważ jej twórcą jest jeden z kolegów, którego mamy tutaj na liście,
czyli Michael Jackson. Już samo nazwisko twórcy powinno cię mocno zachęcić
do nauczenia się tej technologii. Nie jestem pewien czy ten Michael Jackson akurat
potrafi tak dobrze robić Moonwalk, ale na pewno zna się na rzeczy, jeśli chodzi budowanie bardzo
przydatnych narzędzi, z bardzo dobrą dokumentacją, ale o tym wszystkim opowiem
ci już następnej lekcji.