آموزش React - دوره فشرده

این دوره یک دوره فشرده است که آموزش از ابتدایی‌ترین مباحث شروع می‌شود و تمرکز اصلی در طول دوره بر روی مفاهیم مهم‌تر کتابخانه ری‌اکت خواهد بود. دوره فشرده ری‌اکت مناسب دو گروه از افراد است، گروه اول افرادی که هیچ آشنایی با این کتابخانه ندارند اما علاقمند به یادگیری آن هستند و گروه دوم افرادی که قصد دارند مهم‌ترین مفاهیم را در زمان کوتاه مرور کنند
سرفصل‌ها
00:00:00 معرفی دوره
00:01:46 کتابخانه React
00:07:15 بررسی Create React App
00:09:35 محیط توسعه
00:12:06 نصب Node
00:15:14 بررسی ساختار پروژه
00:19:42 پیاده سازی کدها
00:25:34 دستورات JSX
00:28:13 کامپوننت‌ها
00:31:05 کامپوننت‌ها در فایل‌ها مجزا
00:34:25 استفاده مجدد از کامپوننت‌ها
00:37:31 افزودن استایل
00:44:47 استفاده از Props
00:48:38 بهینه سازی دستورات
00:50:14 مدیریت Eventها
00:55:52 لیست‌ها و Key
01:03:33 بررسی State
01:14:41 استفاده از داده‌ها در کامپوننت‌ها
01:20:16 حذف آیتم‌ها
01:26:42 کامپوننت فرم
01:32:37 بررسی State فرم
01:38:47 Submit در فرم
01:45:12 افزودن آیتم‌ها
01:49:09 بررسی API
01:54:47 استفاده از JSON Server
02:02:24 دریافت داده‌ها از API
02:11:04 حذف داده‌ها
02:13:59 ارسال درخواست POST
02:16:55 ادامه مسیر یادگیری React
پیش‌نیاز
• آموزش جاوااسکریپت - دو...
سورس کد
github.com/MasoodSadri/react-...
وب‌سایت و شبکه‌های اجتماعی
frontcast.ir
/ masoodsadri
x.com/MasoodSadri
/ masoodsadri
t.me/frontcast

[@SeyedMajidkhorashadizadeh]

مسعود جان، ممنون از شما. خیلی بیان شیوا و روانی داری و با ارامشی که تو گفتارت هست موضوع رو به خوبی منتقل میکنی.

[@hosseinwl]

سپاس فراوان از توضیحاتتون❤🌹

[@erfanheshmati]

مثل همیشه عالی👌👌👍👍

[@hojifa9443]

عالی

[@saberahmad1330]

واقعا خیلی زیبا و قابل فهم و مسلط توضیح میدین، دست مریزاد، خسته نباشید 👍

[@rasoulhosseini24]

وای وای وای too many information 😅😍🤩 مرسیی واقعا استاد! چقدر واضح و دقیق وقابل فهم توضیح دادین! عالی بود❤

[@Sinaheidari]

فوق العاده بود🙌😍

[@TasmeTime]

thanks for the content🔥🔥

[@The.mohisa]

خیلی عالی بود ممنونم🤓🙏🏼

[@maedez4189]

Excellent ✔️

[@mammad.amohammad1954]

بسیار عالی ماشاالله...

[@miladdhgh8077]

واقعا عالی بود 😀❤️

[@danestanigram]

ممنون از زحمات شما استاد

[@MohamadWyatt]

عالی بود ممنون

[@MaziarHassanzadeh]

Perfect👍عالی، ممنون

[@hoseinbonyadi9046]

thank you men

[@programmers_code5989]

very helpful

[@rambodranjbar8477]

خیلی خیلی عالی بود ممنون از شما

[@mohsensafi7778]

perfect

[@mahdimosavi5799]

The best

[@acaxfdjgyuugft]

واقعا فوق العاده بود ممنون

[@MasoodSadri]

خیلی ممنونم

[@mohamadsokhango7202]

عالی بود🙏

[@abadaarafi8516]

واقعا عالی

[@hasan_abouie]

خیلی خوب توضیح دادین. ممنون از شما❤

[@MasoodSadri]

ممنونم🙏🏻

[@leilakefayati5238]

خیلی عالی بود

[@alisalehi7431]

عالی مهندس 👌

[@mosayyebnezhad]

خیلی خوب بود

[@AidaHashemii]

that was great,thank you

[@farhadmirzapour]

واقعا عالی بود ... ممنون بابت آموزشتون

[@MasoodSadri]

ممنونم🙏🏻

[@hamidakbari1679]

great

[@mohammadjawad5085]

خیلی عالی بود. دمتون گرم

[@MasoodSadri]

ممنونم

[@elhambgh]

مرررسی عالیییی بود ممنون بابت این ویدئوی عالیییی🌸

