آموزش React – مقدماتی تا پیشرفته

890,000 تومان
254 دانشجو
۷ ساعت و ۴۵ دقیقه
ثبت نام در دوره

React محبوب‌ترین کتابخانه جاوااسکریپت است که از آن برای توسعه قسمت رابط کاربری استفاده می‌شود. براساس آمارهای موجود در وب‌سایت‌های stackoverflow و state of js و همینطور تعداد دانلودهای NPM، کتابخانه React بسیار رو به رشد بوده و در پنج سال اخیر در صدر محبوب‌ترین تکنولوژی‌ها قرار گرفته است.همین موضوع باعث شده است تا بسیاری از شرکت‌ها و استارت‌آپ‌ها برای توسعه محصولات خود از React استفاده کنند.

به دلیل این که React یک کتابخانه متن باز است، یک community بسیار بزرگ از برنامه نویسان زبده در سراسر جهان بر روی این کتابخانه کار می‌کنند و آن را توسعه می‌دهند. با توجه به این موضوع، React مستندات خیلی خوب و قوی دارد و به‌روزرسانی‌های آن به شکل منظم انجام می‌شود که بسیار کاربردی هستند. بنابراین، اگر بتوانیم یک متخصص React باشیم می‌توانیم از بازار کار بسیار خوب آن بهره‌مند شویم. با توجه به قابلیت‌ها و انعطاف‌پذیری React، می‌توانیم پیچیده‌ترین رابط‌های کاربری را با منطقی‌ترین ساختارها توسعه دهیم.

با توجه به گسترش استفاده از زبان برنامه نویسی جاوااسکریپت، از سال ۲۰۲۴ تایپ اسکریپت به یکی از محبوب‌ترین‌زبان‌های برنامه نویسی تبدیل شده است. ما می‌توانیم با استفاده از جاوااسکریپت اپلیکیشن‌های پیچیده‌ای را توسعه دهیم، اما نکته‌ای که وجود دارد این است که توسعه چنین اپلیکیشن‌هایی با جاوااسکریپت می‌تواند کمی پیچیده بوده و نگه‌داری آن دشوار باشد. به همین منظور، مایکروسافت تایپ اسکریپت را ساخته است تا بتواند این مشکلات را برطرف نماید.

از آن جایی که جاوااسکریپت بسیار رشد کرده است، تایپ اسکریپت نیز تحت تاثیر این رشد قرار گرفته است. به همین دلیل، ابزارهایی مانند React و Next.js به سمتی حرکت می‌کنند که هماهنگی بیشتری با تایپ اسکریپت داشته باشند.

با توجه به ویژگی‌های گفته شده درمورد تایپ اسکریپت، شرکت‌ها به این نتیجه رسیده‌اند که محصولات خود را با تایپ اسکریپت توسعه دهند. به همین دلیل، اگر توسعه‌دهندگان بتوانند هنگام استفاده از ابزارهایی مانند React و Next.js آن‌ها را با تایپ اسکریپت پیاده‌سازی کنند هم از موقعیت شغلی بهتری برخوردار می‌شوند و هم این که می‌توانند برنامه‌های پیچیده‌تری را توسعه دهند.

آموزش React – مقدماتی تا پیشرفته

در دوره آموزش React – مقدماتی تا پیشرفته، فصل اول را به آموزش تایپ اسکریپت اختصاص داده‌ایم. پس از آن، آموزش React از پایه‌ای‌ترین مفاهیم آغاز می‌شود و تا قسمت‌های پیشرفته‌تر ادامه پیدا می‌کند. از این رو، تنها پیش نیاز این دوره آشنایی با HTML، CSS و تسلط کافی بر روی جاوااسکریپت می‌باشد.

تایپ اسکریپت یک زبان برنامه نویسی بسیار گسترده است و ما در فرانت کست دوره جامع آموزش TypeScript را داریم؛ ولی در فصل اول این دوره بر روی آموزش مفاهیمی از تایپ اسکریپت تمرکز کرده‌ایم که لازم است درک درستی از آن‌ها داشته باشیم تا بتوانیم از تایپ اسکریپت در React استفاده کنیم.

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


