دوره آموزش react با 4 پروژه عملی برای ساخت اپلیکیشن های تحت وب

آموزش react را از ابتدا شروع کنید تا وب‌سایت‌های پویا بسازید. (شامل Context، Hooks، Reducer، Routing، Auth، پایگاه‌های داده) یاد بگیرید چگونه وب‌سایت‌های مدرن و پویا را با تکنولوژی React ایجاد کنید. درباره Components، Props، Hooks، Context، State، Reducer بیاموزید. & the React Router آموزش پیاده سازی پایگاه داده، احراز هویت و آپلود فایل با React & Firebase ایجاد و استقرار وب سایت های React کاملاً مبتنی بر کاربر React یک کتابخانه front-end بسیار محبوب است و توسعه دهندگان React همیشه در بازار کار توسعه دهندگان وب تقاضای بالایی دارند.

آنچه در دوره آموزش react می‌آموزید

در دوره آموزش ری اکت شما یاد خواهید گرفت که چگونه از ابتدا از React برای ایجاد وب سایت های تعاملی پویا استفاده کنید و تا پایان کار در موقعیت عالی برای موفقیت در شغلی به عنوان توسعه دهنده React خواهید بود. شما همچنین 4 پروژه کامل React را در اختیار خواهید داشت که می توانید آنها را سفارشی کنید و در نمونه کارها خود استفاده کنید!

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

react Router

همچنین با آموزش ری اکت Router (که در React برای ایجاد وب‌سایت با “چند صفحه” استفاده می‌شود) تمرین عملی خواهید داشت و خواهید دید که چگونه اینها در واقع به عنوان برنامه‌های یک صفحه (یا به اختصار SPA) شناخته می‌شوند.

ما به React Hook‌هایی مانند useState، useEffect، useParams useHistory می‌پردازیم و از آنها برای کمک به ما در ایجاد 4 پروژه کامل React از ابتدا استفاده می‌کنیم – یک بازی حافظه، یک وب‌سایت دستور العمل، یک ردیاب مالی، یک برنامه مدیریت پروژه.

React Context API

در دوره آموزش react دانشجویار موضوعات پیشرفته تری مانند React Context API برای مدیریت کاهش دهنده های حالت جهانی (از جمله قلاب useReducer) برای کمک به مدیریت وضعیت پیچیده تر یاد خواهید گرفت.

استفاده از Firebase در پروژه

پس از تسلط بر React، وب‌سایت‌های خود را با ادغام آن‌ها با Firebase – یک Backend به عنوان یک سرویس – به سطح بعدی ارتقا می‌دهیم. شما یاد خواهید گرفت که چگونه خدماتی مانند احراز هویت پایگاه داده بلادرنگ را به سایت های React خود اضافه کنید و همچنین چگونه به کاربران نهایی اجازه دهید فایل ها را از رایانه خود با کمک Firebase Storage آپلود کنند. در نهایت، من به شما آموزش می‌دهم که چگونه سایت‌های React خود را با استفاده از میزبانی Firebase در وب بسازید.

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

1) توضیحات، نصب و راه اندازی

• توضیحات اولیه (هرچی که لازمه بدونی)
• نصب و راه اندازی نرم افزار های مورد نیاز

2) مقدمات آموزش react

• استفاده از React با CDN
• ساخت یک React Component
• JSX و قالب ها
• بررسی ایونت کلیک

3) استفاده از Create-React-App

• ساخت سایت (create-react-app)
• بررسی ساختار پروژه
• اجرای برنامه
• استفاده از تصاویر
• استفاده از Stylesheets

4) مقدمه ای بر State و useState

• تعریف و کاربرد State
• استفاده از هوک useState
• بررسی هوک و چرخه حیات در React
• نمایش مقادیر یک لیست State
• استفاده از حالت قبلی یا prevState
• الگوهای مشروط

5) پروژه تمرینی آموزش ری اکت

• ساخت ماشین حساب ساده

6) بررسی Components و Props

• استفاده از چندین کامپوننت
• ایجاد کامپوننت Title
• معرفی Props
• بررسی React Fragments
• بررسی Children Prop
• ارسال تابع به عنوان Props
• چالش 1 – نمایش مدال
• چالش 2 – کامپوننت قابل استفاده EventList

7) استایل دهی اپلیکیشن های React

• پاسخ چالش 1 – نمایش مدال
• پاسخ چالش 2 – کامپوننت قابل استفاده EventList
• استفاده از استایل گلوبال
• استفاده از استایل کامپوننت
• استفاده از استایل داخلی
• استایل داخلی داینامیک
• کلاس های CSS شرطی
• ماژول های CSS

8) ورودی و رویدادهای کاربر

• فرم و لیبل در React
• ایونت onChange
• ایجاد ارتباط دو طرفه
• ایونت onSubmit
• اضافه کردن رویدادها به لیست رویدادها
• ایونت onRef
• بررسی Select Boxes

9) واکشی داده ها و استفاده از useEffect

• پروژه جدید و استفاده از json-server
• چرا ما به useEffect نیاز داریم
• واکشی داده ها با useEffect
• آرایه وابستگی useEffect
• استفاده از Callback برای وابستگی های تابع
• ایجاد یک هوک واکشی سفارشی (Custom Hook)
• اضافه کردن یک وضعیت در حال بارگیری/در انتظار
• رسیدگی به خطاها

10) پروژه آموزش react – بازی حافظه

• پیش نمایش و راه اندازی پروژه
• راه اندازی و به هم ریختن کارت ها
• ایجاد یک شبکه کارت
• ایجاد کامپوننت کارت
• انتخاب کارت
• مقایسه انتخاب ها
• افزودن یک ویژگی «matched» به کارت‌ها
• چرخاندن کارت ها
• انیمیشن به چرخاندن کارت ها
• تغییرات نهایی

11) React Router 6

• سایت های واکنش چند صفحه ای
• راه اندازی روتر React
• Links & navLinks
• واکشی داده ها از فایل جیسون
• پارامترهای Route
• هوک UseParams
• تغییر مسیرهای برنامه ای
• صفحات تودرتو
• Query Parameters

12) پروژه – فهرست دستور العمل ها

• پیش نمایش و راه اندازی پروژه
• راه اندازی روتر و صفحات
• ساخت کامپوننت Navbar
• واکشی داده ها
• ساخت کامپوننت RecipeList
• چالش 1 – واکشی یک Recipe
• الگوی جزئیات Recipe
• ساخت فرم “Create Recipe”
• اضافخ کردن مقادیر ingredients
• ایجاد یک درخواست POST
• چالش 2 – تغییر مسیر کاربر
• ساخت کامپوننت SearchBar
• صفحه نتایج جستجو