آموزش ری اکت (React) و Redux + پروژه فروشگاه اینترنتی

ری اکت (React) اسمی آشنا برای تمام افرادی است که به دنبال یادگیری برنامه نویسی سمت کاربر یا Frontend هستند. در دوره آموزش ری اکت (React) این تضمین را به شما می دهیم که پس از گذراندن دوره به فردی تبدیل شوید که قادر است هرگونه نرم افزاری با کتابخانه ری اکت | React را ایجاد کند.

اما اولین سوالی که برای هر شخص پیش می آید این است:

ری اکت (React) چیست؟

اگر بخواهیم به صورت خلاصه بگوییم، ری اکت (React) یک کتابخانه جاوا اسکریپتی است که به شما این امکان را می دهد تا صفحات SPA (تک صفحه ای) یا Single Page Application در بستر اینترنت بوجود بیاورید و با استفاده از آن درخواست خود را به سرور ارسال کرده و بدون رفرش کردن صفحه، خروجی را تغییر دهید.

این کتابخانه در سال ۲۰۱۱ توسط شرکت فیس بوک (Facebook) به دنیای توسعه دهنده ها معرفی شد و انقلابی جدید در بین کتابخانه های جاوا اسکریپت بوجود آورد. بد نیست بدانید هم اکنون وب سایت شرکت فیس بوک و همچنین اینستاگرام از کتابخانه React استفاده می کنند.

از طرفی دیگر کتابخانه ری اکت (React) به صورت کامل کامپوننت محور بوده و شما می توانید المان های HTML دلخواه خود را درون هر یک از کامپوننت ها به صورت مجزا تولید کرده و در هر جای برنامه استفاده نمایید.

مثلا فرض کنید می خواهید لیستی از کاربران را با استفاده از React نمایش دهید. برای اینکار کافیست یک کامپوننت به نام User ایجاد کرده و سپس خروجی آن را در یک قالب HTML بسته به نیاز خود قرار دهید.

پس از گذراندن دوره آموزش ری اکت (React) چه چیزی یاد می گیرید؟

• ایجاد یک فروشگاه اینترنتی سفارش آنلاین غذا با React و Redux
• نحوه ایجاد نرم افزارهای سریع و قدرتمند با رابط کاربری بسیار جذاب با استفاده از React
• ساخت اپلیکیشن های تحت وب با ساختار SPA
• استخدام در مراکزی که نیاز به یک برنامه نویس سمت کاربر (Frontend) دارند
• انجام پروژه های وسیع با کتابخانه React
• درک مفاهیم اولیه کتابخانه
• نحوه ساخت نرم افزار های Component Base (مجزا)
• خطایابی نرم افزارهای React
• ایجاد فرم ها
• یادگیری مبحث Redux در React (در سطح مقدماتی و پیشرفته)
• تست کردن نرم افزارهای طراحی شده با React
• معرفی هوک های React

پیش نیازهای دوره آموزش ری اکت (React) چیست؟

برای یادگیری بهتر این دوره، آشنایی با مفاهیم زبان جاوا اسکریپت (Javascript) به شما کمک می کند تا روند یادگیری سریع تری داشته باشید.

برای یادگیری جاوا اسکریپت اصلا نگران نباشید. به تازگی یک سری آموزشی متنی رایگان در روکسو پلاس تحت عنوان «سیر تا پیاز جاوا اسکریپت» ارائه شده است که می توانید در حین یادگیری React به آن بپردازید.

توجه به این نکته ضروری است که در دوره آموزش ری اکت (React) نیازی نیست که شما در حد یک توسعه دهنده حرفه ای به زبان جاوا اسکریپت مسلط باشید.

از طرفی درک مفاهیم مربوط به HTML و CSS برای زیباسازی و نمایش خروجی مناسب، حائز اهمیت است.

دوره آموزش ری اکت (React) مناسب چه کسانی است؟