ویدیو معرفی ساختار و تمرین دوره آموزش React – مقدماتی تا پیشرفته در این لینک قابل مشاهده می‌باشد.

 

مدرس دوره

مسعود صدری مدرس و توسعه دهنده نرم افزار، فارغ‌ التحصیل از رشته مهندسی نرم‌افزار، برنامه نویسی را از سال ۱۳۹۱ به شکل حرفه‌ای شروع کرده است. او در سال‌هایی که در حوزه برنامه نویسی حرفه‌ای فعالیت داشته، با شرکت های نرم افزاری و تیم‌های استارتاپی همکاری داشته و بیشتر بر روی فریلنسیگ تمرکز کرده است. او سال‌ها به عنوان برنامه نویس فریلنسر مشغول به کار بوده و همین امر باعث شده تا نیازهای بازار کار را به خوبی بشناسد و تجربه‌های زیادی در این زمینه کسب کند.

مسعود صدری تدریس را از سال ۱۳۹۴ به شکل حرفه‌ای، با آموزشگاه مجتمع فنی تهران شروع کرده و همیشه جزء یکی از برترین مدرسان برنامه نویسی بوده است. سپس تصمیم به برگزاری دوره‌های برنامه نویسی در دانشکده مهندسی برق و کامپیوتر دانشگاه تبریز گرفته که مورد استقبال بسیار خوب دانشجویان قرار گرفت. فعالیت‌های او در دانشگاه تبریز، به عنوان مدرس دانشگاه ادامه داشته و اکنون تدریس کارگاه‌های مبانی برنامه سازی و برنامه سازی پیشرفته را برعهده دارد. نهایتا از سال ۱۳۹۷ تدریس آنلاین هم به لیست فعالیت‌های آموزشی او اضافه شده است.

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

پشتیبانی دوره

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


معرفی ساختار و تمرین آموزش React – مقدماتی تا پیشرفته – مشاهده ویدیو

 

سرفصل‌ها

۰۰. معرفی دوره
۰۱. پیش‌نیازها
۰۲. ساختار دوره
۰۳. استفاده از TypeScript
۰۴. نصب TypeScript
۰۵. امکان Type Checking
۰۶. بررسی تایپ Union
۰۷. تایپ داده‌های Object
۰۸. تایپ داده‌های آرایه
۰۹. تایپ آرگومان‌های تابع
۱۰. بررسی تایپ توابع
۱۱. استفاده از Custom Type
۱۲. استفاده از Interface
۱۳. مقایسه Interface و Custom Type
۱۴. ادغام تایپ‌ها
۱۵. بررسی تایپ Literal
۱۶. استفاده از تایپ Generic
۱۷. بررسی و نصب Vite
۱۸. استفاده از Tailwind
۱۹. پیاده سازی فرم
۲۰. دریافت مقادیر Elementها
۲۱. ساختار داده‌ای آیتم
۲۲. استفاده از UUID
۲۳. افزودن Element
۲۴. توسعه استایل‌ها
۲۵. ذخیره داده‌ها در Local Storage

۲۶. بررسی ساختار React
۲۷. مفاهیم اصلی در React
۲۸. استفاده از React و TypeScript
۲۹. ایجاد پروژه جدید با React و TypeScript
۳۰. توسعه کامپوننت
۳۱. استفاده از Props
۳۲. توسعه Custom Type برای Props
۳۳. بررسی مقدار Children Prop
۳۴. روش دیگر برای توسعه کامپوننت
۳۵. استفاده از هوک useState
۳۶. مدیریت State
۳۷. بهینه سازی کد
۳۸. استفاده مجدد از Typeها
۳۹. استفاده از توابع به عنوان Value
۴۰. کار با Eventها
۴۱. کار با فرم‌ها
۴۲. استفاده از هوک useRef
۴۳. مدیریت داده‌های Input
۴۴. توسعه کامپوننت‌های Dynamic

