دوره آموزشی آنلاین React JS

+ هدیه جذاب

ویژگی‌های دوره

طول دوره: ۴۰ساعت
استاد: رضا هاشمیان
نوع ارائه: آنلاین (پخش زنده)
پرسش و پاسخ: هر جلسه به صورت آنلاین + گروه پشتیبانی
پشتیبانی: گروه تلگرامی
مدرک شرکت در دوره: به دو زبان فارسی و انگلیسی

هدیه ویژه ‌ ثبت‌نام

با ثبت‌نام دوره آنلاین React JS
دوره طراحی وب - صفر تا سایت را هدیه بگیرید...

هدیه ویژه ‌ ثبت‌نام

با ثبت‌نام دوره آنلاین React JS
دوره طراحی وب - صفر تا سایت را هدیه بگیرید...

مخاطبان دوره

علاقه مندان به طراحی وب و کسانی که دوست دارند برنامه نویس front-end باشند
طراحان وب که با طراحی وب آشنا هستند و می خواهند front-end developer شوند.
برنامه نویسان بک اند که می خواهند برای ارتقا مهارت وارد حوزه فرانت اند شوند.
شاغلین علاقه‌مند به دوره که می‌خواهند از مزایای کلاس‌های آنلاین برخوردار باشند.

مزایای دوره آنلاین

آنلاین (پخش زنده)

مشاهده دوره به صورت زنده و ارتباط مستقیم با استاد

بدون ترافیک

صرفه‌جویی در زمان، هزینه و انرژی در طول دوره

شبکه سازی

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

گام به گام

امکان آموختن گام به گام، روان و با سرعت استاندارد

پرسش و پاسخ

دسترسی هم‌زمان به استاد برای پرسش و پاسخ سریع

دسترسی‌پذیری

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

سرفصل‌های آموزشی

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

مروری بر مباحث پایه JavaScript

نصب و راه‌اندازی و ایجاد پروژه React

بررسی ESLint و package.json و node_modules

مسیریابی در React با React Router

کار با API‌ها و درخواست‌های HTTP

مقدمه‌ای بر React

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

۱. آشنایی با React
۲. بررسی تاریخچه و معرفی React
۳. بررسی ویژگی‌های کلیدی و مزایای استفاده از React
۴. آشنایی با اکوسیستم React و چرایی نیاز به استفاده از React
۵. معرفی اکوسیستم React (React Router، Redux، Context API، React Native)
۶. دلایل استفاده از React در پروژه‌های بزرگ و کوچک
۷. مقایسه با دیگر فریمورک‌ها و کتابخانه‌های جاوااسکریپت

مروری بر مباحث پایه JavaScript

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

۱. Arrow function: تفاوت‌ها با توابع عادی و کاربردها

۲. map: نحوه استفاده و مثال‌ها

۳. filter & find: تفاوت‌ها و کاربردهای هر کدام

۴. reduce: کاربرد و مثال‌های عملی

۵. Template literals: استفاده از backticks برای ایجاد رشته‌ها

۶. Destructuring: استخراج مقادیر از آبجکت‌ها و آرایه‌ها

۷. Spread operator: ترکیب و کپی کردن آبجکت‌ها و آرایه‌ها

۸. Ternary operator: جایگزینی برای if-else ساده

۹. Promise: معرفی و نحوه استفاده از Promise‌ها

۱۰. Async – Await: استفاده از async/await برای مدیریت کدهای غیرهمزمان

نصب و راه‌اندازی و ایجاد پروژه React

برای نصب ری اکت جی اس شما می تونید از چند روش استفاده کنید. ه رایج ترینش استفاده از ابزار npm هست در این بخش ابتدا روش های نصب React را بررسی می کنیم و سپس انواع روش های ایجاد پروژه را بررسی و اجرا می کنیم.

۱. بررسی پیش‌نیازها و نصب Node.js و npm

۲. بررسی معرفی روش‌های ایجاد پروژه React

۳. بررسی روش‌های ایجاد پروژه React

۴. ایجاد پروژه با create-react-app:

۵. نصب create-react-app و ایجاد اولین پروژه