این دوره برای تمام افرادی که قصد دارند کتابخانه ری اکت (React) را از ابتدایی ترین (صفر) تا پیشرفته ترین مفاهیم (صد) یاد بگیرند، عالیست. این بدین معنی است که ما با مقدماتی ترین بحث ها دوره را شروع می کنیم و تا سطح پیشرفته همراه شما هستیم.

از طرفی در این دوره به یادگیری سایر کتابخانه های وابسته به ری اکت مثل Redux و react-router می پردازیم.

نسخه کتابخانه React

این آموزش در حال حاضر بر اساس نسخه ۱۶.۶ ری اکت (React 16.6) ارائه شده است. به محض بروزرسانی کتابخانه به نسخه های جدیدتر و پایداری آن، این دوره آموزشی نیز بروزرسانی می شود و شما می توانید پس از خرید دوره به صورت رایگان به آنها دسترسی داشته باشید.

ارتباط با مدرس دوره

پس از خرید این دوره آموزشی، مدرس دوره (مسعود صالحی) از طریق تیکت پشتیبانی (واقع در پروفایل کاربری) همراه شما خواهد بود تا به تمام سوالات شما پیرامون دوره و مفاهیم آموزشی پاسخ دهد.

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

سرفصل های دوره آموزش ری اکت (React)

مقدمه و معرفی

• معرفی دوره و مدرس
• ری اکت چیست؟
• معرفی نرم افزارهای SPA
• نوشتن اولین کد
• چرا باید ری اکت را انتخاب کنیم؟
• معرفی روکسو کیو

معرفی اجمالی جاوا اسکریپت

• معرفی ماژول ها
• معرفی ثابت ها و متغییر ها
• تعریف کردن کلاس ها
• آشنایی با مفاهیم Import و Export
• درک ویژگی ها و متدها
• معرفی مخرب ها
• توضیح آرایه ها و توابع

مقدمه ای بر ری اکت و ویژگی های آن

• ایجاد محیط نرم افزار
• ساخت اولین نرم افزار ری اکت (React App)
• معرفی ساختار و پوشه های نرم افزار
• مفاهیم مقدماتی درباره کامپوننت ها
• معرفی پسوند JSX
• معرفی ابزار Faker.js و استفاده از آن
• ایجاد کامپوننت های تابع محور
• کار کردن با کامپوننت ها و استفاده مجدد از آنها
• نمایش داینامیک خروجی ها
• کار کردن با ویژگی ها یا Props
• درک ویژگی های فرزند
• تمرین پروژه سیستم نظرات در ری اکت (Comments)
• درک مفاهیم مربوط به موقعیت ها (State) و استفاده از آنها
• ارتباط بین رویدادها و متدها
• کنترل وضعیت ها و موقعیت ها (State)
• استفاده از توابع و کلاس ها
• ارسال اطلاعات با استفاده از متدها بین دو کامپوننت
• معرفی ویژگی ارتباط دو طرفه (Two Way Binding)
• افزودن استایل (Style) به صفحات و المان های HTML

کار کردن با لیست ها و قیدها

• نمایش محتوا بر اساس شرط و قیود
• کار کردن با مطالب داینامیک و پویا
• نمایش لیستی محتوا
• بررسی تفاوت بین List ها و State ها
• بروزرسانی موقعیت ها
• بررسی تفاوت بین List‌ ها و Key ها
• معرفی لیست های منعطف

زیباسازی کامپوننت های ری اکت و المان ها

• افزودن استایل های داینامیک
• افزودن کلاس های CSS به المان ها به صورت داینامیک
• استفاده از Radium
• استفاده از Radium برای کوئری رسانه ها
• استفاده از سلکتورها

خطایابی نرم افزارهای React

• معرفی انواع خطا
• پیدا کردن خطاهای منطقی با استفاده از ابزار Dev Tools و Sourcemaps
• کار کردن با ابزار Developer Tools ری اکت
• پیدا کردن خطاهای مرزی یا Error Boundaries (یک ویژگی جدید در ری اکت ۱۶.۶ می باشد)

سطح پیشرفته کامپوننت ها

