آموزش جاوااسکریپت در توسعه مدرن وب - آخرین آپدیت

سرفصل ها و درس ها

محتوای اضافی: مبانی React EXTRA CONTENT: React Basics

• کامپوننت چیست؟ What is a component?

• مبانی React | مهم‌ترین بخش برای یادگیری React React fundamentals - the most important lecture for learning React

محتوای اضافی: Node.js و Vite قالب React EXTRA CONTENT: Node.js & Vite - React Template

• Node.js و npm چیستند؟ What is Node.js and npm?

• نصب Vite و ساختار React Installing Vite and React structure

• تبدیل اپلیکیشن تک‌فایلی به چندفایلی | تحلیل ساختار پروژه React Single file app to multiple files app - analyzing structure of React project

• چگونه یک کامپوننت بسازیم و آن را به App.jsx متصل کنیم؟ How to create a component and connect it to App.jsx

محتوای اضافی: Props در React EXTRA CONTENT: React Props

• Props چیستند و چگونه از آن‌ها استفاده کنیم؟ What are props and how to use them?

ساخت بازی در React: بازی استخراج معدن AutoClicker | بخش اول Game in React: AutoClicker Mining Game - PART 1

• مقدمه: قرار است چه چیزی بسازیم؟ Intro: What are we gonna create?

• مثال: ساخت کامپوننت اصلی GoldMiner Ex. Create GoldMiner Main comp

• ارتقای قدرت Gold Miner Gold Miner Power Upgrade

• توابع به‌روزرسانی در React Hooks Updater Functions in React Hooks

• [تمرین] رابط کاربری Auto Clicker و هوک‌ها [EXERCISE] Auto Clicker GUI and hooks

• استفاده از useEffect در یک مثال عملی: AutoClicker useEffect on practical example: AutoClicker

• غیرفعال کردن شرطی یک دکمه در React با استفاده از ویژگی disabled Conditionally Disabling a Button in React Using the 'disabled' Attribute

ساخت بازی در React | بسته‌های خارجی: lucide, framer, lodash | بخش دوم Game in React | External Packages: lucide, framer, lodash - PART 2

• نصب lucide react | استفاده از آیکون‌ها در بازی Installing lucide-react - let's apply icons to our game

• چگونه CSS را به کامپوننت‌ها اعمال کنیم (className) How to apply CSS to components - className

• نصب Framer Motion در React | اضافه کردن انیمیشن به پروژه! Installing Framer Motion in React - let's bring animation to our project!

• اضافه کردن انیمیشن ساده با استفاده از Framer Motion به اپلیکیشن Let's add simple animation using Framer Motion to our app

ساخت بازی در React | بازنویسی کد (Refactoring) | بخش سوم Game in React | Refactoring Code | PART 3

• استفاده از animationProps | استفاده از object destructuring برای بهبود کار با انیمیشن ...animationProps - let's use object destructuring to improve animation work

• بسته lodash.merge | نحوه ادغام props در یک مثال عملی lodash.merge package - how to merge props on a practical example

• ساخت کامپوننت‌های تابعی | بازنویسی کد Creating functional components - let's refactor our code

• پوشه util و تنظیمات animations.jsx برای کل اپلیکیشن util folder with animations.jsx settings for entire app

• استفاده از AnimatePresence | چگونه انیمیشن خروج (exit) بسازیم؟ AnimatePresence - how to make 'exit' animation

• ماژول‌های CSS | اعمال محدوده (scope) به CSS خود CSS modules - let's apply scope to our CSS

ساخت بازی در React | Context Provider | Local Storage | بخش چهارم Game in React | Context Provider | Local Storage | PART 4

• ساخت دکمه تغییر تم (ThemeToggleButton) Create ThemeToggleButton

• متن شرطی | تغییر از حالت تاریک به روشن و بالعکس Conditional text - Dark to Light, Light to Dark

• [تمرین] دکمه از بسته خارجی | تغییر تم با انیمیشن SVG [EXERCISE] Button from external package - change theme with SVG animation

• جداسازی دکمه‌ها و بررسی وضعیت State مشترک Separate buttons and see what's happening with 'shared' state

• چگونه Context Provider بسازیم؟ | ساخت ThemeProvider How to create Context Provider? - Let's create ThemeProvider

• استفاده از Local Storage | چگونه سیستم ذخیره‌سازی بازی را در ۵ دقیقه پیاده‌سازی کنیم؟ use-state-local-storage - how to implement SAVE system in our game in 5 min?

استقرار پروژه (Deployment) Deployment

• چگونه اپلیکیشن React خود را به یک صفحه استاتیک تبدیل کنیم؟ How to build your React app into a static page?

استفاده از Electron در React و Vite Electron in React & Vite

• Electron چیست و چگونه اپلیکیشن React ما را اجرا می‌کند؟ What is Electron and how to make it run our React app?

• چگونه از اپلیکیشن React خود فایل EXE با Electron بسازیم How to build Electron EXE from our React app

اپلیکیشن‌های وب پیشرو (PWA) PWA (Progressive Web Apps)

• PWA چیست؟ What is PWA?

