توضیحات

لذت یادگیری React با Josh W Comeau

نام دوره : The Joy of React

پیش نیاز:

• آشنایی کامل با جاوا اسکریپت
• آشنایی با HTML و CSS

توضیحات:

تجربه یادگیری تعاملی کاملاً جدید که به شما می آموزد چگونه برنامه های وب غنی و پویا با React بسازید.

بیایید واقع بین باشیم یادگیری React سخت است.

طی چند سال گذشته، React به یک مهارت «باید» برای توسعه دهندگان فرانت اند تبدیل شده است. تقریباً هر آگهی شغلی آن را به عنوان یک پیش نیاز فهرست می کند!

اگر سعی کرده اید React را یاد بگیرید، می دانید که می تواند گیج کننده و طاقت فرسا باشد.

چیزهای زیادی برای دانستن وجود دارد، و بیشتر آموزش‌های موجود در آنجا دانش و زمینه قبلی را در نظر می‌گیرند.

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

شما در حال حاضر برنامه‌های «فهرست Todo» بسیار زیادی ساخته‌اید، و با این حال وقتی می‌خواهید پروژه خود را بسازید، نمی‌دانید از کجا شروع کنید.

شما می خواهید React را یاد بگیرید، اما با مشکل مواجه شده اید.

من می خواهم کمک کنم.

در دو سال گذشته، من سخت مشغول ساختن دوره لذت یادگیری React با Josh W Comeauبرای مبتدیان بودم.

The Joy of React یک دوره تعاملی است.

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

این مانند هر دوره دیگری نیست که قبلاً گذرانده اید (مگر اینکه دوره CSS من را گذرانده باشید، در این صورت، کاملاً شبیه آن است).

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

ما فقط در مورد React نیز یاد نخواهیم گرفت.

ما همه چیزهایی را که برای موفقیت به عنوان یک توسعه‌دهنده React نیاز دارید، از جمله سینتکس مدرن جاوا اسکریپت، همراه با هزاران ابزار و بسته‌های مفید جامعه را پوشش می‌دهیم.

حقیقت این است که استفاده از React لذت بخش است.

وقتی به آن دست پیدا کردید، React یک رویا است. من اکثر فریم ورک های JS را امتحان کرده ام و هیچ چیز دیگری به اندازه React به من احساس قدرت نمی دهد.

من به تجربه کاربری بسیار اهمیت می دهم، از جمله مواردی مانند عملکرد، دسترسی، جلا دادن.

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

ما ابتدا باید پایه ای محکم بسازیم تا بتوانیم قراردادها و بهترین شیوه های React را به درستی درک کنیم. سپس، خواهیم دید که چگونه بسته های جامعه “سلاح های مخفی” دسترسی ما را گسترش می دهند.

ماژول 1 React Fundamentals

در این ماژول اول، React را معرفی می کنیم و درک مشترکی ایجاد می کنیم که در طول دوره از آن استفاده خواهیم کرد.

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

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

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

ماژول 2 کار با React State

جادوی واقعی با حالت شروع می شود. React State به ما اجازه می دهد تا برنامه های کاربردی پویا ایجاد کنیم که احساس زنده بودن داشته باشند.

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

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

تمرینات سرگرم کننده زیادی در این ماژول وجود دارد. ما چند بازی کوچک می‌سازیم، و می‌بینیم که چگونه می‌توان یک نسخه حداقلی از پروژه Gradient Generator خود را ساخت.

ماژول 3 React Hooks

در سال 2019، React با اضافه شدن قلاب‌ها متحول شد. قلاب‌ها به ما امکان می‌دهند که به درون‌های React متصل شویم.

در این ماژول، ما فراتر از قلاب می رویم و مواردی مانند:

مدیریت عوارض جانبی با قلاب
گرفتن مراجع DOM با قلاب.
بهینه سازی عملکرد برنامه های ما با و .
ایجاد انتزاعات خودمان با قلاب های سفارشی.
واکشی داده ها از شبکه با Fetch + قلاب شخص ثالث.

چیزها در این ماژول واقعی می شوند. ما برخی از سخت ترین مفاهیم را در React پوشش می دهیم، مانند اجتناب از ارزش های قدیمی در عوارض جانبی خود. برای اینکه به ما کمک کند چیزهای سخت را درک کنیم، تلاش خود را برای درک چگونگی تیک زدن React دو چندان می کنیم، یاد می گیریم که چرا تغییر ناپذیری بسیار مهم است، دقیقاً “رندر” چیست و موارد دیگر.

ماژول 4 طراحی API