• معرفی ساختار هوشمندانه یک پروژه
• تقسیم بندی نرم افزار به کامپوننت های مجزا
• مقایسه کامپوننت های Stateless و Stateful
• درک چرخه حیات (Lifecycle) کامپوننت های ری اکت
• تبدیل کامپوننت های Stateless به Stateful
• بروزرسانی وضعیت هوک های چرخه حیات (Lifecycle)
• درک مفاهیم DOM در React
• ارائه و معرفی کامپوننت های رده بالا یا HOC
• ارسال ویژگی های ناشناخته به کامپوننت ها
• استفاده از setState
• اعتبارسنجی ویژگی ها
• استفاده از مراجع یا ref

پروژه فروشگاه اینترنتی سفارش آنلاین غذا (بخش اول)

• طراحی ساختار پروژه
• تقسیم بندی کامپوننت ها
• طراحی نمودار درختی از پروژه فروشگاه
• برنامه ریزی برای موقعیت ها
• راه اندازی پروژه
• ایجاد کامپوننت ها
• ایجاد یک بخش برای مواد غذای هر منو به صورت داینامیک
• اضافه کردن انواع اعتبارسنجی روی فیلدها
• شروع کار با کامپوننت منوی غذا
• نمایش خروجی دستورهای غذا به صورت داینامیک
• اضافه کردن کامپوننت کنترلی
• اتصال موقعیت ها به کامپوننت های کنترلی
• حذف مواد موجود در دستور غذا
• نمایش و بروزرسانی قیمت غذا
• ایجاد یک کامپوننت مودال (Modal)
• نمایش و حذف کامپوننت مودال به همراه انیمیشن
• پیاده سازی کامپوننت های Backdrop
• اضافه کردن دکمه های دلخواه به کامپوننت
• افزودن قیمت به سبد سفارش
• افزودن تولبار
• استفاده از لوگو در نرم افزار
• افزودن منوها
• ایجاد محیط رسپانسیو در نرم افزار
• افزودن آیکون همبرگر به عنوان یک غذا
• بهبود ویژگی ها و اعتبارسنجی آنها
• استفاده از کامپوننت ها و متدهای چرخه حیات آن

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

• درک مفاهیم انواع درخواست های HTTP
• درک مفاهیم مربوط به بک اند و معرفی Axios
• ایجاد یک درخواست HTTP برای متد GET
• رندر کردن (نمایش) داده های بدست آمده و نمایش آنها در صفحه
• تبادل اطلاعات بین فرانتند و بک اند
• ارسال داده ها بر اساس متد POST در یک درخواست HTTP
• ارسال یک درخواست DELETE در HTTP
• کار کردن با خطاها و پاسخ های منفی یک درخواست
• افزودن میان افزارها یا Interceptor ها به کدهای خروجی
• ایجاد یک تنظیمات پیشفرض برای کتابخانه Axios

پروژه فروشگاه اینترنتی سفارش آنلاین غذا (بخش دوم)

• تست درخواست های HTTP روی پروژه
• نمایش یک اسپینر (حالت لودینگ) تا زمان دریافت اطلاعات
• کار کردن با خطاها
• دریافت اطلاعات از یک Backend خارجی (مانند JsonPlaceHolder)

ایجاد نرم افزارهای تک صفحه ای با استفاده از Routing یا مسیردهی

• معرفی مسیردهی یا Routing در نرم افزارهای SPA
• راه اندازی لینک ها
• معرفی پکیج های Router ری اکت (react-router)
• آماده سازی پروژه برای مسیردهی
• ایجاد مسیرها و نمایش آنها
• ایجاد یک مسیر به ازای یک کامپوننت
• تغییر صفحات (بدون رفرش شدن)
• استفاده از لینک ها برای تغییر صفحات
• استفاده از Routing-Related Props
• معرفی withRouter و ویژگی های هر مسیر
• تعریف مسیرهای مطلق و نسبی
• استایل دادن به مسیرهای فعال (فعال بودن یک منو)
• ارسال پارامترها به هر مسیر
• استخراج پارامترها از هر مسیر
• مسیریابی خودکار
• درک مسیرهای تو در تو
• ایجاد مسیرهای تو در تو به صورت داینامیک و پویا
• ریدایرکت کردن درخواست ها
• کار کردن با Guard ها برای محافظت از یک مسیر
• نمایش صفحه ۴۰۴ برای مسیرهای ناشناخته
• لود تنبل (Lazy Loading) کامپوننت ها برای بهینه سازی نرم افزارها