۴۵. توسعه کامپوننت Wrapper
۴۶. ساختار کامپوننت‌های پیشرفته‌تر
۴۷. کار با Type Predicates
۴۸. بررسی کامپوننت‌های Polymorphic
۴۹. استفاده از Polymorphic و Genericها
۵۰. پیاده سازی شرط در Genericها
۵۱. استفاده از forwardRef
۵۲. توسعه کامپوننت Form
۵۳. مدیریت Submit فرم
۵۴. کار با Type Casting

۵۵. مدیریت State
۵۶. بررسی ساختار تمرین
۵۷. توسعه Context
۵۸. پیاده سازی Provider
۵۹. دسترسی به Context
۶۰. توسعه Custom Hook
۶۱. استفاده از هوک useReducer
۶۲. پیاده سازی تابع Reducer
۶۳. مدیریت State با Reducer
۶۴. توسعه Typeهای Action
۶۵. استفاده از داده‌های Context
۶۶. دریافت داده‌های Context

۶۷. پیاده سازی Side Effect
۶۸. استفاده از هوک useEffect
۶۹. مدیریت Interval
۷۰. توسعه تابع Clean Up
۷۱. استفاده از Dependencyهای useEffect
۷۲. پیاده سازی تابع GET
۷۳. توسعه کامپوننت Posts
۷۴. دریافت داده‌ها

۷۵. بررسی تمرین دوره
۷۶. نرم افزارهای SPA
۷۷. نصب و استفاده از Bootstrap
۷۸. افزودن فونت و تنظیمات RTL
۷۹. استفاده از React Router
۸۰. توسعه کامپوننت‌ برای Routeها
۸۱. استفاده از React Select
۸۲. پیاده سازی بخش پست‌ها
۸۳. دریافت داده‌های Input
۸۴. توسعه Type برای پست‌ها
۸۵. نگهداری Tagها
۸۶. توسعه Custom Hook برای Local Storage
۸۷. استفاده از Local Storage
۸۸. استفاده از هوک useMemo
۸۹. پیاده سازی تابع Post
۹۰. استفاده از تابع Post
۹۱. توسعه Tag جدید
۹۲. توسعه کامپوننت Post List
۹۳. پیاده سازی بخش Title و Tag
۹۴. جست و جو بر اساس Title
۹۵. توسعه کامپوننت Post Card
۹۶. توسعه کامپوننت Post Layout
۹۷. پیاده سازی صفحه Post
۹۸. استفاده از داده‌های Post
۹۹. توسعه کامپوننت Edit Post
۱۰۰. ویرایش داده‌های Post
۱۰۱. تابع حذف یک Post
۱۰۲. توسعه Modal برای Tagها
۱۰۳. نمایش و بستن Modal
۱۰۴. ویرایش و حذف Tagها
۱۰۵. جست و جو بر اساس Tag
۱۰۶. ادامه مسیر یادگیری

دیدگاه‌ها:

Arash

دی 4, 1403  در  5:39 ب.ظ

