توضیحات

پیاده سازی طرح برنامه در ری اکت (React) با Material-UI – آموزش کار با Material-UI and ReactJS

نام دوره : Implement High Fidelity Designs with Material-UI and ReactJS

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

پیش نیاز:

• با React JS راحت باشید – این یک دوره سطح متوسط ​​است!
• رایانه مک یا ویندوز

توضیحات:

در طول بیش از 35 ساعت ویدیو آموزشی و بیش از 200 قسمت آموزش در استفاده از Material UI در React (ری اکت)، من به طور کامل هر آنچه راجع به ساخت برنامه های کاربردی با طراحی زیبا با استفاده از مفیدترین وسیله ای که از زمان استفاده از  React – Material UI آموحته ام به شما می آموزم.

مهارت های توسعه وب خود را به سطح کاملاً جدیدی برسانید . و با به دست آوردن اعتماد به نفس در ایجاد برنامه های حرفه ای طراحی شده ، خود را از توسعه دهنده متوسط ​​React جدا کنید!

پس از یادگیری React ، فکر می کنم بسیاری از توسعه دهندگان با یک مشکل مشترک روبرو می شوند. بهترین شیوه ها برای ساختن پروژه خود کدام هستند !؟

ممکن است ایده ای برای یک برنامه یا وب سایت بسیار جالب در ذهن خود داشته باشید اما احساس می کنید نمی دانید دقیقاً چگونه می توانید آن را با React ایجاد کنید.

آیا قرار است هر جزء کوچک و عملکردی را از ابتدا بسازید؟

قطعا نه! بیاموزید که با Material-UI با کتابخانه کامپوننت های قابل تنظیم جامع خود با سیستم های طراحی یکپارچه ، مضمون ، شبکه و واکنش گرا ، کار سنگین را برای شما انجام دهد.

بیشتر دوره هایی که هنگام یادگیری React می گذرانید بر آموزش مفاهیم اصلی و نحو/ساختارهای اساسی لازم برای درک و ساخت برنامه های React متمرکز است.

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

با این حال ، من متوجه شده ام که به دلیل تمرکز بر مفاهیم و عملکرد اصلی ، اکثر طرح ها و چیدمان ها جالب نیستند!

هیچ کدام از طرح ها به هیچ وجه بد نیستند . و این تمرکز دوره های خالص React نیست. بنابراین این مشکل از دوره ها نیست .  اما آنها معمولاً چیزی نیستند که شما به مشتری خود ارایه بدهید . بنابراین وقتی شروع به کار به تنهایی می کنید ، کمی دچار مشکل می شوید. دقیقاً به همین دلیل دوره پیاده سازی برنامه در ری اکت (React) با Material-UI را ایجاد کردم!

ما قصد داریم دو پروژه کامل را از ابتدا بر اساس فایل های طراحی بسازیم – از جمله وب سایت واقعی خودم!

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

از شروع پروژه با صفحه خالی گرفته تا استقرار یک وب سایت کاملاً پاسخگو. آنچه من واقعاً سعی می کنم بر آن تأکید کنم روش تفکر در مورد ساختار بندی طرح در Material-UI است.

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

همچنین قبل از استفاده از آن در پروژه خود ، مستندات مربوط به هر جزء Material-UI را بررسی می کنیم تا با همه قابلیت های مختلف آن آشنا شوید ، نه فقط ویژگی های مورد استفاده ما! هر جزء بسیار انعطاف پذیر است و یکی از اهداف من در این دوره آشنایی کافی شما با کل اکوسیستم فعلی بود تا آماده درک هرگونه به روزرسانی آینده باشید.

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

به همین دلیل است که من شیوه های طراحی واکنش گرا را آموزش می دهم تا شما نه تنها مفاهیمی را که باید در نظر داشته باشید بلکه نحوه پیاده سازی آنها با Material-UI و سبک های کامل در بزرگترین ، کوچکترین و هر صفحه بین آنها را درک کنید.

ما همچنین موضوعات اضافی مانند SEO در React ، تبدیل پروژه خود به Next.js و مزایای انجام این کار . اتصال Google Analytics برای شروع تصمیم گیری های داده محور . ادغام انیمیشن های After Effects و موارد دیگر را پوشش خواهیم داد!

محتوای دوره پیاده سازی برنامه در ری اکت (React) با Material-UI شامل:

• راه اندازی یک پروژه جدید با create-react-app ، React Router و Material-UI
• توضیحات راهنمای اسناد تقریباً برای هر جزء Material-UI و سپس پیاده سازی آنها در پروژه ما
• استراتژی های مختلف بهینه سازی تصویر
• ایجاد یک تم برای برنامه خود با تسلط بر سیستم یک ظاهر طراحی شده متریال Material-UI
• یاد بگیرید که چگونه از طراحی واکنش گرا استفاده کنید تا مطمئن شوید برنامه های کاربردی شما در هر اندازه و جهت صفحه نمایش عالی به نظر می رسند!
• استفاده از سیستم شبکه Material-UI برای تراز بندی کامل طرح بندی های پیچیده
• صادرات انیمیشن ها از Adobe After Effects و وارد کردن موثر آنها به یک برنامه React با react-lottie
• استفاده از عملکردهای بدون سرور با عملکردهای Google Firebase Cloud
• ارسال ایمیل از طریق Node.js
• ایجاد درخواست های شبکه در React هنگام نمایش بازخورد مانند بارگذاری اسپینرها با Material-UI
• بهینه سازی موتورهای جستجو (SEO) در برنامه های React
• آموزش انتقال پروژه از ری اکت (React) به Nextjs
• تست و پشتیبانی از مرورگرهای مختلف
• استقرار پروژه Next.js و افزودن نام دامنه سفارشی – برای دو سیستم عامل میزبانی مختلف
• از Google Analytics برای جمع آوری داده ها در مورد افرادی که با برنامه شما در حال تعامل هستند و آنها چه کار می کنند استفاده کنید
• ایجاد قابلیت های سازمانی سفارشی برای کنترل داده های نمایش داده شده در جداول شامل جستجو ، فیلتر کردن ، حذف و واگرد

دوره استفاده از Material UI در React (ری اکت) برای چه کسانی است:

• توسعه دهندگان React که به دنبال پر کردن شکاف بین طراحی و توسعه هستند.
• توسعه دهندگان React که احساس می کنند React را می شناسند اما هنوز قبل از ساختن یک وب سایت زیبا باید چیزهای بیشتری یاد بگیرند.
• توسعه دهندگان React که طرح های فوق العاده ای دارند اما برای اجرای کامل آنها در عمل تلاش نکرده اند.
• توسعه دهندگان React که می خواهند بتوانند هرگونه طراحی وب سایت را که به دست آنها می رسد ، بسازند.
• توسعه دهندگان React که می خواهند بر طراحی واکنش گرا تسلط داشته باشند
• توسعه دهندگان React که به دنبال درک بهتر اصول طراحی UX/UI هستند
• توسعه دهندگان ری اکت که به دونبال آموزش انتقال پروژه از ری اکت (React) به Nextjs هستند.
• توسعه دهندگان React که به دنبال راهی آسانتر و سریعتر برای راه اندازی و اجرای برنامه های تمیز و با طراحی مداوم هستند