پروژه فروشگاه اینترنتی سفارش آنلاین غذا (بخش سوم)

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

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

• آنالیز نرم افزار و بررسی اهمیت فرم ها در اپلیکیشن ها
• ایجاد ورودی های داینامیک (پویا)
• نصب و کانفیگ فرم ها
• افزودن یک کامپوننت آبشاری (Dropdown)
• کار کردن با ورودی ها (Input Box)
• ثبت اطلاعات یک فرم
• افزودن اعتبارسنجی های دلخواه برای فرم ها
• نمایش خطاهای اعتبارسنجی

کار با Redux در React

• معرفی موقعیت ها
• بررسی موقعیت های پیچیده در یک نرم افزار
• معرفی کتابخانه Redux
• نصب و راه اندازی Redux
• معرفی Reducer
• معرفی Action ها
• افزودن یک Subscription
• اتصال React به Redux
• ارسال و دریافت داده ها با استفاده از Action ها
• بررسی تغییر وضعیت درون یک Reducer
• بروزرسانی موقعیت ها
• بروزرسانی آرایه ها
• ترکیب چندین Reducer با یکدیگر
• درک مفاهیم مربوط به انوع موقعیت ها یا State Types
• ترکیب UI State ها و Redux

پروژه فروشگاه اینترنتی سفارش آنلاین غذا (بخش چهارم)

• نصب Redux و React Redux در پروژه
• افزودن Reducer به مواد غذایی
• محاسبه قیمت یک غذا بر اساس مواد غذایی آن
• برقراری ارتباط بین Redux و UI State
• افزودن صفحه پرداخت و دریافت اطلاعات با Redux

سطح پیشرفته Redux

• افزودن میان افزارها (Middleware)
• استفاده از ابزار Redux DevTools
• معرفی سازنده های Action ها
• معرفی سازنده ها و کدها غیرهمزمان (Async Code)
• کار کردن با کدها و خروجی های غیر همزمان
• بازنویسی Action ها
• استفاده از Action Creator ها و دریافت موقعیت ها
• استفاده از توابع کمکی

پروژه فروشگاه اینترنتی سفارش آنلاین غذا (بخش پنجم)

• افزودن احراز هویت (Authentication) به نرم افزار
• درک مفاهیم Authentication یا احزار هویت در React و نرم افزارهای تک صفحه ای
• افزودن فرم احراز هویت
• افزودن Action های مربوط به آن
• دریافت توکن (Token) از بک اند
• افزودن فرم ورود کاربر
• ذخیره سازی توکن ها
• افزودن یک اسپینر (لودینگ) قبل از دریافت توکن
• ایجاد لینک خروج کاربر
• ایجاد سطح دسترسی برای مسیرهای حفاظت شده
• بروزرسانی UI نرم افزار بر اساس وضعیت احزار هویت کاربر (Auth)
• ریدایرکت کردن کاربرانی که عضو سایت نیستند
• ریدایرکت کردن کاربران به صفحه پرداخت
• افزایش مدت زمان ورود کاربران به سایت با استفاده از localStorage

تست کردن نرم افزارهای React

• تست کردن یا Testing چیست؟
• معرفی ابزارهای مورد نیاز تست یک نرم افزار React
• نوشتن اولین بلوک تست نرم افزاری
• تست کردن کامپوننت ها
• تست کردن کانتینرها
• تست کردن Redux

بارگذاری یک نرم افزار React در سرور واقعی

• معرفی انواع سرور ها
• دریافت خروجی یک نرم افزار برای بارگذاری در سرور واقعی