[@MasoodSadri]

ممنونم🙏🏻

[@hosseinsiahkamari6844]

perfect🤩🤩🤩🤩🤩🤩🤩

[@hesammirzaee4422]

مثل همیشه عالی بود

[@MasoodSadri]

ممنونم

[@sajjadkazemi]

خیلی عالی👌

[@MasoodSadri]

ممنونم

[@moham158]

Tanks

[@saeidvaygani9709]

مرسی مهندس

[@MatinHosseiniofficail1]

عالی بود استاد

[@hamidrezadelshad2350]

دم شما گرم چقدر عالی و خوب توضیح داد همه چی رو مختصر و مفید گفتید باصدای کاملا رسا و عالی.

[@fea1436]

خیلی خوب و عالی. دمتون گرم ;-)👏👏👏👏

[@Queen88882]

خدا خیرت بدههههه
جدا دمتون گرمممم❤

[@fahimeabouhamze6618]

آقای صدری بسیار عالی بود ممنونم خیلی از نحوه آموزش شما لذت بردم

[@mhdi_nzari]

دمت گرم سلطان عالی بوددددددددددددد

[@farahnazfarah-ho5ot]

چقدر عالی با جزییات و ساده توضیح دادین ممنونم

[@maharatpadideh2357]

مسعود جان ممنون از آموزش بی نظیرت

[@madare-hameye-bacheha]

سلام بر شما .... بسیار بسیار بسیار عالی ... خداقوت .... باعث افتخار هستید

[@mednejad]

بهترین ویدئوی آموزشی ری اکت بود که دیدم. سپاس 🙏

[@MasoodSadri]

ممنونم از لطفتون

[@naanavaa8414]

Thank you dear colleague

[@alifallahrn]

همه چیز عالی بود واقعا. ممنون بابت ضبط این دوره فشرده 🙏❤

[@MasoodSadri]

مرسی از لطفتون🙏🏻

[@azadiyazdani9510]

عالی بود. مختصر و موجز و کاربردی. فیلم های قبلی که داشتم توضیحات طولانی و درهم و برهم داشتند و ورژن شون هم قدیمی بود. فیلم شما عالی بود

[@alitorabian5616]

Merc agha masoud Vaghan perfect merc

[@MasoodSadri]

🙏🏻

[@M_Hosseini80]

آموزش عالی بود، در سطح آموزش‌های تاپ انگلیسی زبان👌🏽

[@MasoodSadri]

خیلی ممنونم

[@AminSani]

آفرین به شما که همیشه بروز هستین و دوره تون رو بروز می کنین
من دوره ای که توی سایت هست رو هم تهیه کردم ولی همش می گفتم کاش همش فانکشن باشه به جای کلاس
که میبینم توی این ویدئو هست و خیلی عالیه واسه منی که خیلی جونیورم

[@MasoodSadri]

ممنونم، البته دوره سایت یک دوره جامع هست برای همین هم کلاس رو بررسی کردیم و هم توابع

[@mohsenparsa7972]

استاد عزیزم بعد از خدای اولم شما خدای دوم من هستی ممنووووووووووووون🌹🌹🌹🌹🌹🌹❤❤

[@farnazmoghadam9598]

وای خدای من چقدر عالی چقدر دعا میکردم چنین آموزشی پیدا کنم ، واقعا خدا خیرتون بده یه دنیا تشکر موفق و شاد باشین

[@MasoodSadri]

ممنونم، امیدوارم براتون مفید باشه

[@MTmoltafet]

can't w8 for ExpressJS Crash Course, thanks mr Sadri

[@MasoodSadri]

پیشنهاد می‌کنم این دو تا ویدیو رو ببینید
ua-cam.com/video/4gCM1HPDSlg/v-deo.html
ua-cam.com/video/qT_x51bivgs/v-deo.html

[@zainabjafari8494]

👍👍

[@fvgr94]

داداش دمت گرم خدایی. خیلی کامل و ساده و قابل فهم گفتی و چون پروژه محور بود قشنگ فهمیدم چی بود داستان و سورسشم که دادی دیگه عالی. خدا قوت همینجوری ادامه بده سپاس فراوان

[@The.mohisa]

Thanks for this amazing content about React🙏🏼🙏🏼👌🏼

[@abadaarafi8516]

انشالله ویدئو بیشتر از اموزش خوبتون بزاید واقعا لایق بهترینا هستین باتشکر

[@MasoodSadri]

ممنونم از لطفتون

[@samrazmpoush1259]

واقعا بدون وقت کشی وحرفه ای بود.جای قدردانی داره

[@MasoodSadri]

ممنونم🙏🏻

[@mahdira827]

بعد از دوهفته چرخیدن توی محتوای فارسی باید بگم بهترین آموزش و به روزترین آموزش بود.ایول