۶. بررسی ساختار پوشه‌ها و فایل‌ها

۷. ایجاد پروژه با vite

۸. نصب Vite و ایجاد پروژه با Vite

۹. مقایسه با create-react-app و مزایای استفاده از Vite

۱۰. بررسی ساختار پروژه و تنظیمات Vite

۱۱. ساختار پوشه‌ها و فایل‌ها در پروژه‌های Vite

۱۲. تنظیمات و پیکربندی Vite config

۱۳. سفارشی‌سازی تنظیمات بر اساس نیاز پروژه

بررسی ESLint و package.json و node_modules

ESLint، package.json، و node_modules” به ابزارها و فایل‌های مرتبط با توسعه و مدیریت پروژه‌های React JS اشاره دارد. ESLint، یک ابزار استاندارد برای بررسی و اعمال قوانین و استانداردهای کدنویسی در پروژه‌های React JS.

در این بخش به بررسی مفاهیم زیر می‌پردازیم:

۱. معرفی ESLint و اهمیت استفاده از آن

۲. نصب و پیکربندی ESLint در پروژه React

۳. تنظیمات و قوانینی که می‌توان برای پروژه تعریف کرد

۴. بررسی package.json و node_modules

۵. ساختار و محتوای فایل package.json

۶. مدیریت وابستگی‌ها (dependencies) و ابزارهای پروژه (devDependencies)

۷. بررسی پوشه node_modules و نحوه کارکرد آن

بررسی مبانی React

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

۱. معرفی JSX و نحوه نوشتن آن

۲. بررسی تفاوت JSX با HTML

۳. ترکیب جاوااسکریپت و JSX

۴. تعریف و انواع کامپوننت‌ها (کلاسی و تابعی)

۵. ایجاد و استفاده از کامپوننت‌ها

۶. اصول ترکیب کامپوننت‌ها و Props

۷. چرخه حیات کامپوننت‌ها (Lifecycle Methods)

۸. معرفی State و کاربرد آن در کامپوننت‌ها

۹. نحوه تعریف و استفاده از State

۱۰. مدیریت رویدادها (Event Handling) و به‌روزرسانی State

۱۱. استفاده از setState و تفاوت‌های آن با State مستقیم

بررسی Hookها در React

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

۱. مقدمه‌ای بر Hookها

۲. معرفی Hookها و چرایی استفاده از آن‌ها

۳. مقایسه با کلاس کامپوننت‌ها و مزایای Hookها

۴. Hookهای اصلی

۱. بررسی useState [مدیریت حالت]

۲. بررسی useEffect [مدیریت اثرات] جانبی

۳. بررسی useContext [استفاده از Context در کامپوننت‌ها]

۴.بررسی useReducer [مدیریت حالت پیچیده]

۵. بررسی useRef [دسترسی به المان‌های DOM]

۶. ساخت Hook‌های سفارشی

۷. نحوه ایجاد و استفاده از Hook‌های سفارشی

مدیریت وضعیت با Context API

در این فصل، با Context API آشنا می‌شوید که روشی برای مدیریت وضعیت در پروژه‌های React است. شما یاد می‌گیرید چگونه Context ایجاد کنید و از آن در کامپوننت‌ها استفاده کنید.Context API به شما کمک می‌کند تا از Prop Drilling (پاس‌دادن متغیرها از طریق کامپوننت‌های مختلف) جلوگیری کنید و به صورت موثرتری وضعیت را در پروژه‌های خود مدیریت کنید.

آنچه در این بخش خواهیم آموخت:

۱. مقدمه‌ای بر Context API

۲. معرفی Context API و نیاز به آن

۳. مقایسه Context API با Prop Drilling

۴. ایجاد Context و استفاده از آن در کامپوننت‌ها

۵. ایجاد Context و Provider

۶. استفاده از Context در کامپوننت‌های مختلف

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

مدیریت وضعیت پیچیده با Redux

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

آنچه در این فصل خواهیم آموخت؟

۱. مقدمه‌ای بر Redux

۲. معرفی Redux و معماری آن

۳. مفاهیم اصلی Redux: Store، Actions، Reducers

