
This course includes our updated coding exercises so you can practice your skills as you learn.
See a demo
Czym jest React?
Co warto znać?
Czym jest komponent w React?
W tej lekcji dowiesz się, czym jest React i dlaczego tak wiele osób go używa do tworzenia interfejsów użytkownika. Najpierw porównamy, jak wyglądało tworzenie aplikacji przed Reactem i jak łatwo można na niego przejść. Potem pokażę Ci, jak zainstalować React i jak go używać na co dzień. Nauczysz się tworzyć komponenty, korzystać z JSX, zarządzać stanem aplikacji i obsługiwać zdarzenia w JSX. To będzie solidna podstawa, żeby zacząć swoją przygodę z Reactem!
Jak w tle działa funkcja useState
Jak korzystać z funkcji strzałkowej w React?
Node.js to aplikacja, program komputerowy, który instalujemy na naszym komputerze.
Node.js to taki 'warsztat' w którym mamy wszystkie potrzebne narzędzia i warunki, żeby kod JavaScript mógł "działać" poza przeglądarką internetową. I to jest super ważne -> do tej pory JS mógł być uruchomiony tylko i wyłącznie w przeglądarce.
Czyli od tej pory możesz używać JavaScript jak innych języków programowania np. Python. Możesz z pomocą JS:
1) postawić serwer
2) dostać się do plików, tam gdzie jest uruchomiony serwer, czyli albo na hostingu, albo lokalnie u siebie.
Prostsze określenia dla Node.js to:
"Platforma do uruchamiania"
"System wykonawczy"
Wszystkie te określenia oznaczają, że Node.js zapewnia wszystko, czego JavaScript potrzebuje, aby "żyć i pracować" poza przeglądarką - na serwerze lub na Twoim komputerze.
Node.js często jest nazywany platformą uruchomieniową, ponieważ z jego pomocą możemy uruchamiać i instalować pakiety (narzędzia) z pomocą specjalnego menadżera do nodejs
Nazywamy go:
npm - nodejs package manager
z ang. menadżer (zarządca) do pakunków w node.js
Jakie to narzędzia?
Np. takie które będą zmieniać JSX do zrozumienia dla Reacta (babel) bez potrzeby dołączania go ręcznie do nagłówka i zajmowania czasu po stronie użytkownika strony.
Ale nie tylko nie musi być to związane z Reactem
Możemy zainstalować narzędzia, które będą np. minifikować pliki .js etc.
Jak zainstalować React z Pomocą Vite?
Próba zrozumienia wygenerowanych plików przez Vite React
Jak stworzyć wielokrotny komponent i umieścić go w App?
Ważna notatka dotycząca struktury folderów/plików w React
Czym są propsy?
Jak przekzywać propsy?
Jak z nich korzystać?
Jak tworzyć domyślne wartości dla propsów?
Jak destrukturyzacja obiektu jest używana w React?
Jak będzie wyglądać aplikacja, którą stworzymy?
Ćwiczenie - stworz Gold Clickera
Jak ulepszyć moc clickania?
Jak działają funkcje aktualizujące i dlaczego powinniśmy z nich korzystać, gdy działamy na poprzednich wartościach?
Tworzenie interfejsu autoklikacza
Jak działa useEffect i po co go używamy na praktycznym przykładzie AutoKlikacza
Notatka useEffect
Jak warunkowo wyłączyć przycisk gdy zmienia nam się ilość posiadanego złota?
Poćwicz React i spróbuj przyspieszyć autoclickera
Jak zainstalować pakunek w naszym aktualnym projekcie i z niego korzystać?
Jak dodać CSS do komponentu
Jak zainstalować pakunek Framer i go zaimportować?
Framer Motion
Framer Motion to zaawansowana biblioteka animacji dla Reacta, która oferuje szerokie możliwości animacyjne i jest bardzo intuicyjna w użyciu.
Co robi Framer Motion?
motion.p: To specjalny komponent z Framer Motion, który umożliwia animowanie dowolnych właściwości CSS.
animate={{ scale: 1.2 }}: Animuje element, zwiększając jego rozmiar do 120%.
transition={{ duration: 0.2, yoyo: 1 }}: Ustawia czas trwania animacji na 0.2 sekundy i powoduje, że animacja "odbija się" (yoyo).
Jak używać ...animationProps do customizacji
Jak stworzyć komponent do animacji wartości? Jak mergować propsy?
Jak stworzyć animation.jsx i go używac w całym projekcie?
Jak zrobić animację wyjścia?
Moduły CSS - czemu są fajne i je stosować?
Jak zrobić toggle button?
Jak zaimplementować conditional text w React?
Jak zrobić przycisk robiący to samo co wcześniej, ale z zewnętrznego pakunku.
Jak dzielić stan pomiędzy komponentami?
Jak dzielić się stanem pomiędzy komponentami?
Jak zrobić system zapisu gry w 5 min z pomocą zewnętrznego pakunku?
Jak wykorztać npm run build
Oszczędź swój cenny czas, kupując ten kurs Reacta!
Nauczysz się programować w React w szybki i prosty sposób – krok po kroku, bez zbędnej teorii.
React to jeden z najpopularniejszych frameworków frontendowych na świecie.
React jest:
szybki i wydajny
uniwersalny (ogromna liczba bibliotek i narzędzi)
używany przez najlepszych – Instagram, Airbnb, Netflix, Uber, Dropbox
Co Cię czeka w kursie React?
Po ukończeniu kursu i stworzeniu gry w React:
Nauczysz się, jak używać Node.js, npm i Vite w projektach React
Dowiesz się, jak tworzyć komponenty React i zarządzać Reactowym stanem aplikacji
Poznasz składnię JSX, typową dla Reacta, do tworzenia dynamicznych interfejsów
Nauczysz się korzystać z propsów i state w React
Zastosujesz CSS Modules do stylowania komponentów React
Stworzysz przełącznik motywów (dark/light) w React
Zobaczysz, jak działa ContextProvider w React
Zrozumiesz działanie hooka useEffect w React
Zintegrujesz zewnętrzne biblioteki z React – na praktycznych przykładach
Dodasz funkcję automatycznego zapisu gry w React
Przechwycisz eventy w React
Użyjesz Promise na praktycznym przykładzie w aplikacji React PWA
Poznasz key, useRef, onChange – często wykorzystywane elementy w React
A to jeszcze nie koniec nauki Reacta!
Nauczysz się animować elementy zgodnie ze stanem aplikacji, wykorzystując Framer Motion w React
Dodasz ikony z Lucide do komponentów React
Przerobisz aplikację React na wersję desktopową za pomocą React + Electron
Nauczysz się, jak zmienić stronę HTML/CSS/JS w PWA stworzone w React, która działa jak natywna aplikacja na Androidzie, PC czy Macu
To nie koniec! Kurs zawiera mnóstwo praktycznych ćwiczeń. Dodatkowo, w zasobach znajdziesz notatki, które możesz wydrukować, aby móc powtórzyć poznane wiadomości w dowolnym momencie!
Ponad 350 000 studentów uczy się z moich kursów na Udemy – i Ty możesz do nich dołączyć!
Jeśli kurs Reacta Ci się nie spodoba, masz 30 dni na pełny zwrot pieniędzy.
Gwarantuję 100% satysfakcji.
Jeśli masz jakiekolwiek pytania, związane z poruszonymi tematami w React to pisz śmiało, zawsze chętnie pomogę :)
Używam prostego języka, przystępnego dla każdego. Nie chwalę się wiedzą. Chcę Ci pomóc!
Proszę, zanim zakupisz kurs oglądnij darmowe lekcje! Nie kupuj kota w worku! Sprawdź jakość kursów przed zakupem!
Dołącz dziś i naucz się szybko języka React ze mną!