[@mahdira827]

یه سوال داشتم داخل سایت نتونستم بپرسم.دوره ری اکت جامع کامپوننت ها بصورت کلاسی آموزش داده شده یا فانکشنی؟

[@Par3awbit]

یه دنیا سپاس برای آموزش مفیدتون و مهم تر از همه اینکه خیلی با حوصله و دقیق ریکت رو مرور کردین برامون، خیلی از مطالب مرور شد برام 😍💻 با آرزوی موفقیت براتون 🔥

[@MasoodSadri]

خیلی ممنونم، خوشحالم که مفید بوده براتون

[@shah-mohammad]

صدا و نحوه شرح دهید عالی
زنده باشید
خیلی دوره مفید است
تشکر زیاد

[@MasoodSadri]

ممنونم🙏🏻

[@sunboy2]

مننون از توضیحات خوبتون 🌹🌹🌹🌹
اگه میشه یه آموزش هم برای GIT درست کنین

[@MasoodSadri]

لطفا این ویدیو رو ببینید: ua-cam.com/video/Xr3dtySvFiM/v-deo.html

[@kawasakininja241]

سلام
لطفا یه دوره ی کامل vue هم در سایت فرانت کست ضبط کنید
استفاده از این فریمورک روز به روز داره بیشتر میشه
مرسی

[@MalekCode]

خیلی ممنون از توضیحات عالی تون🌸
دیروز این ویدیو پرایویت کرده بودین فکر کردم برای دانشجوهای مخصوص تعبیه کردین 😮‍💨
ولی الان میتونیم ببینیم 🥳
مرسی از لطفتون😍

[@MasoodSadri]

ممنون

[@mahdiaf7919]

همچی عالی بود تا وقتی به مبحث state رسیدیم 😅 چندباری باید نگاه کنم

[@masoudbeigiOfficial]

State ها منم متوجه نشدم .چرا اینطوریه ؟

[@azadehghasemi3244]

سلام ممنون از دوره مفید و مختصرتون . بنظر شما کدوم مورد رایج تر هست در ری اکت Functional Components یا Class Components ؟

[@mohammadsolgy9927]

خداقوت آقای صدری عزیز بسیار بیان شیوایی در بیان مطالب دارید
خیلی کوتاه و مفید مطالب رو بیان میکنید
ممنون از اموزش خوبتون امیدوارم ادامه داشته باشه
زنده باشید و برقرار

[@MasoodSadri]

خیلی ممنونم

[@geaseoliveiradarosa5492]

Masood Sadri please put your titles in English. Greetings from Brazil

[@shimagolestani8889]

fogholade bud baraye avalin bar ye amozesh ghable dark baraye barnamenevisi didam☺☺👌

[@MasoodSadri]

ممنونم از لطفتون🙏🏻

[@user-ks1wh5zl4g]

ببخشید اکستنشن های مورد استفادتون در vscode رو میشه بگید

[@javadkh9400]

ممنون بابت وویدیو.
فقط یه سوال برام پیش اومده ممنون میشم جواب بدید.
حدودا دقیقه 50 میشه توضیح بدید چطوری با destructuring کار کردید؟

[@mammad.amohammad1954]

استاد یه تخفیف عالی روی دوره ها بزارید!!!!!!

[@MasoodSadri]

انشاالله برای نوروز

[@masoudbeigiOfficial]

salam , agar imkan darad , gesmat state ra dobareh , ba rasm shekl tozih bedahid . kheili aliiii bood , mamnoon

[@MasoodSadri]

ممنونم، ویدیوهای دوره رو می‌تونید از سایت دانلود کنید frontcast.ir

[@somayeh4209]

سلام عالی بود 🙏🏻
سورس کد ار گیت هاب میشه دانلود کرد

[@MasoodSadri]

ممنونم، بله می‌تونید دانلود کنید

[@pegahpasha1959]

سلام وق شما بخیر
من دارم همراه با آموزش شما پیش می رم و بسیار مفید هست، از شما ممنونم
فقط این قسمت رو خیلی خوب متوجه نشدم که چرا برای تایتل از عملگر ... استفاده کردیم
const newPoduct = {id, ...title}

[@MasoodSadri]

سلام، ممنونم
برای درک بهتر این عملگر پیشنهاد می‌کنم دوره فشرده جاوااسکریپت رو در کانال بررسی کنید:
ua-cam.com/video/oUjQ7eP38H8/v-deo.html

[@user-ks1wh5zl4g]

1:49:04 روز اول 😁
2:19:59 روز دوم

[@samikia6691]

ye soal chera pasvand fil ha ro js menevisid va jsx neminevisid?

[@alipashamehrdad276]

