Event Bubbling, Capture, Propagation

Właśnie wjechał nowy odcinek z serii DOM

Event Bubbling, Capture, Propagation [wideo]

Eventy w DOMie

To już czwarty odcinek z miniserii o DOM. Odcinek o eventach a w nim m.in. czym się różni onClick od addEventListener. Odcinek jest kontynuacją trzech poprzednich: 

1. Czym jest DOM
2. Poruszanie się po DOMie
3. Manipulacja DOMem

Eventy w DOMie [wideo]

Jak poruszać się po DOMie

Jak poruszać się po DOMie [wideo]

Czym jest DOM (document object model)

Właśnie wjechał pierwszy odcinek z serii o DOM. Seria będzie krótka, kilka odcinków. Temat wydaje się prosty. Na tyle, że na początku w ogóle nie zamierzałem nic o DOMie nagrywać, wydawało mi się to zbyt oczywiste.

Ale po kilku komentarzach z prośbą o omówienie DOMu zacząłem robić reserach. Sam jestem zaskoczony wynikami bo okazało się, że o DOMie wiedziałem może połowę rzeczy.

Jeśli ktoś myśli, że dobrze zna DOM, niech poczeka na drugi odcinek… Ale zanim do niego dojdzie, warto poznać podstawy i zrozumieć czym w ogóle jest DOM!

Czym jest DOM [wideo]

Jak wysłać dane gdy user wychodzi ze strony? sendBeacon i fetch

Jak wysłać dane gdy user wychodzi ze strony? sendBeacon i fetch [wideo]

Optional chaining – czyli jak skrócić kod ?.

const name = person.addresses?.[0].street?.name

const name = person.addresses && person.addresses.[0].street && person.addresses.[0].street.name

natomiast ten zapis jest uproszczeniem tego:

let name;
if (person.address) {
  if (person.address[0].street) {
    let name = person.address[0].street.name
  }
}

Jest więc to sposób na znacznie uproszczenie kodu. Znak ?. sprawdza czy wartość po lewej stronie jest null lub undefined. Jeśli tak, zatrzymuje się i zwraca undefined. W innym przypadku wykonuje dalszą część kodu.

Dokładne przedstawienie w dzisiejszym odcinku:

Optional chaining – czyli jak skrócić kod [wideo]

Jak działa useState w React.js

useState – jest to funkcja, która pozwala na automatyczne odświeżanie tekstów, zdjęć i nie tylko w czasie rzeczywistym na naszej stronie.

Jest to jeden tych ficzerów, które czynią Reacta tak przyjemnym w pracy. To jedna z tych rzeczy, które czynią Reacta wręcz „magicznym”. 

Tak naprawdę useState to zwykła funkcja i aby pokazać jak działa pod maską – napisałem swój własny useState! 

Jak działa useState w React.js [wideo]

Jest to jeden z ponad 130 odcinków pełnego kursu Reacta mojego autorstwa.  Link do kursu poniżej:

https://tworcastron.pl/kursy/react-kurs-kompletny?kod=PFY01_REACT_YT_STATE

Projekt „Notatki” – stawiamy frontend (React)

Kolejny odcinek z serii projekt praktyczny “Notatnik”.  Jest to projekt praktyczny oparty na Node + React + MongoDB. 

W dzisiejszym odcinku pora postawić frontend, który będzie zbudowany przy użyciu Reacta. 

Opis projektu: Dosyć kompleksowo buduję małą aplikację. Tworzę zarówno backend, który łączy się z bazą danych MongoDB. Następnie przez API komunikuje się z frontem zbudowanym na React.js.

Całość pokazuje jak może wyglądać taki projekt, układ plików, konfiguracja, czy jak w ogóle zabrać się do tworzenia full stackowej aplikacji. 

Starałem się pokazywać dobre nawyki i sposoby na organizacje kodu 🙂

Poprzednie odcinki:

odc. 1

odc. 2

odc. 3

odc. 4

React – kurs kompletny

Po wielu tygodniach pracy i nagrywania, w końcu jest! Kurs reacta w jego najnowszej odsłonie (v.17). 

W ten projekt włożyłem sporo serca. Sporo się przy nim też sam nauczyłem. Od dawna twierdzę, że robienie kursu to jeden z lepszych sposobów na naukę / usystematyzowanie wiedzy. Wciąż to podtrzymuję. 

Kurs składa się z ponad 130 lekcji i zawiera ponad 15 godzin materiału. Prowadzony tak, aby stopniowo wdrażać w świat najpopularniejszej biblioteki JavaScript.

Dla kogo jest ten kurs

Nieważne czy pracowałeś z Reactem, czy to Twój początek. Kurs kompleksowo omawia wszystkie zagadnienia od podstaw po rzeczy zaawansowane. Tak więc, kurs ten jest tak naprawdę dla osób początkujących, oraz mających już styczność z Reactem. Jedyny wymóg to podstawowa znajomość JavaScript, HTML i CSS.

Powtórzę: to nie jest kurs typu „podstawy”, gdzie po skończeniu musisz kupić drugi „dla zaawansanych”. W 15 godzinach znajdziesz wszystko, pod podstaw po rzeczy zaawansowane.

Gratis

Do kursu gratisowo otrzymasz ściągi PDF z ważniejszymi elementami Reacta. Dodatkowo co kilka odcinków możesz pobrać aktualny kod , tak abyś mógł zacząć w dowolnym momencie!

Zawartość kursu

• czym jest React, historia, porównanie, zastosowanie
• komponenty klasowe i funkcyjne
• zarządzanie stanem aplikacji
• rejestracja, logowanie, autentykacja
• stylowanie aplikacji
• zapisywanie i odczytywanie danych z bazy danych
• łączenie z backendem
• hooki, pisanie własnych hooków
• tworzenie i walidacja formularzy
• routing – strony, podstrony, zarządzanie ruchem
• testowanie i debugowanie aplikacji
• redux
• deploy, wysyłanie plików na hosting
• … i wiele więcej

Pełny opis i darmowe lekcje znajdziesz wchodząc na opis kursu (link poniżej). 

Kurs zawiera aktualizacje 2022 z wersją Reacta 18.

Link do kursu: React – kurs kompletny.

O kursie opowiadam też na YouTubie:

Kurs w jeszcze lepszej cenie był dla listy subskrybentów, więc jeżeli chcesz się załapać na kolejną promocję, zapisz się na listę.

Projekt „Notatnik” – Tworzymy API (backend)

Kolejny odcinek z serii projekt praktyczny „Notatnik”.  Jest to projekt praktyczny oparty na Node + React + MongoDB. 

W dzisiejszym odcinku pora napisać API.

Opis projektu: Dosyć kompleksowo buduję małą aplikację. Tworzę zarówno backend, który łączy się z bazą danych MongoDB. Następnie przez API komunikuje się z frontem zbudowanym na React.js.

Całość pokazuje jak może wyglądać taki projekt, układ plików, konfiguracja, czy jak w ogóle zabrać się do tworzenia full stackowej aplikacji. 

Starałem się pokazywać dobre nawyki i sposoby na organizacje kodu 🙂

Poprzednie odcinki:

odc. 1

odc. 2