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. Fajnie, że już przerobiliśmy sobie te podstawy. W
końcu możemy przejść do dużo ciekawszych rzeczy, czyli do pisania prawdziwych komponentów. Jak
widzisz w tej lekcji przenieśliśmy się do folderu numer 02, w którym przygotowałem kilka
rzeczy, które pomogą nam stworzyć nasze pierwsze komponenty, ale
zanim to zrobimy, odpalmy sobie Development Server. Okej, a
teraz mały wstęp. Czym właściwie się zajmiemy? Przygotowałem taki mockup
listy, który będziemy pisać za chwilkę w React'cie. Lista ta zawiera
najciekawsze konta Twitter'owe, dotyczące React'a, więc śmiało możesz je
odwiedzić i zasubskrybować, ponieważ one mega ciekawe i z nich możesz
też się bardzo dużo dowiedzieć, w ogóle jako taką poradę, mogę ci powiedzieć, że
dobrze jest śledzić Twittera, ponieważ jest to takie miejsce, w którym bardzo
aktualne rzeczy się pojawiają, bardzo aktualne informacje. Jeśli chcesz być na bieżąco z
tym co się dzieje, na przykład, w React'cie albo w ogóle we Frontend'zie, to Twitter jest bardzo
dobrym miejscem, żeby pozostać na tej powierzchni, jeśli chodzi o aktualność
informacji. Mamy tu oczywiście Dan'a Abramov'a, który jest twórcą React'a. Ryan
Florance i Michael Jackson. Tak, to nie jest ten Michael Jackson. W każdym
razie to oni odpowiadają za React Router. Natomiast Kent C. Dodds to jest twórca React Testing
Library, bardzo fajnej biblioteki do pisania testów w React'cie i
wszystko, co widzimy tutaj na ekranie, mam już przygotowane formie
takiego pliku z tablicą JavaScript'ową zawierającą
różne obiekty i w tych obiektach mamy wszystko potrzebujemy do
napisania naszych komponentów. Przede wszystkim importujemy sobie pliki JPG z
folderu assets/images, to tutaj zapisałem wszystkie JPG'i,
które mamy, jeśli chodzi o avatary. To jest też taka dobra praktyka,
żeby wszystkie obrazki trzymać właśnie w folderze images w folderze assets. Natomiast
nasz plik z danymi znajduje się już w folderze data i jak widzisz obrazki
nie są podane jako ścieżki relatywne, tak jak tutaj, tylko jako zaimportowane
elementy JavaScript'u. Jest to najbezpieczniejsza forma podawania
obrazków, ponieważ dzięki temu nie musimy się matrwić czy to będzie ścieżka relatywna, absolutna
i tak dalej. Tym zajmuje się Webpack. My tylko musimy wiedzieć, że
ten obrazek później podajemy tutaj takiej formie i możemy go spokojnie
wykorzystać w komponencie, ale o tym za chwilę. Mamy też imię, opis
konta i link do Twittera. Struktura
naszej aplikacji również jest gotowa. Mamy tutaj index.js, w którym renderujemy
już odpowiednio komponent App, który importujemy oczywiście z pliku App. On
zostanie dość mocno rozbudowany tym dziale, a także pojawi się nowy folder - components,
w którym będziemy tworzyć odpowiednie komponenty, ponieważ to jest
najlepsza właśnie praktyka, żeby każdy komponent znajdował się w
osobnym folderze, ale to stworzymy już w następnej lekcji.