۴. تنظیم و پیکربندی Redux در پروژه

۵. نصب Redux و ایجاد Store

۶. تعریف Actions و Reducers

۷. استفاده از Redux DevTools برای دیباگ

۸. اتصال React به Redux

۹. استفاده از React-Redux و کانکت کردن کامپوننت‌ها

۱۰. استفاده از useSelector و useDispatch

مسیریابی در React با React Router

در این فصل، به مسیریابی در React با استفاده از React Router پرداخته می‌شود. شما یاد می‌گیرید چگونه مسیرها را تنظیم کنید و مسیریابی پویا و تو در تو را پیاده‌سازی کنید. مسیریابی یکی از اجزای حیاتی هر برنامه وب است. React Router به شما امکان می‌دهد تا به راحتی مسیرهای مختلفی را در برنامه خود مدیریت کنید و تجربه کاربری بهتری فراهم آورید.

در این جلسه به مباحث زیر می پردازیم:

۱. مقدمه‌ای بر React Router

۲. معرفی React Router و نیاز به مسیریابی

۳. نصب و راه‌اندازی React Router

۴. تنظیمات اولیه و تعریف مسیرها

۵. تعریف Routeها و استفاده از <Route> و <Switch>

۶. ایجاد لینک‌ها با <Link> و <NavLink>

۷. مسیریابی پویا و Nested Routes

۸. تعریف و مدیریت مسیرهای پویا

۹. ایجاد مسیرهای تو در تو (Nested Routes)

۱۰. استفاده از useParams و useRouteMatch

۱۰

مدیریت فرم‌ها و اعتبارسنجی

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

در این فصل بررسی خواهیم کرد:

۱. بررسی مدیریت فرم‌ها در React

۲. ایجاد و مدیریت فرم‌ها با کنترل شده (Controlled) و غیر کنترل شده (Uncontrolled)

۳. بررسی مدیریت ورودی‌های فرم و استفاده از State

۴. اعتبارسنجی فرم‌ها

۵. استفاده از کتابخانه‌های
۶. بررسی اعتبارسنجی (مانند Formik و Yup)

۷. پیاده‌سازی اعتبارسنجی دستی

۱۱

کار با API‌ها و درخواست‌های HTTP

در این فصل، شما یاد می‌گیرید چگونه با API‌ها ارتباط برقرار کنید و درخواست‌های HTTP را مدیریت کنید. از Fetch API و Axios برای ارسال و دریافت داده‌ها استفاده خواهید کرد. توانایی ارتباط با API‌ها و مدیریت درخواست‌های HTTP برای توسعه‌دهندگان وب ضروری است. این مهارت به شما امکان می‌دهد تا برنامه‌های داینامیک و متصل به سرور بسازید.

آنچه در این فصل خواهیم آموخت:

۱. استفاده از Fetch API و Axios

۲. معرفی Fetch API و نحوه استفاده از آن

۳. معرفی Axios و تفاوت‌های آن با Fetch API

۴. مدیریت پاسخ‌ها و خطاها

۵. مدیریت پاسخ‌های موفق و ناموفق

۶. پیاده‌سازی مدیریت خطاها در درخواست‌های HTTP

۱۲

بهینه‌سازی و بهبود عملکرد

این فصل به بهینه‌سازی و بهبود عملکرد در برنامه‌های React می‌پردازد. شما با تکنیک‌های مختلف بهبود عملکرد و استفاده از Lazy Loading آشنا خواهید شد. بهینه‌سازی عملکرد برنامه‌های React به شما کمک می‌کند تا تجربه کاربری بهتری ارائه دهید و برنامه‌های سریع‌تر و کاراتری بسازید. بهینه‌سازی عملکرد برنامه‌های React به شما کمک می‌کند تا تجربه کاربری بهتری ارائه دهید و برنامه‌های سریع‌تر و کاراتری بسازید.

آنچه در این فصل خواهیم آموخت؟

۱. مفاهیم Performance در React

۲. معرفی مفهوم Performance و اهمیت آن در React

۳. شناسایی و حل مشکلات Performance

