ููุฑุณ React.js ู
ู
ุชุงุฒ ๐ฏ
.
.
React Full Course - Beginner to Pro (React 19, 2025)
1. React Basics, JSX
2. Components, Props, Start the Chatbot Project
3. State, Event Handlers, Chatbot Project Features
4. CSS with React, Hooks, Finish Chatbot Project
5. Proper React Setup with Vite
6. React Router, Git, Start the E-commerce Project
7. React with Backend, Data Fetching, Load E-commerce Project Data
8. Data Mutation, Update E-commerce Project Data
9. Automated Tests in React with Vitest
10. Deploy React to the Internet, Intro to AWS
11. React 19 Updates
12. TypeScript with React
13. AI with React
.
.
https://youtu.be/TtPXvEcE11E
.
.
React Full Course - Beginner to Pro (React 19, 2025)
1. React Basics, JSX
2. Components, Props, Start the Chatbot Project
3. State, Event Handlers, Chatbot Project Features
4. CSS with React, Hooks, Finish Chatbot Project
5. Proper React Setup with Vite
6. React Router, Git, Start the E-commerce Project
7. React with Backend, Data Fetching, Load E-commerce Project Data
8. Data Mutation, Update E-commerce Project Data
9. Automated Tests in React with Vitest
10. Deploy React to the Internet, Intro to AWS
11. React 19 Updates
12. TypeScript with React
13. AI with React
.
.
https://youtu.be/TtPXvEcE11E
โค10๐คฃ1
ุจูุงุด ุชุณุชุฎุฏู
git pull โ ๏ธ
.
.
ุจูุถู ุงููู ุชู ูุดุฑ ู ูุงู ุฌุฏูุฏ ุนูู ู ุฏููุฉ Level Up Coding ุนูู ู ูุตุฉ Medium โ
ุดุฑุญ ู ุจุณุท ููุงุถุญ ูููุฑู ุจูู:
- git pull
- git pull --rebase
.
.
Git Pull vs. Git Pull โ Rebase: A Complete Guide for Developers ๐ฏ
โโโ
ุงูู ูุงู ูุงู ู ููุง ๐
https://medium.com/gitconnected/git-pull-vs-git-pull-rebase-a-complete-guide-for-developers-e209ce0df18c
โโโ
ููููู ุงููู ููู ุฎูุฑ ๐ฟ
.
.
ุจูุถู ุงููู ุชู ูุดุฑ ู ูุงู ุฌุฏูุฏ ุนูู ู ุฏููุฉ Level Up Coding ุนูู ู ูุตุฉ Medium โ
ุดุฑุญ ู ุจุณุท ููุงุถุญ ูููุฑู ุจูู:
- git pull
- git pull --rebase
.
.
Git Pull vs. Git Pull โ Rebase: A Complete Guide for Developers ๐ฏ
โโโ
ุงูู ูุงู ูุงู ู ููุง ๐
https://medium.com/gitconnected/git-pull-vs-git-pull-rebase-a-complete-guide-for-developers-e209ce0df18c
โโโ
ููููู ุงููู ููู ุฎูุฑ ๐ฟ
โค7๐1๐คฃ1
ุฃูู
ุจุฏุงุฆู ุงูู localStorage ๐ก
.
.
ุฎูุงู ุฑุญูุชู ูู ุนุงูู ุงูู Front-End ูุงุฒู ูู ููุช ู ู ุงูุฃููุงุช ูุชุญุชุงุฌ ุชุฎุฒู ุจูุงูุงุช ุนูุฏ ุงูู Client Side (ูุนูู ุนูุฏ ุงูู ุณุชุฎุฏู ).
ุฃุจุณุท ุญุงุฌุฉ ูููุง ุนุฑููุงูุง ูู ุงูุฃูู ูู ุงูู localStorage. ุณููุฉ ุฌุฏูุง ูุงูููุฏ ุจุณูุทุ ููู ุงู ุนุจุงุฑุฉ ุนู key/valueุ ุจุณ ุงูุญูููุฉ ุฅู localStorage ู ุด ุฏุงูู ูุง ุฃุญุณู ุญู.
ูููุ ๐
- ุงูู size ู ุญุฏูุฏ (ุชูุฑูุจูุง 5MB).
- ูู ุญุงุฌุฉ ุจุชุชุฎุฒู ูู string.
- ู ูููุงุด ุฃู ููุน ู ู ุงูู security (ู ู ูู ุฃู ุญุฏ ููุฑุฃูุง).
- ู ุด scalable ูู ุจุชุชุนุงู ู ู ุน data ูุจูุฑุฉ.
ุนูุดุงู ูุฏู ุชุนุงู ูุฏุฑุฏุด ุดููุฉ ุนู 4 ุจุฏุงุฆู ููู localStorage ู ู ูู ุชุณุงุนุฏู ูู ุจุนุถ ุงูุณููุงุฑูููุงุช ุงูู ุฎุชููุฉ...
โโโ
๐ ุงูู IndexedDB
- ุฏู ุนุจุงุฑุฉ ุนู database ูุงู ูุฉ ุฏุงุฎู ุงูู browser.
- ุจุชุฎููู ุชุฎุฒู structured data (objectsุ arraysโฆ) ู ุด ู ุฌุฑุฏ strings.
- ุจุชุชุนุงู ู ู ุนุงูุง ุนู ุทุฑูู APIs ุฃู libraries ุฒู Dexie.js ุนุดุงู ุชุณููู ุงูู ูุถูุน.
- ู ูุงุณุจุฉ ุฌุฏูุง ูู ุนูุฏู data ูุจูุฑุฉ ุฃู offline apps ุฒู Note Apps ุฃู Todo Apps.
- ุฃุณุฑุน ุจูุชูุฑ ูู ุงูู queries ู ู localStorage.
โโโ
๐ ุงูู sessionStorage
- ููุณ ููุฑุฉ localStorage ุจุงูุถุจุท ููู ุงููุฑู ุฅููุง ุจุชุชู ุณุญ ุฃูู ู ุง ุงูู tab ุชุชููู.
- ู ูุงุณุจุฉ ูุญุงุฌุงุช temporary ุฒู tokens ุฃุซูุงุก ุงูู session ุฃู data ู ุด ู ูู ุฉ ุชุญุชูุธ ุจูุง ุจุนุฏ ู ุง ุงูููุฒุฑ ูููู ุงูุตูุญุฉ.
- ุญุฌู ูุง ุจุฑุถู ู ุญุฏูุฏ ุฒู localStorage.
โโโ
๐ ุงูู Cookies
- ุฃูุฏู ูุฃุดูุฑ ุทุฑููุฉ ูุชุฎุฒูู ุงูุจูุงูุงุช ูู ุงูู browser.
- ู ูุฒุชูุง ุฅููุง ุจุชุชุจุนุช ุชููุงุฆู ู ุน ูู HTTP Request ููู server.
- ู ูุงุณุจุฉ ุฌุฏูุง ููู authentication (ุฒู ุงูู JWT tokens ุฃู session IDs).
- ุจุณ ุนูุจูุง ุฅููุง ุตุบูุฑุฉ (ุญูุงูู 4KB) ูุฃู data ุฒูุงุฏุฉ ู ู ูู ุชููู ุณุฑุนุฉ ุงูู requests.
- ูุงุฒู ุชุณุชุฎุฏู ูุง ููุญุงุฌุงุช ุงูุฎูููุฉ ูุงูู ูู ุฉ ุจุณ.
โโโ
๐ ุงูู Service Workers + Cache API
- ุฏู ุญู advanced ุดููุฉุ ุจูุณุชุฎุฏู ุงูู Service Workers ู ุน Cache API.
- ุจูุฎููู ุชุฎุฒู responses ูุงู ูุฉ ู ู ุงูู network (ุฒู HTML, CSS, JS, Images).
- ู ู ุชุงุฒ ููู Progressive Web Apps (PWA) ุนุดุงู ุชุดุชุบู offline.
- ุชูุฏุฑ ุชุชุญูู ูู caching strategy (ู ุซููุง: Network First, Cache Firstโฆ).
- ู ููุฏ ุฌุฏูุง ููุฃุฏุงุก (performance) ูุชุญุณูู ุชุฌุฑุจุฉ ุงูู ุณุชุฎุฏู .
โโโ
๐ก ุงูุฎูุงุตุฉ:
- ูู data ูุจูุฑุฉ: ุงุณุชุฎุฏู IndexedDB.
- ูู data ุจุณูุทุฉ ูู ุคูุชุฉ: sessionStorage.
- ูู ุนุงูุฒ data ุชุชุจุนุช ููู server: ุงุณุชุฎุฏู Cookies.
- ูู ุจุชุจูู PWA ุฃู ู ุญุชุงุฌ caching ููู: ุงุณุชุฎุฏู Service Workers + Cache API.
ููุฑ ุฏุงูู ูุง ูุจู ู ุง ุชุณุชุฎุฏู localStorage: ูู ูู ูุนููุง ุงูุญู ุงูู ูุงุณุจุ ููุง ูู ุจุฏูู ุฃูุถู ูุณุงุนุฏู ู ู ูุงุญูุฉ ุงูุฃุฏุงุก ูุงูุฃู ุงูุ
โโโ
ููููู ุงููู ููู ุฎูุฑ ๐ฟ
.
.
ุฎูุงู ุฑุญูุชู ูู ุนุงูู ุงูู Front-End ูุงุฒู ูู ููุช ู ู ุงูุฃููุงุช ูุชุญุชุงุฌ ุชุฎุฒู ุจูุงูุงุช ุนูุฏ ุงูู Client Side (ูุนูู ุนูุฏ ุงูู ุณุชุฎุฏู ).
ุฃุจุณุท ุญุงุฌุฉ ูููุง ุนุฑููุงูุง ูู ุงูุฃูู ูู ุงูู localStorage. ุณููุฉ ุฌุฏูุง ูุงูููุฏ ุจุณูุทุ ููู ุงู ุนุจุงุฑุฉ ุนู key/valueุ ุจุณ ุงูุญูููุฉ ุฅู localStorage ู ุด ุฏุงูู ูุง ุฃุญุณู ุญู.
ูููุ ๐
- ุงูู size ู ุญุฏูุฏ (ุชูุฑูุจูุง 5MB).
- ูู ุญุงุฌุฉ ุจุชุชุฎุฒู ูู string.
- ู ูููุงุด ุฃู ููุน ู ู ุงูู security (ู ู ูู ุฃู ุญุฏ ููุฑุฃูุง).
- ู ุด scalable ูู ุจุชุชุนุงู ู ู ุน data ูุจูุฑุฉ.
ุนูุดุงู ูุฏู ุชุนุงู ูุฏุฑุฏุด ุดููุฉ ุนู 4 ุจุฏุงุฆู ููู localStorage ู ู ูู ุชุณุงุนุฏู ูู ุจุนุถ ุงูุณููุงุฑูููุงุช ุงูู ุฎุชููุฉ...
โโโ
๐ ุงูู IndexedDB
- ุฏู ุนุจุงุฑุฉ ุนู database ูุงู ูุฉ ุฏุงุฎู ุงูู browser.
- ุจุชุฎููู ุชุฎุฒู structured data (objectsุ arraysโฆ) ู ุด ู ุฌุฑุฏ strings.
- ุจุชุชุนุงู ู ู ุนุงูุง ุนู ุทุฑูู APIs ุฃู libraries ุฒู Dexie.js ุนุดุงู ุชุณููู ุงูู ูุถูุน.
- ู ูุงุณุจุฉ ุฌุฏูุง ูู ุนูุฏู data ูุจูุฑุฉ ุฃู offline apps ุฒู Note Apps ุฃู Todo Apps.
- ุฃุณุฑุน ุจูุชูุฑ ูู ุงูู queries ู ู localStorage.
โโโ
๐ ุงูู sessionStorage
- ููุณ ููุฑุฉ localStorage ุจุงูุถุจุท ููู ุงููุฑู ุฅููุง ุจุชุชู ุณุญ ุฃูู ู ุง ุงูู tab ุชุชููู.
- ู ูุงุณุจุฉ ูุญุงุฌุงุช temporary ุฒู tokens ุฃุซูุงุก ุงูู session ุฃู data ู ุด ู ูู ุฉ ุชุญุชูุธ ุจูุง ุจุนุฏ ู ุง ุงูููุฒุฑ ูููู ุงูุตูุญุฉ.
- ุญุฌู ูุง ุจุฑุถู ู ุญุฏูุฏ ุฒู localStorage.
โโโ
๐ ุงูู Cookies
- ุฃูุฏู ูุฃุดูุฑ ุทุฑููุฉ ูุชุฎุฒูู ุงูุจูุงูุงุช ูู ุงูู browser.
- ู ูุฒุชูุง ุฅููุง ุจุชุชุจุนุช ุชููุงุฆู ู ุน ูู HTTP Request ููู server.
- ู ูุงุณุจุฉ ุฌุฏูุง ููู authentication (ุฒู ุงูู JWT tokens ุฃู session IDs).
- ุจุณ ุนูุจูุง ุฅููุง ุตุบูุฑุฉ (ุญูุงูู 4KB) ูุฃู data ุฒูุงุฏุฉ ู ู ูู ุชููู ุณุฑุนุฉ ุงูู requests.
- ูุงุฒู ุชุณุชุฎุฏู ูุง ููุญุงุฌุงุช ุงูุฎูููุฉ ูุงูู ูู ุฉ ุจุณ.
โโโ
๐ ุงูู Service Workers + Cache API
- ุฏู ุญู advanced ุดููุฉุ ุจูุณุชุฎุฏู ุงูู Service Workers ู ุน Cache API.
- ุจูุฎููู ุชุฎุฒู responses ูุงู ูุฉ ู ู ุงูู network (ุฒู HTML, CSS, JS, Images).
- ู ู ุชุงุฒ ููู Progressive Web Apps (PWA) ุนุดุงู ุชุดุชุบู offline.
- ุชูุฏุฑ ุชุชุญูู ูู caching strategy (ู ุซููุง: Network First, Cache Firstโฆ).
- ู ููุฏ ุฌุฏูุง ููุฃุฏุงุก (performance) ูุชุญุณูู ุชุฌุฑุจุฉ ุงูู ุณุชุฎุฏู .
โโโ
๐ก ุงูุฎูุงุตุฉ:
- ูู data ูุจูุฑุฉ: ุงุณุชุฎุฏู IndexedDB.
- ูู data ุจุณูุทุฉ ูู ุคูุชุฉ: sessionStorage.
- ูู ุนุงูุฒ data ุชุชุจุนุช ููู server: ุงุณุชุฎุฏู Cookies.
- ูู ุจุชุจูู PWA ุฃู ู ุญุชุงุฌ caching ููู: ุงุณุชุฎุฏู Service Workers + Cache API.
ููุฑ ุฏุงูู ูุง ูุจู ู ุง ุชุณุชุฎุฏู localStorage: ูู ูู ูุนููุง ุงูุญู ุงูู ูุงุณุจุ ููุง ูู ุจุฏูู ุฃูุถู ูุณุงุนุฏู ู ู ูุงุญูุฉ ุงูุฃุฏุงุก ูุงูุฃู ุงูุ
โโโ
ููููู ุงููู ููู ุฎูุฑ ๐ฟ
โค13๐1๐คฃ1
React Portals Made Simple ๐ฏ
React Portals let you render modals into separate roots, solving stacking context problems once and for all.
Tired of z-index headaches when building modals in React?
React Portals let you render modals into separate roots, solving stacking context problems once and for all.
โค3๐คฃ1
React 19: Smooth Transitions ๐
React 19 makes your UI buttery smooth!
Using startTransition, you can handle complex animations and interactions without blocking the main thread.
โค4
Why React Query?
Let me show you how React Query makes data fetching, caching, and syncing ridiculously easy.
Smarter state. Fewer bugs. Cleaner code.
Still juggling useEffect and loading spinners? ๐ค
Let me show you how React Query makes data fetching, caching, and syncing ridiculously easy.
Smarter state. Fewer bugs. Cleaner code.
โค4