عرض سلام و احترام خدمت مدرس و استاد ارجمند جناب صدری،
با تشکر از آموزش های خوبتون این دوره رو با وجودیکه چندی قبل تهیه کرده بودم بتازگی شروع کردم و باتمام رسوندم.
راستش خیلی دوره عالی بود. با همون سبک شگفت انگیز شما که مطالب رو عمیق ، کامل و بصورت ساده شده (هرچند هم سخت و پیچیده باشند) ارائه میفرمایید.
من تمام دوره های قبلی ری اکت شما رو هم (که شاید بعضیشون الان دیگه رو سایت نباشند) دیده بودم. ضمن اینکه اونها هم بسیار عالی بودند، ولی این دوره واقعا یک لول بالا تر بود.
اما میخواستم اگر اجازه داشته باشم و جسارت نباشه – یک پیشنهاد برای تکمیل این دوره عرض کنم.
تا حضرتعالی در صورت امکان بررسی بفرمایید. نه اینکه دوره کامل نبوده باشه اما پروژه هایی که انجام شد بسیار کوچک و برای تفهیم مطلب بود و با پروژه واقعی متفاوت.
بنابراین میخواستم پیشنهاد یک دوره دیگر رو خدمتتون ارائه بدم که یک پروژه نسبتا بزرگ مثلا فروشگاه یا انبار داری -چت یا هر سایت نسبتا واقعی با ترکیب اطلاعات این دوره با نکست جی اس و نود جی اس برای بک اند.
البته میدونم چنین پروژه ای چقدر زمان بر هست و ایا اصلا امکانش هست یا خیر
میدونم وظیفه خود ما هست که بعد از دیدن این دوره ها آموخته ها رو با هم ترکیب کنیم و ازشون در دنیای واقعی استفاده کنیم
اما اگر در کنار شما یک پروژه نسبتا بزرگ و واقعی رو انجام بدیم فکر میکنم بسیار تجربه خوبی برای فراگیری مطالبی که اینجا در فرانتکست فراگرفتیم باشه
خوب هم میدونم ک مخاطب این چنین دوره ای قاعدتا باید کسانی باشند که هم بک اند و هم فرانت اند رو بطور جدی دنبال کنند.
بنابراین ایا برگزاری این دوره عملی باشه یا نه نمیدونم فقط خواستم پیشنهادش رو عرض کنم .
بسیار ممنون از شما. پاینده و برقرار باشید.

مسعود صدری

دی 5, 1403  در  11:42 ب.ظ

سلام
وقت بخیر.
خیلی ممنونم از لطفتون.
حضور مخاطب‌هایی مثل شما در فرانت کست باعث افتخار هست.
این که وقت می‌ذارید و نظرتون رو می‌فرمایید بسیار با ارزشه.
ممنونم از پیشنهادتون، اتفاقا برای این موضوع در حال برنامه ریزی هستم.

فائزه ملکی

آبان 30, 1403  در  6:24 ب.ظ

سلام وقت بخیر
امکانش هست یک دوره فشرده برای مباحث انگولار برگزار کنید؟

مسعود صدری

آذر 1, 1403  در  1:44 ب.ظ

سلام
وقت شما هم بخیر.
اگر درخواست باشه حتما برنامه ریزی می‌کنم.

Parvin noori

مرداد 3, 1403  در  12:51 ب.ظ

سلام استاد وقتتون بخیر
من دانش پراکنده‌ای از نکست و ری‌اکت دارم. اما متاسفانه فقط کار با ابزار و کدنویسی رو بلدم و دانش حل مسئله‌‌م پایینه. میخواستم بدونم اگه این دوره رو تهیه کنم برای افزایش دانش حل مسئله‌م تاثیر داره؟ و اینکه بعدش میشه از پس سوالات مصاحبه ها هم بر اومد؟

مسعود صدری

مرداد 3, 1403  در  1:20 ب.ظ

سلام
وقت شما هم بخیر.
تمرکز اصلی ما در این دوره تقویت مهارت حل مسئله با React و TypeScript هست.
همین طور من نهایت تلاشم رو کردم که این دوره یک ساختار منسجم داشته باشه.
در طول جلسات هم اگر سوالی بود در خدمتتون هستم.

حسام بهنامی

مرداد 3, 1403  در  10:50 ق.ظ

سلام و خسته نباشید جناب صدری.
خواستم تشکر بکنم از دوره های خوبتون
من خریداری کردم ولی هنوز ندیدم که نظر بدم ولی قطعا مثل همیشه عالی هستش.
انشالله به ساخت دوره های بیشتر ادامه بدین.

مسعود صدری

مرداد 3, 1403  در  12:28 ب.ظ