• تبدیل اپلیکیشن HTML/CSS/JS به یک PWA Transform your HTML/CSS/JS app into a PWA

• استفاده از NPX برای تولید آیکون‌های مورد نیاز NPX - executing package to generate required icons

PWA و React | دکمه نصب PWA | مدیریت رویدادها در React PWA & React - PWAInstallButton - Catching Events in React

• نمایش یک مشکل | ساخت کامپوننت PWAInstallButton (۱) Showcase of a problem - creating PWAInstallButton component (1)

• کنترل نمایش کامپوننت در React از طریق دستور return (۲) Controlling visibility of component in React from return statement (2)

• دریافت و جلوگیری از رویداد (۳) Catching and preventing event (3)

• چگونه Promise مربوط به درخواست کاربر برای نصب PWA را حل کنیم؟ (۴) How to resolve Promise from prompted user to install PWA app? (4)

Express | بک‌اِند برای React Express - Backend for React

• چگونه Express را راه‌اندازی کنیم؟ تنظیم بک‌اِند اپلیکیشن How to set up Express? How to set up the backend of your app?

• استفاده از nodemon | نظارت خودکار بر تغییرات سرور nodemon - how to automatically monitor changes on the server

• دریافت داده از Express در یک کامپوننت React Fetching data from a React component from Express

• نمایش پیام "در حال بارگذاری" هنگام دریافت داده "Loading" message while fetching data

• React Spinner | چرخاندن پیام بارگذاری React Spinner - let's 'spin' the loading message

• [تمرین] React Toastify | اطلاع‌رسانی حرفه‌ای به کاربر [EXERCISE] React Toastify - notifying user like a pro

React | نمایش لیست‌ها و فرم‌ها در React React - Displaying Lists & Forms in React

• استفاده از Map | نمایش آیتم‌ها از لیست‌ها Map - displaying items from lists

• استفاده از key | چگونه با uuid کلیدهای منحصربه‌فرد بسازیم key - how to generate unique keys using uuid

• استفاده از filter | فیلتر کردن و حذف عناصر از لیست filter - filtering and removing elements from a list

• آیتم تسک جدید | دسترسی به فرم‌ها با استفاده از DOM | فرم‌های Uncontrolled New task item - accessing forms using DOM - uncontrolled forms

• استفاده از useRef | دسترسی و ارجاع به DOM useRef - accessing/referencing DOM

• ورودی‌های کنترل شده (Controlled Inputs) در React - controlled inputs in React

• چگونه در React فرم بسازیم؟ - how to create forms in React?

• [تمرین] استفاده از useRef | مثال عملی: refocus [EXERCISE] useRef - practical example - refocus

• استفاده از sort() | چگونه یک لیست را مرتب کنیم؟ sort() - how to sort a list?

• [تمرین] چگونه دکمه مرتب‌سازی صعودی/نزولی بسازیم [EXERCISE] How to create a toggle asc/desc sorting button

بازنویسی کد | تقسیم کامپوننت‌های بزرگ Refactoring Code - Splitting Big Components

• چرا کد را بازنویسی (Refactor) می‌کنیم؟ روش انجام آن و ترفند سرعت بخشیدن Why do we refactor the code? How to do it? A trick to do it faster

• [تمرین] بازنویسی کامپوننت Task Item [EXERCISE] - Refactor Task Item Component

• بازنویسی: TaskForm REFACTOR: TaskForm

مبانی MySQL برای توسعه‌دهندگان جاوااسکریپت [GN4.1] MySQL Basics for JavaScript Developers[GN4.1]

• دیتابیس چیست؟ What Is Database?

• نصب MySQL با استفاده از XAMPP Installing MySQL Using XAMPP

• چگونه اولین دیتابیس خود را با SQL/phpMyAdmin یا هوش مصنوعی بسازیم؟ How to Create Your First Database Using SQL/phpMyAdmin or AI?

• جدول چیست و چگونه آن را بسازیم؟ What Is Table and How to Create It?

• چگونه یک رکورد جدید به جدول اضافه کنیم؟ How to Insert/Add a New Record to Table?

• چگونه رکوردها را از جدول SELECT کنیم؟ How to SELECT Records From Table?

• استفاده از LIMIT و ORDER BY | چگونه داده‌ها را مرتب و فیلتر کنیم؟ LIMIT & ORDER BY in SELECT – How to Sort and Filter Data?

• استفاده از DISTINCT | چگونه مقادیر غیرتکراری را انتخاب کنیم DISTINCT – How to Select Unrepeatable Values

• استفاده از WHERE | فیلتر کردن و محدود کردن نتایج WHERE – Filtering – Narrowing Down the Result

• استفاده از WHERE با عملگر AND | اتصال و مقایسه WHERE – AND – Conjunction – Comparison Operator

• استفاده از WHERE با عملگر OR WHERE – OR

• استفاده از IS NOT NULL | بررسی مقادیر IS NOT NULL – Reviews

• استفاده از BETWEEN BETWEEN

• استفاده از LIKE | جستجوی شباهت در متن LIKE – Looking for Similarities Inside a Text