چگونه React را یاد بگیریم؟

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

React را سریع و ساده یاد بگیرید

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

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

"یک مصاحبه کاری داشتم و به انجایی رسید که باید یک پروژه را در React کامل میکردم روز شنبه کار را با مسیر یادگیری React شروع کردم و روز یکشنبه پروژه ام را با کلی زمان باقیمانده تا موعد مصاحبه بعدی در روز چهارشنبه، تمام کرده بودم. در یک اخر هفته از ۰ تا ۸۰ درصد کار ساده در React را به صورت مستقل یاد گرفتم"

چندین کوه از تکنولوژی وجود دارد که مردم می خواهند همزمان با React بیاموزند. می خواهم چند تا از آنها را انتخاب کنم و توضیح مختصری دهم که چرا نباید همه این ها را در زمان یادگیری React با آن همراه کنید:

React را با تایپ اسکریپ یاد بگیریم؟

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

React را با Redux یاد بگیریم؟

Redux  یک کتابخانه مدیریت state برای جاوااسکریپت است. یادگیری React و مدیریت state داخلی آن باعث تقویت یادگیری اصلی React میشود پس این کار را قبل از یادگیری کتابخانه های مدیریت stete خارجی پیشرفته، که برای مقیاس های بزرگ و برنامه های پیشرفته استفاده می شوند، انجام دهید. React ابزارهای زیادی برای مدیریت state در برنامه (های) شما دارد. اکثر برنامه های React نیازی به Redux یا هر کتابخانه مدیریت state خارجی، ندارند. پیش از اضافه کردن یک کتابخانه دیگر و سخت شدن یادگیری ابتدا state های React را بیاموزید. Redux باعث پیچیده شدن React برای مبتدیان می شود.

React را با Gatsby یاد بگیریم؟

Gatsby.js اخیرا مشهورتر شده است. Gatsby.js یک راه حل برای ساخت وب سایت های استاتیک مانند وب سایت های شخصی ، وبلاگ ها یا صفحات لندینگ است. با این حال Gatsby نیاز به آموزش های مربوط به خود مثل GraphQL ، سیستم پلاگین بزرگش، مشکلاتی که از سمت سرور جهت رندر شدن برنامه های Reactرخ می دهد، دارد. Gatsby.js را با یادگیری راحت React اشتباه نگیرید. Gatsby.js باعث سادگی نوشتن وب سایت های استاتیک با React می شود، اما یادگیری React را ساده تر نمی کند.

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

پیش نیازهای React

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

اول React را یاد بگیریم یا جاوااسکریپت؟

در ابتدا باید حداقل های جاوااسکریپت را بدانید، که معمولا به عنوان جاوااسکریپت ES5 شناخته می شود، و دانش کافی در مورد HTML و CSS داشته باشید. همچنین React از نحوه نگارش جاوااسکریپت استفاده می کند، که اغلب به جاوا اسکریپت ES6 یا بعد از آن (ES7,ES8,ES9)  برمی گردد. منطقی است که پیش از یادگیری React حداقل با جاوا اسکریپت ES6، آشنا شوید.

بیشتر افراد توصیه می کنند که توسعه وب و همه اصول جاوااسکریپت را به عنوان پیش نیاز قبل از یادگیری React بیاموزید. مهارت هایی که توصیه شده بیشتر از آنچه که برای ساخت برنامه های کاربردی با React.js نیاز دارید، میباشد. چند مورد از این مهارت ها عبارتند از :

• Functions are first-class citizens in JavaScript
• bind(), apply(), and call()
• scopes and closures
• this
• Object Methods
• Array Methods
• Prototypical Inheritance -> ES6 Class
• Callbacks and Promises
• Event Loop
• Event Bubbling
• Regular Expressions
• Error Handling
• JavaScript ES6 and beyond
• Hoisting, Memoization
• Declarative vs imperative programming
• Functional vs object-oriented programming

معتقدم که نیازی نیست تمام این دانش ها را داشته باشید. این کار می تواند برای مبتدیانی که به تازگی با React، جاوااسکریپت و توسعه وب آشنا شده اند، خسته کننده باشد. شما قطعا نمی خواهید در زمین "محدوده ها و closureها" بچرخید وقتی که می توانید با ساختن پروژه های واقعی، انگیزه ای برای ادامه راه داشته باشید. شخصا نیمی از چیزهایی که در لیست است را زمانی که React را شروع کردم نمی دانستم و هنوز نیز باید برخی عبارت های رایج را مرور کنم چون پیش از این زحمت یادگیری آنها را به خودم ندادم؛ و با این حال هنوز هم به خیلی از توسعه دهنده ها برای پروژه های جاوااسکریپت شان کمک میکنم.  

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