سلام با تشکر از شما
در قسمت اعمال استایل
کد های css من اعمال نمیشود
چیکار باید انجام دهم
آیا به خاطر update این ۸ ماه است؟

[@MasoodSadri]

سلام
نه به آپدیت مربوط نمی‌شه. لطفا از کدهای من در گیت‌هاب استفاده کنید. لینک در توضیحات ویدیو هست

[@DarkKing-ho5ef]

استاد چرا برای من ارور (reading map)میده؟

[@alibagheri7431]

سلام استاد عزیز وقتتون بخیر
استاد من برنامه نویسی رو به صورت خودآموز شروع کردم چون هزینه های دوره ها و کلاس ها خیلی برام سنگینه و الان که حدودا 3 سالی میشه که درحال یادگیری برنامه نویسی هستم و توی این 3 سال خیلی راه اشتباه رفتم و کل این فرایند از منابع رایگان استفاده کردم .
به نظرتون دوره ی react و redux جامع که توی سایت قرار دادین اگه مباحثشو به صورت کامل یاد بگیرم میتونم وارد بازار کار بشم؟
ممنون از زحماتتون ❤

[@baharenamjoo]

بعد از یادگیری html+css بریم سراغ جاوااسکریپت بعد ری اکت؟

[@MasoodSadri]

بله، حتما برای جاوااسکریپت تسلط کافی داشته باشید

[@amirmohammadhamzavi9067]

لطفا دوره نکست جی اس برید

[@MasoodSadri]

حتما برنامه ریزی می‌کنم

[@mammad.amohammad1954]

اقای صدری توی قسمت key ها مگه نمیگن که برای هر آیتم یک key منحصربفرد اختصاص بدید برای اینکه ری اکت خنگ هست و باید تغییرات رو متوجه بشه. پس اگه متوجه تغییرات نمیشه پس چرا تغییرات اعمال میشه و در خروجی هیچ مشکلی پیش نمیاد و فقط warning میده؟؟؟؟؟
ممنون

[@MasoodSadri]

این موضوع برای پایدار بودن مقادیر آرایه یا لیست استفاده می‌شه. پیشنهاد می‌کنم این لینک رو مطالعه کنید:
reactjs.org/docs/lists-and-keys.html

[@younessheikhlar3614]

دورود جناب شاید پرسشم خنده دار باشه - ولی چون اول راه طراحی وب سایت هستم - البته جاوا اسکریپت رو بلدم , آیا این دوره برای طراحی سایت هم مفیده که وقت بزارم و خوب ببینم ؟ ممنون از شما

[@MasoodSadri]

سلام، هیچ سوالی خنده دار نیست، هم بپرسید و هم سرچ کنید. کتابخانه React بیشتر به توسعه فرانت‌اند مربوط می‌شه و خیلی جنبه طراحی نداره

[@younessheikhlar3614]

@@MasoodSadri ممنون برای پاسخ دهی تندرست باشید

[@rasoulhosseini24]

سلام استاد این ویدیو رو برای دومین باره میخوام ببینم. سوالی که خدمتتون داشتم این بود که وقتی صحبت این میشه که گفته میشه باید جاوا اسکریپت رو بدونی یعنی در چه حد دانش باید داشته باشیم؟واقعا من چندین پی دی اف جاوااسکریپت -سایت w3schools -و غیره رو مدام دارم میخونم و تمرین میکنم اما گستردست و یادم نمیمونه متاسفانه همه ی مباحث رو! اگه در حد for-foreach-function-if else-method ha-dastresi be taghaye html-tabdil kardan be araye bray foreach ... دانش داشته باشیم به نظرتون چند درصد میشه گفت از جاوا اسکریپت میدونه ادم؟ لطفا مباحث دیکه ای که ضروری و کاربردی تر هست رو هم بفر مایید خیلی خیلی ممنونم

[@MasoodSadri]

سلام
پیشنهاد می‌کنم این دوره فشرده رو ببینید: ua-cam.com/video/oUjQ7eP38H8/v-deo.html
برای شروع یادگیری ری‌اکت کافی هست. هرچه قدر مباحث ری‌اکت رو عمیق‌تر بشید نیاز به درک بهتر جاوااسکریپت هم بیشتر می‌شه

[@rasoulhosseini24]

@@MasoodSadri بله دقیقا اتفاقا خیلی از قسمت های جاوااسکریپت رو کامل متوجه نشده بودم که توی این دوره کاملا جا افتاد.خیلی ممنون.جالب بود واقعا.بله اتفاقا این دوره که فرمودین رو بارها دیدمش.فوقالعاده بود.
استاد از ری اکت بیشتر برای چه پروژه هایی استفاده میشه؟وب سایت ها یا نرم افزار ها یا...؟

[@user-nh6yl7fo5d]

عالی

[@hosseinbohlol-lu1zf]

عالی