پوریا ستایش 
بهترین روش یادگیری ReactJs چیست؟
چگونه شروع به یادگیری کنم؟ یکی از دردناک‌ترین سؤال‌هایی که برای من پیش می‌آید این است که چگونه یادگیری یک فریم‌ورک را شروع کنم؟
یک راهی که همه انجام می‌دهند این است که شروع می‌کنند همه‌ی اسناد مربوط به فریم‌ورک را می‌خوانند؛ همه‌ی تمرین‌ها را انجام می‌دهند؛ یک «Todo List» با فریم‌ورک مورد نظر می‌سازند ولی در نهایت می‌بینند کارهایی که کرده‌اند کافی نبوده و یک سری مفاهیم پایه‌ای را متوجه نشده‌اند و سؤالاتی برایشان به وجود می‌آید که برای حل کردن آن‌ها نیاز به گذراندن زمان زیادی خواهند داشت مثل «آیا من به‌اندازه کافی یاد گرفته‌ام تا نرم افزارهای واقعی بسازم؟»، «چه چیزهایی وجود دارد که من یاد نگرفته‌ام؟»، «در چه مفاهیمی اشتباه کرده‌ام؟». همچنین ممکن است مجبور شوند به سراغ یک معلم حرفه‌ای بروند.
این مقاله به شما راهی را نشان می‌دهد که ReactJs را یاد بگیرید و در زمان نسبتاً کوتاهی تجربه کسب کنید، که برای ساختن برنامه‌های واقعی با ReactJs کافی است. همچنین راه یادگیری شما را آسان‌تر می‌کند برای یادگیری مفاهیمی در آینده مثل react-router یا redux یا هر فریم‌ورک دیگری که در نظر دارید.
چهارچوب ذهنی بسازید
بهترین راه برای یادگیری چیزهای جدید ساخت چهارچوب ذهنی است که شما را در موارد پیچیده راهنمایی می‌کند و مواردی مطرح است که در اسناد یک فریم‌ورک وجود ندارند.
روشی که من برای ساختن این چارچوب استفاده می‌کنم این است که اسناد را کامل و دقیق صرفاً به‌عنوان یک راهنما بخوانم و تمرین‌هایی را هم‌زمان با یادگیری حل کنم که به من کمک می‌کند نقشه‌ای کلی بسازم برای ساختاری که می‌خواهم در آینده با جزئیات بیشتری آن را کامل کنم.
به چیزهایی که گیج کننده به نظر می‌رسند توجه نداشته نباشید؛ فقط آن‌ها را در گوشه‌‌ی ذهن نگه دارید؛ مطالعات بیشتری از جاهای دیگر داشته باشید و روز بعد مراجعه کنید به مطلبی که سخت به نظر می‌رسید.
انتظار نداشته باشید که یک مطلب سخت را در اولین توجه یاد بگیرید، برایش زمان در نظر بگیرید به‌عنوان مثال برای یک مطلب ۱۵ دقیقه وقت بگذارید، اگر هنوز هم سخت به نظر می‌رسد یا مفهومی مبهم مانده است برای مدتی از آن مطلب صرف نظر کنید؛ چای بنوشید و قدمی بزنید؛ مغز شما مفاهیمی را در پس‌زمینه درک خواهد کرد. اگر فکر می‌کنید اسناد به‌اندازه کافی گویا نیستند از گوگل و StackOverflow و منابع مشابه استفاده کنید.
بعد از اینکه اسناد یک فریم‌ورک را مطالعه کردید، در مورد مفاهیمی که یاد گرفته‌اید به یک دانش پایه می‌رسید. این مفاهیم برای ساختن اپلیکیشن‌ها کافی می‌باشند ولی قبل از اینکه شروع کنید به ساختن اپلیکیشن‌ها در مورد مفاهیم زیر خودتان را بیازمایید، ببینید می‌توانید در مورد این‌ها تعریف دقیقی ارائه کنید یا هنوز کمی برایتان دشوار است.
- JSX
- Virtual Dom
- React.Component
- React.PureComponent
- Functional Component
- Public/Static members of a class
- render (method)
- ReactDOM.render
- state
- constructor
- setState
- props
- propTypes
- defaultProps
- Component Lifecycle
- Events
- Components Composition
- Higher-Order Components
- Render Props
- Context
- Portal
- Ref
تعدادی از مفاهیم بالا بخشی از قسمت «Advanced Concepts» اسناد مربوط به ReactJs است ولی من در هنگام ساختن اپلیکیشن‌های واقعی ReactJs با آن‌ها به دفعات برخورد داشتم.
اگر هنوز هر یک از مفاهیم بالا را متوجه نشده‌اید، اشکالی ندارد آن مفهوم را کنار بگذارید و در روز بعد دوباره به آن بپردازید. چرخه‌ای که در چند پاراگراف بالاتر به آن اشاره کردم تکرار می‌شود. از گوگل و Stackoverflow استفاده کنید؛ قدمی بزنید و چایی بنوشید و دوباره به مطلب مورد نظر بپردازید. در نهایت من تضمین می‌کنم شما مطلب را یاد خواهید گرفت.
۱۴ تمرین برای یادگرفتن ReactJs
در این مرحله شما مفاهیم را یاد گرفته‌اید و ممکن است به فکر آن باشید که یک «Todo List» برای خود بنویسید ولی هرگز این کار را نکنید. من پیشنهاد می‌کنم با یک سری تمرین ضروری شروع کنید که بسیار آن‌ها را در اپلیکیشن‌های واقعی خواهید دید.
در زیر به معرفی تعدادی از تمرین‌های ساده ReactJs خواهم پرداخت:
- یک Functional Component ساده که چندشنبه بودن روز در هفته را نشان می‌دهد؛ به‌عنوان مثال در خروجی عبارت «امروز سه شنبه است» نمایش داده می‌شود.
- یک Class Component که از یک Functional Component برای نمایش «سلام دنیا» استفاده می‌کند.
- یک کامپوننت که در هر ثانیه پراپرتی‌های جدید دریافت می‌کند و از shouldComponentUpdate استفاده می‌کند برای اینکه چک کند مقدار پراپرتی تکراری نباشد و اگر تکراری بود re-rende نشود.
- یک کامپوننتی طراحی کنید که برای کامپوننت موجود در آن یک رویداد (Event) را کنترل (Handle) کند به‌عنوان مثال رویداد Onclick.
- یک کامپوننتی طراحی کنید که فهرستی از ۱۰۰ المنت را نمایش می‌دهد. (این لیست می‌تواند خارج از کامپوننت طراحی شود)
- یک Higher Order Component یا همان HOC طراحی کنید که مختصات ماوس را در صفحه نمایش می‌دهد.
- یک کامپوننتی طراحی کنید که در هر ثانیه خودش را دوباره Render می‌کند و به‌صورت تصادفی یک کامپوننت را از مجموعه کامپوننت‌ها انتخاب می‌کند تا Render شود. تعداد کامپوننت‌های در نظر گرفته شده می‌تواند بین ۵ الی ۱۰ عدد باشد.
- یک چیزی را از روی صفحه به‌وسیله‌ی componentWillUnmount بردارید و در زمانی کهcomponent بر روی صفحه mount می‌شود، همان چیز را ایجاد کنید.
- یک Context تعریف کنید که دارای یک background-color به‌صورت پیش‌فرض است و یک کامپوننت دیگری طراحی کنید که در آن با کلیک بر روی یک دکمه رنگ پیش‌فرض این Contex تغییر کند.
- یک کامپوننتی بنویسید که Meta Tags را به قسمت Head در تگ‌های Html اضافه می‌کند همچنین متاتگ‌هایی مثل Description و keywords که برای هر صفحه متفاوت هستند را به‌وسیله‌ی props ها کنترل کنید.
- یک Render props Component طراحی کنید که زمان و تاریخ کنونی را نمایش می‌دهد.
- یک کامپوننت طراحی کنید که به‌وسیله‌ی Portal متاتگ‌های سفارشی را Render می‌کند.
- یک کامپوننت طراحی کنید که به‌وسیله‌ی یک input وقتی فرم submit شد مقدار input را در alert نمایش دهد.
سعی کنید تا حد امکان بدون جستجو در اینترنت به حل کردن موارد بالا بپردازید. حتی اگر جواب درست نیست یا شما آن را دوست ندارید ، اشکالی ندارد ، شما می‌توانید در فرصتی بهتر برگردید و آن را بازنویسی کنید.
کار بعدی شما چیست؟
همه چیز به شما بستگی دارد، می‌توانید موارد پیشرفته‌تر مثل react-router را یاد بگیرید یا در مورد مدیریت state ها مطالعه داشته باشید. همچنین مطالعه در مورد Api های مربوط به سرور نیز بسیار مفید است.
اگر سؤالی دارید یا احساس می‌کنید این مقاله برخی از جزئیات مهم را از دست داده است ، خوشحال می‌شوم نظرات شما را در قسمت نظرات ببینم!