۴. تکنیک‌های Lazy Loading

۵. معرفی Lazy Loading و نیاز به آن

۶. استفاده از React.lazy و Suspense برای بارگذاری پویا

۱۳

تست و دیباگ در React

در این فصل، شما با اصول تست و دیباگ در React آشنا می‌شوید. یاد می‌گیرید چگونه کامپوننت‌های خود را با استفاده از Jest و React Testing Library تست کنید. تست و دیباگ به شما کمک می‌کند تا اطمینان حاصل کنید که کدهای شما به درستی کار می‌کنند و از بروز خطاهای ناخواسته جلوگیری می‌شود.

آنچه در این جلسه خواهیم آموخت:

۱. مقدمه‌ای بر تست

۲. معرفی مفاهیم تست و اهمیت آن

۳. تست کامپوننت‌ها با Jest و React Testing Library

۴. معرفی Jest و نحوه نصب و پیکربندی

۵. استفاده از React Testing Library برای تست کامپوننت‌ها

۶. نوشتن تست‌های واحد و تعاملات کامپوننت‌ها

۱۴

پیاده سازی پروژه مدیریت وظایف

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

۱. ایجاد پروژه جدید
۲. پیاده سازی صفحه لاگین و Authentication
۳. پیاده سازی صفحه فهرست تسک ها
۴. پیاده سازی Hook های شخصی
۵. اجرای Routing پروژه
۶. افزودن Task جدید
۷. حذف Task
۸. ویرایش Task
۹. مشاهده وضعیت تسک

استاد این دوره

رضا هاشمیان

توسعه دهنده وب و متخصص PHP
۶ سال تجربه برنامه‌نویسی سمت سرور
پیاده سازی و طراحی اتوماسیون هوشمند ساخت طلا و جواهر
پیاده‌سازی سیستم مدیریت یادگیری آنلاین (LMS)
همکاری با شرکت‌های معتبر بین‌المللی از جمله Cegid

توسعه دهنده وب و متخصص PHP
۶ سال تجربه برنامه‌نویسی سمت سرور
پیاده سازی و طراحی اتوماسیون هوشمند ساخت طلا و جواهر
پیاده‌سازی سیستم مدیریت یادگیری آنلاین (LMS)
همکاری با شرکت‌های معتبر بین‌المللی از جمله Cegid

دانشجویان چه می‌گویند؟

انصافا هیچ وقت فکر نمیکردم یه روزی بیاد که از اس کو ال و کوئری هاش خوشم بیاد 😄😄 تدریس تون فوق العاده س و اصلا نگاهم نسبت به کوئری های اس کو ال عوض شد

سلام و خسته نباشید… من دوره ی هفتم کوئری نویسی رو شرکت کردم و بسیار بسیار دوره ی عالی ای بود…دوره خیلی حرفه ای و کاربردی بود و مفاهیم رو خیلی عالی با مثال توضیح میدادن… بی صبرانه منتظر برگزاری دوره ی پیشرفته هستیم.

بسته آموزشی بسیار مناسبی است هم برای افراد مبتدی و هم افراد حرفه ای . از جلسه اول نکاتی مطرح می شود که گاها افراد حرفه ای هم از آن باخبر نیستند و از جلسه دهم که مباحث کاملا حرفه ایست.

با سلام از جمله مواردی که این دوره رو تمییز میکنه از دوره های دیگه: حل تمرینات متنوع و تشریح جزء جزء کلمات کلیدی استفاده شده در کوئری هاست . تقریبا آدم یاد تدریس دوران دبیرستان می افته که بعضی معلم ها تا چیزی رو برای همه بچه ها جا نمی انداخت جلو نمیرفت و همه مطالب رو همه بچه ها تو کلاس یاد می گرفتند ! به نظر من بین تدریس و یاد دادن تفاوت فاحشی وجود داره که گاها بعضی مدرسین ازش غافل هستند !

نمونه مدرک این دوره

