![Masood Sadri](/img/default-banner.jpg)
- 40
- 138 998
Masood Sadri
Приєднався 28 жов 2009
مسعود صدری هستم، مهندس نرم افزار و مدرس برنامه نویسی.
برنامه نویسی رو از سال ۹۱ و تدریس رو از سال ۹۴ شروع کردم. در طول این سالها تجربه همکاری با تیمهای برنامه نویسی و تدریس در آموزشگاه و دانشگاه رو داشتم.
در حال حاضر چندین سال هست که همه تمرکزم برای درک و یادگیری بهتر زبان برنامه نویسی جاوااسکریپت و تکنولوژیهای مربوط به این زبان هست. در کانال یوتیوب و وبسایت فرانت کست تلاش میکنم تا مفاهیمی که یاد گرفتم رو با زبان ساده توضیح بدم.
برنامه نویسی رو از سال ۹۱ و تدریس رو از سال ۹۴ شروع کردم. در طول این سالها تجربه همکاری با تیمهای برنامه نویسی و تدریس در آموزشگاه و دانشگاه رو داشتم.
در حال حاضر چندین سال هست که همه تمرکزم برای درک و یادگیری بهتر زبان برنامه نویسی جاوااسکریپت و تکنولوژیهای مربوط به این زبان هست. در کانال یوتیوب و وبسایت فرانت کست تلاش میکنم تا مفاهیمی که یاد گرفتم رو با زبان ساده توضیح بدم.
آموزش React - بررسی ساختار دوره
در این ویدیو ساختار آموزش مقدماتی تا پیشرفته React را بررسی میکنیم.
00:00 معرفی
02:52 بررسی سرفصلها
08:50 پشتیبانی و به روز رسانی
12:04 تمرین اصلی دوره
مشاهده دوره
frontcast.ir/product/react-ts
وبسایت و شبکههای اجتماعی
frontcast.ir
masoodsadri
x.com/MasoodSadri
www.linkedin.com/in/masoodsadri
t.me/frontcast
00:00 معرفی
02:52 بررسی سرفصلها
08:50 پشتیبانی و به روز رسانی
12:04 تمرین اصلی دوره
مشاهده دوره
frontcast.ir/product/react-ts
وبسایت و شبکههای اجتماعی
frontcast.ir
masoodsadri
x.com/MasoodSadri
www.linkedin.com/in/masoodsadri
t.me/frontcast
Переглядів: 611
Відео
Next.js 15 - بررسی امکانات جدید
Переглядів 1,1 тис.Місяць тому
در این ویدیو امکانات جدید نسخه ۱۵ فریمورک Next.js را بررسی میکنیم. سرفصلها 00:00 مقدمه 03:02 افزوده شدن React 19 05:10 افزوده شدن کامپایلر React 06:41 خطا Hydration 08:23 به روز رسانی Cache 11:27 بررسی Partial Prerendering 13:59 بررسی next/after 15:18 جمعبندی مفاهیم بررسی نسخه ۱۹ کتابخانه React ua-cam.com/video/-pwzlPmeJYM/v-deo.html ua-cam.com/video/Sl6zoQ4WHpA/v-deo.html آموزش Next.js - د...
آموزش React 19 - دوره فشرده
Переглядів 1,3 тис.2 місяці тому
در این دوره فشرده نسخه ۱۹ کتابخانه React را بررسی میکنیم. سرفصلها 00:00 معرفی دوره 01:51 راهاندازی محیط توسعه 08:23 دریافت دادهها با هوک use 17:58 استفاده از هوک use برای Context 28:04 توابع Action 41:42 هوک useOptimistic 57:23 هوک useFormStatus پیشنیاز ua-cam.com/video/R7roiId3 U/v-deo.html آموزش React - مقدماتی تا پیشرفته frontcast.ir/product/react-ts سورس کد github.com/MasoodSadri/react...
React 19 - بررسی امکانات جدید
Переглядів 1,5 тис.3 місяці тому
در این ویدیو امکانات نسخه ۱۹ کتابخانه React را بررسی میکنیم. 00:00 مقدمه 03:29 افزوده شدن کامپایلر 06:09: توابع Action 09:27 سرور و کلاینت کامپوننتها 10:27 تگهای meta و title 11:06 پراپ ref 11:54 هوک use 13:14 نتیجه گیری ua-cam.com/video/R7roiId3 U/v-deo.html وبسایت و شبکههای اجتماعی frontcast.ir masoodsadri x.com/MasoodSadri www.linkedin.com/in/masoodsadri t.me/frontcast
Next.js چیست - بررسی امکانات و کاربردها
Переглядів 1,4 тис.4 місяці тому
در این ویدیو امکانات و کاربردهای Next.js را بررسی میکنیم. 00:00 مقدمه 00:54 امکانات اصلی Next.js 02:55 توسعه Fullstack 06:02 سئو و پرفورمنس 11:54 سرور کامپوننت و کلاینت کامپوننت 15:21 نتیجه گیری بررسی کتابخانه React ua-cam.com/video/flky3nPfHuM/v-deo.html دورههای فشرده Next.js ua-cam.com/video/2XtVO8bvX8s/v-deo.html ua-cam.com/video/FtEEE-gh4hs/v-deo.html آموزش جامع Next.js frontcast.ir/produ...
آموزش TypeScript - دوره فشرده
Переглядів 3,9 тис.6 місяців тому
در آموزش TypeScript مفاهیم اصلی این زبان برنامه نویسی را به صورت دقیق بررسی میکنیم. سرفصلها 00:00:00 معرفی دوره 00:01:02 پیشنیازها 00:02:17 بررسی TypeScript 00:08:01 استفاده از TypeScript 00:14:08 امکان Type Checking 00:16:41 بررسی تایپ Union 00:17:51 تایپ دادههای Object 00:21:05 تایپ دادههای آرایه 00:23:23 تایپ آرگومانهای تابع 00:27:04 بررسی تایپ توابع 00:29:00 استفاده از Custom Type 00:...
آموزش Next.js 14 - دوره فشرده
Переглядів 7 тис.8 місяців тому
در آموزش Next.js 14 مفاهیم و ساختار نسخه ۱۴ فریمورک Next.js را به صورت دقیق بررسی میکنیم. سرفصلها 00:00:00 معرفی دوره 00:01:05 پیشنیازها 00:02:06 بررسی Next.js 14 00:05:22 مستندات Next.js 14 00:09:45 راهاندازی محیط توسعه 00:14:14 نصب Next.js 00:19:11 بررسی ساختار فایلها 00:23:35 استفاده از فونتها 00:28:30 مفهوم Routing 00:34:38 استفاده از Link 00:39:10 سرور و کلاینت کامپوننت 00:42:25 مف...
آموزش React - پروژه سبد خرید
Переглядів 7 тис.Рік тому
آموزش React - پروژه سبد خرید، یک دوره فشرده برای درک بهتر مفهوم Context در React است. در طول این دوره سعی میکنیم تا یک تمرین را با رویکرد حل مسئله پیاده سازی کنیم. سرفصلها 00:00:00 معرفی دوره 00:00:57 پیش نیاز دوره 00:02:29 بررسی پروژه سبد خرید 00:04:27 راه اندازی محیط توسعه 00:07:04 بررسی و نصب Vite 00:12:49 نصب و استفاده از Bootstrap 00:15:30 توسعه کامپوننت Navbar 00:20:54 افزودن فونت و آیک...
React چیست؟
Переглядів 1,1 тис.Рік тому
در این ویدیو کتابخانه React و دلایل استفاده از آن را بررسی کردیم 00:00 مقدمه 01:12 کتابخانه React 02:10 پیاده سازی رابط کاربری 03:32 مفهوم Virtual DOM 04:48 دلایل استفاده از React ua-cam.com/video/R7roiId3 U/v-deo.html وبسایت و شبکههای اجتماعی frontcast.ir masoodsadri x.com/MasoodSadri www.linkedin.com/in/masoodsadri t.me/frontcast
آموزش Next.js - دوره فشرده
Переглядів 13 тис.Рік тому
دوره آموزش Next.js فرانت کست از پایهایترین مفاهیم شروع شده و به صورت قدم به قدم طراحی شده است. برای شرکت در این دوره هیچ نیازی به دانش قبلی درمورد Next.js وجود ندارد زیرا آموزش همه مفاهیم بهطور جامع در این دوره صورت گرفته است. یادگیری در این دوره با انجام تمرین و چالشهای مختلف به شکل عمیق انجام میشود سرفصلها 00:00:00 معرفی دوره 00:02:48 پیشنیازهای دوره 00:11:21 ساختار دوره و پشتیبانی 00:...
آموزش جاوااسکریپت - مفاهیم پیشرفته
Переглядів 9 тис.2 роки тому
دوره آموزش جاوااسکریپت - مفاهیم پیشرفته دورهای است که تمرکز اصلی آن روی مفاهیم پیشرفتهتر جاوااسکریپت است. برخی مفاهیم در جاوااسکریپت وجود دارد که به دلیل پیچدگی زیاد، کمتر به آنها پرداخته میشود. این مفاهیم از اهمیت زیادی برخوردار هستند و در بسیاری از پروژههای بزرگ مورد استفاده قرار میگیرند. شرکتهای معتبر نیز در مصاحبههای استخدامی از این مباحث برای ارزیابی متقاضیان خود استفاده میکنند. ...
آموزش React - دوره فشرده
Переглядів 26 тис.2 роки тому
این دوره یک دوره فشرده است که آموزش از ابتداییترین مباحث شروع میشود و تمرکز اصلی در طول دوره بر روی مفاهیم مهمتر کتابخانه ریاکت خواهد بود. دوره فشرده ریاکت مناسب دو گروه از افراد است، گروه اول افرادی که هیچ آشنایی با این کتابخانه ندارند اما علاقمند به یادگیری آن هستند و گروه دوم افرادی که قصد دارند مهمترین مفاهیم را در زمان کوتاه مرور کنند سرفصلها 00:00:00 معرفی دوره 00:01:46 کتابخانه Re...
آموزش Node.js - دو ساعت از دوره
Переглядів 4,6 тис.2 роки тому
Node.js یک ابزار قدرتمند برای اجرای جاوااسکریپت در خارج از مرورگر است. در حالت عادی، زبان برنامه نویسی جاوااسکریپت توسط مرورگر تفسیر میشود. Node.js این قابلیت را دارد که برنامههای توسعه داده شده توسط این زبان را برای هر پلتفرمی اجرا کند. یکی از این پلتفرمها، بکاند نرم افزارهای تحت وب است. با توجه به این که Node.js این امکان را به ما میدهد که از جاوااسکریپت برای توسعه بکاند استفاده کنیم، د...
یادگیری برنامه نویسی وب - فرانتاند و بکاند
Переглядів 2,3 тис.3 роки тому
برنامه نویسی وب یکی از کاربردیترین گرایشهای برنامه نویسی است. همین طور تنوع تکنولوژیها و روند رو به رشد بازار کار باعث افزایش محبوبیت این حوزه شده است. در این ویدیو سعی کردهایم مسیر یادگیری برنامه نویسی وب را به صورت دقیق و جامع بررسی کنیم. جاوااسکریپت در دو ساعت ua-cam.com/video/oUjQ7eP38H8/v-deo.html بررسی و مقایسه Angular - Vue - React ua-cam.com/video/rBKNkA5xqWo/v-deo.html توسعه API با...
توسعه API با Node و Express
Переглядів 3,2 тис.3 роки тому
نود و اکسپرس یکی از کاربردیترین ابزارها برای توسعه وب اپلیکیشن هستند. با استفاده از این ابزارها و زبان برنامه نویسی جاوااسکریپت میتوانیم نرم افزارهای تحت وب با موضوعات متنوع را پیاده سازی کنیم. در این دوره آموزشی کوتاه سعی کردیم مفاهیم نود و اکسپرس را با پیاده سازی ایپیآی بررسی کنیم. سرفصلها: 00:00:00 معرفی 00:00:47 بررسی API 00:03:39 ساختار API 00:04:43 ساختار نرم افزار 00:07:25 بررسی Nod...
توسعه دارک مود در ریاکت - React Hooks Dark Mode
Переглядів 1 тис.3 роки тому
توسعه دارک مود در ریاکت - React Hooks Dark Mode
ساختمان داده و الگوریتمها در جاوااسکریپت - یک ساعت از دوره
Переглядів 3,1 тис.3 роки тому
ساختمان داده و الگوریتمها در جاوااسکریپت - یک ساعت از دوره
بررسی و مقایسه Angular - Vue - React
Переглядів 3 тис.3 роки тому
بررسی و مقایسه Angular - Vue - React
فرآیندهای Asynchronous در جاوااسکریپت
Переглядів 1,5 тис.3 роки тому
فرآیندهای Asynchronous در جاوااسکریپت
ساخت درخواستهای HTTP با استفاده از هوک useEffect
Переглядів 8963 роки тому
ساخت درخواستهای HTTP با استفاده از هوک useEffect
توسعه Todo App با NodeJS ،ReactJS و MongoDB - قسمت چهارم
Переглядів 7974 роки тому
توسعه Todo App با NodeJS ،ReactJS و MongoDB - قسمت چهارم
توسعه Todo App با NodeJS ،ReactJS و MongoDB - قسمت سوم
Переглядів 5204 роки тому
توسعه Todo App با NodeJS ،ReactJS و MongoDB - قسمت سوم
توسعه Todo App با NodeJS ،ReactJS و MongoDB - قسمت دوم
Переглядів 5174 роки тому
توسعه Todo App با NodeJS ،ReactJS و MongoDB - قسمت دوم
سلام من یه مشکلی دارم ممنون میشم راهنماییم کنید من با هربار زدن crtl + s داخل IDE پروژه کلا ریفرش میشه (nextjs) و با هر تغییر کوچیکی برای اسلاین ریفرش شدنه داره عزیت میکنه و hot reload نمیشه مثل قبل ممنون میشم راهنماییم کنید package.json: { "name": "", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@headlessui/react": "^2.1.2", "@mui/material": "^5.16.5", "@mui/styled-engine-sc": "^6.0.0-alpha.18", "@mui/x-date-pickers": "^7.11.1", "@reduxjs/toolkit": "^2.2.6", "@tanstack/react-query": "^5.35.1", "@tanstack/react-query-devtools": "^5.51.11", "axios": "^1.6.8", "chart.js": "^4.4.3", "dayjs": "^1.11.12", "formik": "^2.4.6", "next": "^14.2.4", "nextjs-toploader": "^1.6.12", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0", "react-hook-form": "^7.52.1", "react-icons": "^5.2.0", "react-redux": "^9.1.2", "react-select": "^5.8.0", "react-toastify": "^10.0.5", "styled-components": "^6.1.12", "sweetalert": "^2.1.2", "yup": "^1.4.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.3", "postcss": "^8", "tailwindcss": "^3.4.3", "typescript": "^5" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } }
زمان اجرا جی سان سرور این اررور میاد : npm error Missing script: "server" npm error npm error To see a list of scripts, run: npm error npm run npm error A complete log of this run can be found in: /Users/Milad/.npm/_logs/2024-08-01T13_22_03_396Z-debug-0.log
بسیار عالی صحبت میکنید و صدای مناسبی دارید اصلا خسته کننده نیست. کلامتون شیوا و رساست. کتاب صوتی هم میتونید منتشر کنید👍
Congratulations, it was great 👏👏👏💯😍 ممنونم مهندس
بهترین کمکی که یک ویدئو میتونست به من بده . . . واقعا دمت گرم عشقی💖💖
مختصر و مفید ممنونم از زحمتی که کشیدین جهت ظبط ویدیو
درود ، ریداکس و ریکت کوئری تدریس میشه در این دوره ؟
@@reza8733 خیر، برای این مفاهیم دورههای فشرده مجزا آماده میکنم.
دمتون واقعا گرم بهترین معلم هستین شما
ممنونم، لطف دارین.
عالی بود. ممنونم
دوره داخل کانال یوتویوب هست یا داخل سایت ؟
داخل سایت: frontcast.ir/product/react-ts فصل اول رو هم اینجا میتونید ببینید: ua-cam.com/video/dboko4Eccfg/v-deo.html
خیلی وقت بود منتظر انتشار این دوره بودم😍 خسته نباشید استاد🙏
ممنونم، لطف دارین
درود استاد،،وارد نکست نمیشید توی این دوره؟
تمرکز این دوره فقط برای React هست. برای Next.js دوره جامع مجزا در سایت و دو دوره فشرده در کانال یوتیوب داریم.
اگر میشه آموزش nuxt را هم در سایتتون قرار بدید ، ممنون
آنگولار که اونقدر سنگینه مثل اینه برای داشتن تاب یه شهربازی اد کنی به پروژه و برای پروژه های تجاری بزرگ مناسبه. جاوااسکریپت لقبش زبان شلخته است و ریاکت نتونسته این صفت رو باطل کنه چون کتابخونه است و هر بخش اون رو یه نفر دیگه نوشته بدون لحاظ کردن سازگاری با ابزارهای دیگه اش. حالا خیلی ها میگن این مزیته چون دستت رو برای انتخاب باز میذاره. بماند که خود نُدجیاِس با اون پکیج منیجر فاجعه و وابستگی های شخمی و الکی که نصب میکنه، حال آدمو بهم میزنه. در حالی که ویو رسماً یک فریمورک منظم و مهندسی شده است که سازنده اش جزو تیم فریمورک آنگولار بوده. در یک شئ ویو شما لازم نیست کد رو قبلاً مطالعه کرده باشی که ازش سر در بیاری چون هر چیزی جای خودشو داره و لالوی هم نریختن کدها رو و این یعنی کلین کد به معنای غائی و آلتیمیت. اما قشنگ ترین چیز در ویو اینه که روتینگ یا مسیر دهی پیج ها رو میشه با بک اند قاطیش کرد! یعنی مجبور نیستی محدود به مسیردهی کاذب در فرانت یا مسیردهی کلاسیک سمت سرور باشی! این برای سئو هم محشره. فقط فکرشو بکنید که لاراول باهاش در سازگاری محض قرار داره. آخرین چیز جالب در ویو هم که خودم خیلی باهاش حال میکنم و شاید حرفه ای به نظر نیاد، بی نیازی ویو به نُدجیاِس هست! یعنی میتونی یه فایل صد کیلوبایتی عین جیکوئری لود کنی توی پیج و دیگه کلاً به جای جاوااسکریپت پیور، فقط ویو بنویسی بدون اینکه نیاز به نصب نُدجیاِس باشه و کمپایل لازم باشه! کتاب «آموزش سریع Vue» و کتاب «اموزش تصویری Laravel» رو هم در سایت طاقچه از من ببینید.
💯💯💯
عالی
سلام خیلی عالی و اصولی توصیح دادین ممنون میشم پروژه های بیشتری بزارین 😊
Best teacher, thanks☺️
create-react-app منسوخ شده؟ استاد
منسوخ نه ولی Vite انتخاب منطقیتری هست.
یک سوالی داشتم،مثلا برای ساخت سایت فروشگاهی که فرانت با ری اکت هستش،برای بک اند next.js کافی هستش یا نه،باز هم به ابزار های دیگه برای بک اند نیاز پیدا میکنیم؟؟
میتونید برای بکاند هم از نکست جیاس استفاده کنید ولی به نظرم اگر ساختار بکاند برنامهتون پیچیدگیهای زیادی داره Express گزینه بهتری میتونه باشه.
awliiie
👏😍
مسعود جان، ممنون از شما. خیلی بیان شیوا و روانی داری و با ارامشی که تو گفتارت هست موضوع رو به خوبی منتقل میکنی.
سپاس فراوان از توضیحاتتون❤🌹
Next js 15 هم اومده توضیح بدین لطفاً
در موردش صحبت کردیم: ua-cam.com/video/KcxP4T2-um8/v-deo.html
فوق العاده 🎉🎉
سلام اگه میشه اموزش زدن پنل برای سایت روشگاهی با next بزارید 😍🤩
دم شما گرم❤❤❤❤
استاد چرا برای من ارور (reading map)میده؟
مثل همیشه عالی👌👌👍👍
عالی بود
مچکرم بسیار مفید بود
فوق العاده ❤
سلام عالی بود مرسی . محتوای وب فارسی به افرادی مثل شما نیاز داره ❤️🙏
امیدوارم ادامه دار باشه
اقا من شما رو از پادکست پیدا کردم و خیلی خوشحالم یه ایرانی داره آموزش رو به شکل حرفه ای انجام میده
ممنونم از لطفتون.
عالی استاد، بسیار ساده و روان، بهترین آموزش جاوااسکریپتی که تابه حال دیدم👌👌👍👍
با ارزش بود ممنون ♥
amazing video . really appreciate your effort
ممنون واسه چنین ویدیو هایی . شما تاثیر بسزایی در کامیونیتی فرانت اند فارسی تو یوتیوب گذاشتید . امیدوارم چنین ویدیو ها ادامه دار باشه .
ممنونم از لطفتون🙏🏻
مثل همیشه عالی❤
اقای صدری سلام یکی شمایید یکی هم اقای نجفی فوق العاده یید تو بحث اموزش فقط یه مشکلی که خودم احساس میکنم اموزش کم از type script هستش و اینکه شما به عنوان منتور باید بیشتر کلیپ هایی در زمینه ی جهت دادن برنامه نویسان به زبان و فرم ورکی که خودتون میدونید اینده داره مثلا فلاتر راجع بهش بیشتر صحبت کنید ممنونم بازم
عالی بود👌
ممنون برای این آموزش , اگر میشه یک آموزش برای بهبود پرفورمنس nextjs بزارید. برای مثال ایمپورت کردن framer-motion خیلی حجمش زیاده چیکار باید گرد؟
ممنونم، حتما.
Kheili Khub bood, Merci 🙏
بسیار عالی 🎉 لطفاً آموزش prisma هم داخل کانال قرار بدید🙏🙏
mamnon az video khobeton
دمت گرم مسعود جان مثل همیشه عالی بود کارت درسته واقعا
ویدیوی بسیار خوبی بود واقعا ممنونم