در این مرحله از دوره، ما بخش خوبی از React API را پوشش داده‌ایم، اما روی نحوه عملکرد همه چیز تمرکز کرده‌ایم. در این ماژول، تمرکز ما شروع به تغییر می کند.

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

این ماژول تماماً در مورد اصلاح تفکر ما در مورد اجزاء است. من مدل‌های ذهنی را که هر روز هنگام تصمیم‌گیری درباره ساختار کدم استفاده می‌کنم به شما آموزش می‌دهم.

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

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

ماژول 5 تمرین

من در سال 2015 کار با React را شروع کردم و در این راه چیزهای زیادی یاد گرفتم. هدف من از این ماژول این است که به شما کمک کنم چند سال آزمایش را رها کنید و مستقیماً به الگوها و روش هایی بروید که استفاده از آنها لذت بخش است.

در جامعه توسعه دهندگان، ما در مورد «بهترین شیوه‌ها» زیاد صحبت می‌کنیم، اما واقعاً چیزی به نام بهترین تمرین وجود ندارد. این بستگی دارد که شما برای چه چیزی بهینه سازی می کنید! این همه معامله است.

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

در اینجا چند نمونه از آنچه را پوشش خواهیم داد آورده شده است:

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

ماژول 6 Full-Stack React

در این ماژول، ما از مرورگر فراتر می رویم و با استفاده از Next.js نحوه عملکرد React را در یک زمینه تمام پشته بررسی می کنیم.

Next.js یک متا فریمورک است که بر روی React ساخته شده است. از سال 2016 وجود داشته است، اما اخیراً به طور کامل از ابتدا بازسازی شده است. در می 2023، Next روتر «App» جدید خود را از نسخه بتا خارج کرد و شروع دوره جدیدی را در React آغاز کرد.

در این ماژول، نحوه ساختن برنامه های کاربردی تمام پشته با استفاده از آخرین نسخه Next.js را یاد خواهیم گرفت. ما تمام فناوری های جدید درخشان را پوشش می دهیم، از جمله:

اجزای سرور React
تعلیق
پخش جریانی سمت سرور با هیدراتاسیون انتخابی
روتر برنامه Next.js

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

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

پروژه های Capstone

هر چیزی که در ماژول ها یاد می گیرید در 3 پروژه چالش برانگیز که بین ماژول ها بافته می شود تقویت و استحکام می یابد. شما از مهارت های جدید خود برای ایجاد موارد زیر استفاده خواهید کرد:

بازی کلمه پروژه 1

یکی از بهترین راه ها برای یادگیری React ساخت بازی است. در این پروژه اول، ما یک کلون از Wordle، یک بازی آنلاین محبوب حدس کلمات را می سازیم.

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

Project 2 Toast Playground

ما یک جزء قابل استفاده مجدد و سطح پایین می سازیم!

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

ما همچنین یک برنامه کوچک می‌سازیم تا به ما در سفارشی‌سازی و تولید نان تست کمک کند.

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

پروژه 3 وبلاگ تعاملی مبتنی بر MDX

وقتی وبلاگم را در سال 2018 ایجاد کردم، نمی خواستم یک وبلاگ ثابت خسته کننده بسازم. من می‌خواستم ویجت‌های سفارشی و سفارشی ایجاد کنم که به خواننده کمک کند با انجام دادن یک مفهوم را بیاموزد.

در این پروژه نهایی، وبلاگ نهایی را خواهیم ساخت. دقیقاً یاد خواهید گرفت که چگونه چیزها را تنظیم کنید تا قدرت کامل React را در محتوا در دسترس خود داشته باشید.

پویانمایی های طرح بندی ماژول های جایزه با حرکت Framer

Framer Motion یکی از باورنکردنی ترین ابزارها در اکوسیستم React است. در این ماژول جایزه، شما یاد خواهید گرفت که چگونه از موتور “طرح طرح” آن برای انجام طرح های واقعاً قابل توجه و به ظاهر غیرممکن استفاده کنید.
انیمیشن های ut

این صادقانه یکی از بهترین بسته های “سلاح مخفی” در زرادخانه من است، و من مشتاقم به شما نشان دهم که چگونه از آن استفاده می کنم!

ویژگی پاداش آمادگی مصاحبه فنی React

وقتی صحبت از استخدام به عنوان یک توسعه دهنده React می شود، یکی از پیچیده ترین بخش ها مصاحبه فنی است.

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

این ویژگی جایزه بعداً در سال 2023 منتشر خواهد شد.

دوره لذت یادگیری React با Josh W Comeau برای چه کسانی است:

• همه کسانی که می خواهند ری اکت را به شیوه ای جدید بیاموزند

بخشی از قسمت تعاملی دوره:

کلیک کنید

بخشی از فیلم دوره :