پس از مشاهده و گذراندن دوره آموزش React JS، یک مدرک اتمام دوره به شما تعلق می‌گیرد. این مدرک، بیانگر موفقیت شما در حل تمرین‌ها و سناریوهای طراحی شده در دوره React JS است و می‌تواند به عنوان یک گواهی کاربردی، سطح مهارت‌های فنی و عملی شما در این حوزه اعتبار ببخشد. در بازار کار فعلی، دارا بودن مدرک دوره، به عنوان یک فاکتور مهم در حسن تمایز شما با سایر افراد تلقی می‌شود.

پس از مشاهده و گذراندن دوره آموزش React JS ، یک مدرک اتمام دوره به شما تعلق می‌گیرد. این مدرک، بیانگر موفقیت شما در حل تمرین‌ها و سناریوهای طراحی شده در دوره React JS است و می‌تواند به عنوان یک گواهی کاربردی، سطح مهارت‌های فنی و عملی شما در این حوزه اعتبار ببخشد. در بازار کار فعلی، دارا بودن مدرک دوره، به عنوان یک فاکتور مهم در حسن تمایز شما با سایر افراد تلقی می‌شود.

سؤالات پر تکرار

کدام ورژن React در این دوره آموزش داده شده است؟

در این دوره از آخرین نسخه React که نسخه ۱۸ می باشد استفاده شده و همینطور آخرین تغییرات و بروزرسانی های انجام شده نیز پوشش داده شده می شود

پیش‌نیاز یادگیری React (ری‌اکت) چیست؟

پیش نیاز این دوره آموزشی ، آشنایی با HTML , CSS و جاوااسکریپت آموزش داده می شود این مباحث در دوره آموزش طراحی سایت از صفر تا وب که به صورت هدیه ثبت نام برای شما فعال می گردد آموزش داده می شود.

در چه پروژه‌هایی می‌توان از React استفاده کرد؟

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

ویژگی‌های ری اکت جی اس کدام است؟

ویژگی‌های منحصربه‌فردی در React موجود است که عبارت‌اند از:

۱. سریع: ری اکت جی اس سریع‌تر از جاوا اسکریپت معمولی است زیرا هنگام ترجمه به جاوا اسکریپت معمولی بهینه‌سازی را انجام می‌دهد.
۲. Virtual DOM: Virtual DOM برای ری اکت مانند یک کپی سبک از DOM واقعی است؛ بنابراین برای هر شی که در DOM اصلی وجود دارد، یک شی برای آن در React Virtual DOM وجود دارد. دست‌کاری DOM کند ولی دست‌کاری Virtual DOM سریع است زیرا چیزی روی صفحه‌نمایش داده نمی‌شود.
۳. کامپوننت: کامپوننت یکی از بلوک‌های اصلی سازنده React است. به‌عبارت‌دیگر می‌توان گفت که هر اپلیکیشنی که در React توسعه می‌دهید از قطعاتی به نام کامپوننت تشکیل شده است. کامپوننت‌ها کار ساخت رابط‌های کاربری را بسیار ساده‌تر می‌کنند.
۴. عملکرد: React.js به دلیل استفاده از JSX در مقایسه با جاوا اسکریپت و html و css معمولی سریع‌تر است.

در دوره آموزش React با ویژگی‌های بیشتری از این چارچوب محبوب در قالب عملی و تئوری آشنا خواهیم شد.

آیا خرید اقساطی امکان پذیر است ؟

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

دوره از چه تاریخی شروع می گردد؟

این دوره به صورت آنلاین از مرداد ماه ۱۴۰۳ شروع می شود

آیا این دوره بصورت زنده برگزار می گردد؟

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

من باز هم سوال دارم، امکان ارتباط با مشاوران نیک آموز وجود دارد؟

بله، شما می‌توانید از مشاوره های نیک‌آموز به عنوان راهنما در مسیر خود استفاده کنید. برای این منظور لطفا شماره خود را در فرم مشاوره دوره وارد کنید تا مشاوران نیک آموز با شما تماس بگیرند.

۳۰% تخفیف

پیش ثبت‌نام دوره

۵.۹۰۰.۰۰۰ تومان

۴.۱۳۰.۰۰۰ تومان

۰۲۱-۹۱۰۷۰۰۱۷