آموزش جامع Material-UI و React برای توسعه‌دهندگان وب

پل بین طراحی و توسعه را پر کنید! طرح‌های دقیق را بشکافید و با Material-UI و React آن‌ها را زنده کنید.

اپلیکیشن‌های تولیدی با طراحی زیبا را از ابتدا با Material-UI بسازید.

اپلیکیشن‌هایی ایجاد کنید که با سیستم طراحی ریسپانسیو Material-UI در هر صفحه‌ای بی‌نقص به نظر می‌رسند.

شهود طراحی UX/UI را اصلاح کنید و مفاهیم را در عمل ببینید.

موضوعات کلیدی دوره:

• بهینه‌سازی موتور جستجو (SEO) در React JS
• مهاجرت از create-react-app به Next JS
• استفاده از توابع بدون سرور با Firebase
• صادر کردن و ادغام کارآمد انیمیشن‌ها با react-lottie
• جمع‌آوری داده‌ها و ردیابی رویدادها با Google Analytics در React JS
• اطمینان از پشتیبانی مرورگرهای مختلف با استایل‌های خود در Material-UI
• استقرار اپلیکیشن‌های تولیدی Material-UI/React JS

بهترین منبع پولی توصیه شده برای یادگیری Material-UI خوش آمدید!

در طول 35 ساعت و بیش از 200 سخنرانی، همه چیز را در مورد ساخت اپلیکیشن‌های با طراحی عالی با استفاده از مفیدترین ابزاری که از زمان خود React یاد گرفته‌ام، یعنی Material-UI، به شما آموزش خواهم داد!

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

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

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

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

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

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

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

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

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

محتوای دوره شامل:

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

به همراه دسترسی مادام‌العمر به بیش از 35 ساعت محتوا، همچنین دسترسی آسان به پشتیبانی از طریق پرسش و پاسخ فعال خواهید داشت.

هیچ چیز برای از دست دادن ندارید - این دوره با ضمانت بازگشت وجه 30 روزه در صورتی که کاملاً راضی نباشید ارائه می‌شود!

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

پیش‌نیازها:

• با React JS راحت باشید - این یک دوره سطح متوسط است!
• کامپیوتر Mac یا Windows