od Podstaw
5 godz. 59 min · ReactJS · Full-stack i Programowanie
Michał JabłońskiReact przeszedł długą ścieżkę rozwoju i część z jego funkcjonalności nie są już powszechnie używane. Dlatego w tym kursie skupimy się na najnowszych technikach pracy z biblioteką - poznasz współczesne podejście do budowania komponentów z wykorzystaniem hooks (useState, useEffect), zrozumiesz zasady kompozycji i zarządzania stanem aplikacji. Pokażemy Ci też jak efektywnie korzystać z narzędzi deweloperskich, debugować kod i wdrażać aplikacje na produkcję z użyciem współczesnych platform jak Vercel.
Hooki to fundament nowoczesnego Reacta, który całkowicie zmienił sposób tworzenia komponentów. W kursie nauczysz się efektywnie zarządzać stanem aplikacji używając useState, wykorzystywać useEffect do operacji lifecycle i side-effects, oraz poznasz reguły korzystania z hooków. Wszystko to przećwiczysz w praktycznych zadaniach, takich jak implementacja filtrowania listy elementów, gdzie zastosujesz zdobytą wiedzę w realnym scenariuszu.
Obsługa formularzy to nieodłączny element każdej aplikacji webowej. Pokażemy Ci jak kontrolować wartości pól input, wykorzystać popularną bibliotekę Formik do zarządzania złożonymi formularzami oraz implementować walidację danych. Wiedza ta zostanie utrwalona poprzez praktyczne zadanie, w którym rozwiniesz formularz o dodatkowe pola i zastosujesz poznane techniki w rzeczywistym przypadku użycia.
Większość aplikacji wymaga komunikacji z serwerem. Nauczysz się jak poprawnie wykonywać operacje asynchroniczne w komponentach React, obsługiwać stany ładowania i błędów, oraz efektywnie korzystać z klienta HTTP do zapytań AJAX. Zaczniesz od pracy z przygotowanym mockiem API, by następnie przejść do prawdziwej integracji z back-endem. W praktycznym zadaniu zaimplementujesz pełny przepływ danych - od pobrania, przez wyświetlenie, aż po wysłanie na serwer.
Poza budową aplikacji React, w kursie znajdziesz także moduł poświęcony wdrażaniu aplikacji na produkcję. Poznasz prawidłową konfigurację serwera produkcyjnego dla architektury SPA, nauczysz się zarządzać zmiennymi środowiskowymi poprzez pliki .env oraz przeprowadzisz deployment na platformie Vercel. Dzięki temu Twoja aplikacja będzie nie tylko działać lokalnie, ale także będzie gotowa do użycia przez realnych użytkowników w internecie.
Nowoczesny React stworzyliśmy z myślą o osobach, które chcą nauczyć się Reacta i jednocześnie znają JavaScript. Niezależnie od tego, czy React jest Twoim pierwszym frameworkiem, czy masz już doświadczenie w pracy np. ze Svelte czy Vue, ten materiał jest dla Ciebie. Wskazane jest również posiadanie ogólnej wiedzy na temat tworzenia interfejsów z HTML i CSS oraz obsługi narzędzi takich jak Git czy podstawy pracy z terminalem.
Dlaczego warto zacząć od Reacta?
Dlaczego warto go poznać jako swoją przygodę z frontend developmentem?
Cóż, mogłoby się wydawać, że to po prostu biblioteka do budowania widoków.
I tak jest w istocie.
Natomiast cały potężny ekosystem, który urósł wraz z tą biblioteką, który
z roku na rok nabiera tempa, jest bardzo imponujący.
Chociażby możemy zaczynając od React, a pójść dalej w kierunku full stack
developmentu, stosując rozwiązania takie jak NextJS czy Remix.
Te rozwiązania pozwolą nam na budowanie aplikacji full stack owej.
Możemy również pójść w aplikacje mobilne, czyli React Native daje nam możliwość
tego, aby budować interfejsy mobilne i aplikacje mobilne.
Możemy również pokusić się o aplikacje desktopowe, czyli mamy tutaj
Electrona, mamy tutaj URI.
Te frameworki pozwalają nam na to, żeby złożyć właśnie rozwiązania tego typu.
Dodatkowo mamy całą potężną gamę komponentów UI, takich jak na przykład and
Design, takich jak Next UI czy Tilewind UI.
Te wszystkie rozwiązania są bardzo nowoczesne.
Te wszystkie rozwiązania pozwalają nam na to, żebyśmy mogli tworzyć
przepiękne interfejsy.
I mamy te wszystkie elementy, jak to się mówi out of the box.
Po prostu korzystamy z nich bezpośrednio w naszej aplikacji, A to wszystko
za sprawą pionierskiego podejścia.
React stosuje podejście komponentowe, którego jest pionierem.
Mamy tutaj coś takiego jak budowa komponentowa, czyli złożenie
naszych widoków z małych elementów.
Te małe elementy organizują się wokół tego samego kontekstu, to znaczy dotyczą np.
Wideo listy i będą zajmować się wyświetleniem tego konkretnego elementu.
Co więcej, możemy składać widoki dlatego, że komponenty będą komponowane, czyli
możemy sobie zrobić właśnie Composition.
I tutaj w odróżnieniu od klasycznych podejść, od klasycznych podejść MVC, mamy
tutaj Favor composition over i titans.
Dodatkowo takim przełomowym rozwiązaniem Reacta jest to, że logika naszego
komponentu, logika elementu widoku jest razem z tym widokiem plus dodatkowo
mogło być tu również stylowanie.
Czyli nie mamy dalej rozdzielonego CSS a, HTML i JavaScript.
Mamy to wszystko tutaj.
Zwróć uwagę, że jeśli na co dzień korzystasz z Vanilla JavaScript, na pewno
korzystasz z takich konstrukcji, które tutaj widać.
O ile to być może będzie czymś nowym.
Ten Syntax JSX nie jest taki intuicyjny, chociaż wygląda od razu jakbyśmy go znali,
dlatego, że te złożenia są żywcem wyciągnięte z HTML'a niemalże.
To tutaj zauważ, że mamy coś takiego jak programowanie funkcyjne.
Czyli na przykład możemy sobie przemapować elementy, żeby wyświetlić je na liście.
To wszystko sprawia, że elementy, które znasz, które używasz na co dzień właśnie w
czystym JavaScripcie, jak chociażby rozwiązanie JavaScriptu, gdzie mamy
function first class Citizen, czyli mamy podejście funkcyjne i obiektowe w
JavaScripcie pozwalają nam na używanie tego właśnie
rozwiązania używania Reacta z łatwością do bardzo przyjemnego przejścia, chociażby
z budowania widoków Vanilla JavaScript czy z jakiejś biblioteki
właśnie tutaj do Reacta. Co więcej.
Pozostałe biblioteki, pozostałe rozwiązania frameworkowe
związane z frontendem.
One będą korzystały z Reacta.
Są bardzo wysoce inspirowane właśnie tymi rozwiązaniami, takimi jak single
FireComponent, takimi jak chociażby przekazywanie wartości poprzez
propsy, które widać tutaj.
Ta dokumentacja React Dev to dokumentacja, z której chciałbym, żebyś
podczas tego kursu korzystał.
Mamy też dostępną dokumentację Legacy Reactjs org.
No jak sama nazwa wskazuje jest to coś, z czego nie chcemy już korzystać, dlatego,
że jest to wariant, który nawet tutaj przez samych twórców jest wskazywany,
żebyśmy przeszli do React. pdf.
Jednak pokazuję Ci to dlatego, że być może jesteś w sytuacji, w której chcesz przejść
z jakiejś starszej wersji React i zobaczyć właśnie troszeczkę odświeżone podejście.
W tym przypadku będziemy korzystać z wersji 18 React.
Te linki zostawiam Ci w materiałach do kursu, tak aby sobie
na spokojnie przejrzeć.
Zwróć uwagę, że React będzie pięknym początkiem Twojej drogi.
Być może nawet do jakichś rozwiązań typu full stack mobile albo desktop.