React را بیاموزیم یا jQuery؟

از لحاظ تاریخی jQuery فاصله بین وانیلا جاوااسکریپت و قالب ها/کتابخانه های مدرن مانند React، Angular و Vue را پر می کرده. جاوااسکریپت اولیه به اندازه نسخه امروزی آن در مرورگر کارآمد نبود. و به همین دلیل واقعا نیاز به jQuery بود. در حالی که جاوااسکریپت جدید خودش توانایی تعامل با کتابخانه ها و قالب ها را دارد. بنابراین توصیه من این است که خودتان را با jQuery خسته نکنید.

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

چرا باید React را یاد بگیرم؟

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

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

React.js را گام به گام بیاموزید

شدیدا معتقدم که بهترین شروع مراجعه به وب سایت رسمی React است. مستندات این وب سایت همگام با تغییرات اخیر React هستند، مغرضانه نیستند، هر چیزی را در مسیر React به شما یاد می دهند و توسط تیم اصلی React گرد آوری شده اند.

یادگیری با مستندات React

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

• شامل خود آموز برای مبتدیان است
• هیچ منافع تجاری ندارد
• روشی است خود خواسته برای انجام کارها
• به طور متفکرانه توسط انجمن و مشارکت کنندگان اصلی گردآوری شده
• آخرین موارد و بروزرسانی ها را برای نسخه های جدید شامل می شود
• دارای مراجع API است

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

React را با پروژه ها یاد بگیرید

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

React را با انجام کار بیاموزید

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

React را به صورت عمومی یاد بگیرید

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

• Twitter
• Reddit
• Reactiflux
• Spectrum

نه تنها در این پلتفرم ها فیدبک های باارزشی دریافت می کنید، بلکه می توانید با پیوستن به بحث های دیگر بیشتر در مورد React یادبگیرید. بخشی از یک انجمن باشید. یکی از راه های عالی برای یادگیری یک موضوع جدید ، توضیح دادن آن به شخص دیگری است. حتی اگر به تازگی شروع کرده اید، به احتمال زیاد جلوتر از مبتدیان دیگری هستید و می توانید به آنها کمک کنید. React Beginner Thread را در  React Subreddit بررسی کنید در آنجا می توانید به دوستان توسعه دهنده React برای حل مشکلاتشان کمک کنید.

یادگیری React را ادامه دهید

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

• نحوه نوشتن JSX، React
• کامپوننت های React
• ترکیب کامپوننت در React
• React Props
• React state

React را یاد بگیرید و بفهمید. در انتها، زمان زیادی نمی برد تا کامپوننت React را بنویسید که JSX برگرداند، از کامپوننت React داخل یک کامپوننت دیگر استفاده کنید در حالی که آنها را به صورت سلسه مراتبی مرتب می کنید، انتقال داده از یک کامپوننت به کامپوننت دیگر با استفاده از prop ها و ایجاد ارتباط کامپوننت ها با state، استفاده کنید. این اصل React است. با اعمال مهارت هایی که آموخته اید به پروژه، React را عمیق تر یاد بگیرید.

React پیشرفته را بیاموزید

پس از اینکه اصول مربوط به کامپوننت ها، prop ها و مدیریت state  و نحوه نوشتن JSX در React، را یاد گرفتید می توانید با یادگیری مفاهیم و الگوهای پیشرفته React به مطالب عمیق تر بپردازید.

• هوک های React را یاد بگیرید
• کامپوننت های مرتبه بالاتر React را یاد بگیرید
• React Context را یاد بگیرید

با یادگیری این تکنیک های پیشرفته React، می توانید به سراغ برنامه های بزرگتر بروید. هوک های React ممکن است باعث شود کاربرد دیگر کامپوننت های مرتبه بالاتر، در آینده کمتر شود، اما هنوز هم ممکن است آنها را در طول یک سال آینده ببینید.

یکی از پروژه های آموزشی ری اکت پروژه فست فود کاتالوگ است که می توانید مفهیم پیشرفته ری اکت را در قالب یک پروژه جذاب بیاموزید.

React را به صورت آنلاین یاد بگیرید

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

• خودآموزهای React
• کتاب های React
• ویدیو های React (YouTube ، Twitch ،دروس آنلاین)
• پادکست های توسعه وب یا React
• دروس تعاملی

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

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

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

کشد تا نسخه جدیدی از آن را به صورت آنلاین (حتی در آمازون) ارائه دهد . به شخصه معتقدم که امروزه بروزرسانی یک ویدیو سخت تر از نوشتن محتواست.

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

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

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

در انتها به شما پیشنهاد می کنم آموزش React را از طریق دوره های آموزشی کلاسبن دنبال کنید.