سلام
ممنونم از لطفتون.
امیدوارم براتون مفید باشه.
در طول دوره هم اگر سوالی بود در خدمتم.

محدثه ساعدپناه

تیر 30, 1403  در  4:29 ب.ظ

سلام وقتتون بخیر
استاد من قبلا دوره‌ی جامع React – Redux شما رو کامل دیدم الان چه پیشنهادی برای من دارید؟ آموزش TypeScript رو جداگانه ببینم یا مجدد از این دوره استفاده کنم؟
مورد بعدی اینکه ممنون میشم اگر بفرمایید ترتیب یادگیری مطالب باید به چه صورت باشه؟ اول next رو آموزش ببینم بعد TypeScript یا این دوره؟ کمی دچار سردرگمی شدم!

مسعود صدری

شهریور 24, 1403  در  11:21 ب.ظ

سلام
وقت شما هم بخیر.
اگر برای دوره قبلی ثبت نام کردید، برای شما یک تخفیف ویژه ایمیل شده تا در صورت تمایل برای آموزش مقدماتی تا پیشرفته React ثبت نام کنید.
فصل اول دوره رو اختصاص دادیم به مفاهیمی از TypeScript که شما باید برای اونها دانش کافی داشته باشید تا بتونید در پروژه‌های React یا Next.js از TypeScript استفاده کنید.
در صورتی که هدف شما تمرکز روی مفاهیم TypeScript و یادگیری این زبان هست، آموزش جامع TypeScript رو بهتون پیشنهاد می‌‌کنم.
برای راهنمایی‌های بیشتر و بررسی دقیق‌تر مسیر یادگیری می‌تونید تلگرام پیام بدید تا توضیح بدم خدمتتون.

مرتضی حلاجی

تیر 30, 1403  در  12:21 ب.ظ

خسته نباشید استاد ممنون بابت این دوره یه سوال دیگه نیازی به یادگیری redux tookit نبود چون توی سرفصل ها نیست

مسعود صدری

تیر 30, 1403  در  12:49 ب.ظ

سلام
خیلی ممنونم.
تمرکز این دوره فقط برای مفاهیم React هست.
به زودی یک دوره مجزا برای Redux Toolkit خواهیم داشت.

Hadi1984

تیر 30, 1403  در  10:09 ق.ظ

سلام استاد
خیلی خیلی ممنون بابت این دوره بسیار کاربردی
سوالم در مورد اینکه تمامی مباحث مربوط به ری اکت پوشش داده شده؟یعنی با دیدن و تمرین کردن این دوره نیازی به دوره های دیگه برای حرفه ای شدن تو ری اکت پیدا نمیکنیم؟

مسعود صدری

تیر 30, 1403  در  10:20 ق.ظ

سلام
ممنونم از شما.
من نهایت تلاشم رو کردم که همه مباحث کاربردی رو با جزییات بررسی کنیم و در انتهای دوره به یک متخصص واقعی React تبدیل شده باشید.
هر زمان که کتابخانه React با مفاهیم جدید به روز بشه ما هم به صورت رایگان به دوره اضافه می‌کنیم.
پیشنهاد می‌کنم ویدیو بررسی ساختار دوره رو حتما بررسی کنید.

Mohamad Naserzadeh

تیر 30, 1403  در  10:05 ق.ظ

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

مسعود صدری

تیر 30, 1403  در  10:17 ق.ظ

سلام
این دوره مقدماتی تا پیشرفته هست.
اگر تصمیم دارید React رو از ابتدا با جزییات بیشتر تا قسمت‌های پیشرفته کامل درک کنید می‌تونه براتون مناسب باشه.
نیازی به دانش قبلی TypeScript نیست، فصل اول دوره مفاهیم اصلی TypeScript رو بررسی می‌کنیم.
دوره‌ای که فرمودید یک دوره فشرده هست که برای آشنایی با React پیشنهاد می‌کنم.

حسین نفر

تیر 30, 1403  در  9:18 ق.ظ

افزودن دیدگاه جدید