مسیر یادگیری ری اکت در سال 1403 ( نقشه راه یادگیری React )
اگه میخواید تو سال 1403 شروع به یادگیری کتابخانه ری اکت کنید، جای درستی اومدید 🙂 یادگیری ری اکت بدون مسیر یادگیری ری اکت تقریبا غیر ممکنه! مثل این هست که بدون نقشه گنج دمبال گنج باشیم! نقشه راه یادگیری React به ما کمک میکنه از طریق یک مسیر درست شروع به یادگیری React کنیم.
پس اگه در سال 1403 قصد شروع یادگیری ری اکت دارید و دمبال یک نقشه راه یادگیری ری اکت هستید، با فِرانت اِندی همراه باشید:)
ری اکت یک کتابخانه جاوااسکریپتی هست که به ما در زمینه Front-End و طراحی صفحات گرافیکی UI کمک میکنه. اگه با خود ری اکت آشنا نیستید پیشنهاد میکنم مقاله ری اکت چیست رو مطالعه کنید.
ری اکت تو سالهای اخیر رشد خیلی خیلی چشمگیری داشته و با سبقت از سایر کتابخانه ها و فریمورک های جاوااسکریپتی تونسته بین Developer ها حسابی محبوب بشه!
درسته که فریمورک ها و کتابخانه های دیگه ای مثل Angular و Vue.js هم وجود دارن اما صادقانه React یه چیز دیگس:)
یادگیری React خیلی آسونه و کار کردن باهاش خیلی لذت بخشه! همچنین کلی مزیت جذاب مثل JSX ، دام مجازی ، هوک و جامعه آماری بزرگ داره که باعث شده اکثر Developer های تازه کار سراغ React برن.
زمانی که دمبال یک مسیر یادگیری ری اکت میریم، به انبوهی از مقالات، ویدئو ها و درکل یه عالمه نقشه راه یادگیری ری اکت میرسیم! اما کدومشون بهترن؟
وبسایت Roadmap برای هر کتابخانه، فریمورک یا زبان برنامه نویسی یک مسیر یادگیری مشخص کرده که هر مسیر یادگیری نتیجه تحقیق و تجربه صدها متخصص علوم مرتبط با همون رشته از سراسر جهان هست!
بطور مثال این وبسایت یک React Roadmap منتشر کرده که بیشتر از 259000 ستاره تو گیت هاب دریافت کرده و به جرئت میشه گفت بهترین مسیر یادگیری ریکت هست چون این Roadmap، نتیجه تحقیق و تجربه متخصصین حوزه مهندسی نرم افزار هست.
پس اگه دمبال یک مسیر یادگیری React هستید و نیاز به یک منبع قابل اعتماد دارید، پیشنهاد میکنم این مقاله رو مطالعه کنید چون بر اساس نقشه راه یادگیری React که وبسایت roadmap.sh منتشر کرده هست.
خب اجازه بدید اول تصویر مسیر یادگیری ری اکت رو باهم ببینیم و سپس بصورت متنی هرکدوم از این تکنولوژی ها و کتابخانه هارو بصورت جامع و تخصصی بررسی میکنیم :
تصویر بالا، مسیر یادگیری React هست که نتیجه تحقیق و تجربه صدها متخصص حوزه مهندسی نرم افزار هست و قطعااااا قابل اعتماده!
( البته تصویر بالا توسط فِرانت اِندی به زبون فارسی ترجمه شده اما محتوا هیچ تغییری نکرده )
اما اجازه بدید چند نکته درمورد تصویر بالا که معتبرترین و کامل ترین مسیر یادگیری ری اکت هست رو باهمدیگه مرور کنیم ..
چرا سایت Roadmap.sh که این مسیر یادگیری رو منتشر کرده قابل اعتماده ؟
این وبسایت یک منبع آموزشی کامل و قابل اعتماد هست که مسیر های یادگیری حوزه ها، زبان ها، کتابخانه ها و تکنولوژی های مختلف رو گردآوری و منتشر میکنه.
این مسیر های یادگیری به کمک صدها مهندس و متخصص همان حوزه از سراسر جهان تعیین میشن و در دسترس مخاطبان اون حوزه قرار میگیرن تا علاقه مندان اون حوزه از یک مسیر اصولی و صحیح اون تکنولوژی رو یاد بگیرن.
نکته جالب اینجاست که این مسیرهای یادگیری هرسال بروزرسانی میشن چون برخی تکنولوژی ها/کتابخانه ها منسوخ میشن و یکسری تکنولوژی/کتابخانه جدید وارد بازار اون مارکت میشن.
بطور کل هدف این مسیر های یادگیری این هست که کاربران اون حوزه از طریق یک مسیر صحیح و اصولی، بصورت گام به گام و قدم به قدم شروع به یادگیری اون حوزه کنن.
بطور مثال تو این مقاله مسیر یادگیری react رو منتشر کردیم. طبق این مسیر یادگیری react ما میتونیم قدم به قدم کتابخانه ری اکت رو بصورت اصولی و عمیق یاد بگیریم.
پس مطمئن باشید که این مسیر، بهترین و قابل اعتماد ترین مسیر یادگیری react هست.
حالا اجازه بدید هرکدوم از موارد تصویر بالارو بصورت متنی بررسی کنیم …
1 – یادگیری موارد پایه
اصلا مهم نیست که قصد شروع یادگیری React رو داریم یا Angular یا Vue.js یا هرکتابخانه و فریمورک تحت وب دیگه!
زمانیکه قصد توسعه اپیکیشن های تحت وب رو داریم، باید 3 رکن اصلی وب یعنی HTML , CSS و JavaScript رو یاد بگیریم!
درسته:) این 3 رکن اصلی اصلا قابل چشم پوشی نیستن چون اپیکیشن های تحت وب بر اساس این 3 تکنولوژی توسعه داده میشن.
1.1 – یادگیری HTML
میشه گفت که HTML یک زبان نشانه گذاری وب هست. خود کلمه HTML مخفف عبارت Hyper Text Markup Language هست.
HTML به ما اجازه میده که ساختار اصلی صفحات تحت وب خودمون رو مشخص کنیم.
بطور مثال اگه قصد ایجاد یک دکمه در صفحه داریم باید از تگ <button> استفاده کنیم، زمانیکه مرورگر به این تگ برخورد میکنه، متوجه میشه که باید تو این بخش از صفحه یک دکمه نمایش بده.
به همین دلیل به HTML زبان نشانه گذاری میگیم ( چون ما برای مرورگر یکسری تگ مشخص میکنیم تا بهش بگیم کجای صفحه چی باید نمایش بدی )
پس اولین مورد از مسیر یادگیری ری اکت، یادگیری HTML هست.
1.2 – یادگیری CSS
میشه گفت که CSS مشخص میکنه که اِلِمان های تولید شده با HTML چطوری نمایش داده بشن. ما به کمک CSS میتونیم چیدمان و شکل نمایش اِلِمان های صفحات وب رو کنترل کنیم.
مواردی مثل رنگ یا ابعاد و سایز اِلِمان !
خود کلمه CSS مخفف عبارت Cascading Style Sheets هست.
هرچی مهارت ما در CSS بیشتر باشه، صفحات زیباتری میتونیم بسازیم. جدای از اون زمانیکه به CSS مسلط باشیم میتونیم صفحات خودمون رو Responsive کنیم ( یعنی سایت ما در صفحات موبایل ، تلوزیون و .. قابل نمایش باشن )
در کل CSS توی صفحات وب از اهمیت خیلی خیلی بالایی برخورداره و پیشنهاد میکنم براش زمان صرف کنید و خوب بهش تسلط پیدا کنید.
پس مرحله دوم از نقشه راه یادگیری ری اکت، CSS هست.
1.3 – یادگیری JavaScript
جاوااسکریپت یکی از محبوب ترین زبان های برنامه نویسی همه فن حریفه که میتونیم ازش برای اپیکیشن های تحت وب، اپیکیشن های موبایل، هوش مصنوعی، اپیکیشن های ویندوز و .. استفاده کنیم.
اگه یادتون باشه ابتدای همین مقاله گفتیم که ری اکت یک کتابخانه جاوا اسکریپتی هست!
پس خیلی خیلی مهمه که قبل از یادگیری React ، تسلط خوبی نسبت به زبان برنامه نویسی جاوا اسکریپت پیدا کنیم. چون چارچوب اصلی ری اکت، بر اساس زبان برنامه نویسی جاوا اسکریپت پیاده سازی شده.
JavaScript مختصرا بصورت JS هم شناخته میشه.
پس مرحله 1.3 از مسیر یادگیری React ، یادگیری زبان برنامه نویسی JavaScript هست.
2 – مهارت های عمومی توسعه اپیکیشن های تحت وب
چند مهارت عمومی وجود داره که تمامی توسعه دهنده های Front-End یا حتی Back-End باید یاد بگیرنش! حتی برای کسایی که میخوان فول استک باشن هم یادگیری چنین مهارت هایی ضروریه!
2.1 – یادگیری Git ( گیت )
شاید سالها پیش میشد بدون یادگیری و استفاده از Git پروژه های خودمونو جلو ببریم اما تو سالهای اخیر یادگیری و استفاده از Git خیلی ضروری شده!
میشه گفت که Git یک سیستم کنترل ورژن پروژه هست که به ما اجازه میده کد های پروژه خودمون رو نگهداری کنیم و درصورت لزوم بین ورژن های مختلف پروژه جابجا بشیم.
همچنین میتونیم پروژه خودمون رو بین اعضای مختلف تیم به اشتراک بزاریم.
گیت رو هم میشه به عنوان یکی از موارد مسیر یادگیری ریکت دونست! چون امروزه تو هر تیم برنامه نویسی از Git استفاده میشه و برای اینکه بتونیم با اعضای تیم یک پروژه رو جلو ببریم، ضروریه که با گیت آشنا باشیم!
2.2 – آشنایی با پروتکل های HTTP
برای اینکه بتونیم یک React Developer باشیم و با دنیای وب کار کنیم، باید با پروتکل های HTTP,HTTPS آشنا باشیم.
حداقل کاری که میتونیم بکنیم این هست که یک آشنایی با نحوه کار متود های HTTP مثل موارد زیر داشته باشیم:
- GET
- POST
- PUT
- PATCH
- DELETE
- OPTIONS
- و..
این پروتکل ها به ما امکان ارتباط با Back-End رو میدن، بطور مثال پروتکل GET به ما امکان دریافت اطلاعات از Back-End و پروتکل POST امکان ارسال اطلاعات به Back-End رو میده.
از اونجاییکه تو اکثر اپیکیشن های تحت وب و سایتها باید با Back-End خودمون ارتباط برقرار کنیم، یادگیری این پروتکل ها ضروریه و بخشی از مسیر یادگیری React هست.
2.3 – یادگیری لینوکس و ترمینال
یادگیری لینوکس و ترمینال برای فرانت اند دولوپر ها ضروری نیست اما اگه قصد دارید یک Senior React Developer ( توسعه دهنده ری اکت حرفه ای ) باشید، پیشنهاد میکنم حداقل با لینوکس و ترمینال آشنا بشید.
آشنا شدن با مواردی مثل bash , zsh , csh و .. )
2.4 – یادگیری الگوریتم و ساختمان داده
یکی از مهمترین مهارت های عمومی برنامه نویسی که هر برنامه نویس باید بهش مسلط باشه، مهارت الگوریتم و ساختمان داده هست.
اصلا مهم نیست که میخوایم یک React Developer باشیم یا Back-End Developer یا هرچیز دیگه .. به هرحال ما برنامه نویسیم و باید به مهارت های عمومی برنامه نویسی تسلط داشته باشیم.
ما به عنوان یک برنامه نویس وب باید به الگوریتم و ساختمان داده تسلط پیدا کنیم. به همین دلیل میتونیم بگیم الگوریتم و ساختمان داده جزئی از مسیر یادگیری ری اکت هست.
کتابها و دوره های آموزشی خیلی زیادی برای یادگیری الگوریتم و ساختمان داده وجود داره و درصورتیکه دانشجوی رشته نرم افزار باشید، در کلاس های دانشگاه با این 2 موضوع آشنا خواهید شد.
2.5 – یادگیری دیزاین پترن ( Design Patterns )
فرق یک React Developer معمولی با یک React Developer حرفه ای و باتجربه تو همین چیزاست!
اگه میخواید یک قدم از بقیه جلوتر باشید، پیشنهاد میکنم با دیزاین پترن ها آشنا بشید.
یادگیری Design Pattern ضروری نیست اما آشنایی با Design Pattern های معروف ری اکت به ما کمک میکنه تا پروژه های خودمون رو به بهترین شکل ممکن پیاده سازی کنیم.
3 – یادگیری ری اکت !
خب بلاخره رسیدیم به خود React 🙂
خود کتابخانه ری اکت از بخش ها و قسمت های مختلفی تشکیل میشه، زمانیکه قصد شروع یادگیری ری اکت رو داریم باید بدونیم چه بخش هایی رو با چه اولویتی باید یاد بگیریم.
یکی از بهترین منابع یادگیری ری اکت، وبسایت اصلی React.dev هست. اما خوندن document برای بچه هایی که تازه کار هستن ممکنه سخت باشه.
ما تو وبسایت فِرانت اِندی راجب تک تک هوک ها ، ویژگی ها و کتابخانه های جانبی ری اکت صحبت کردیم، با مراجعه به وبلاگ فِرانت اِندی میتونید به آموزش های ویدئویی و متنی بیشماری بصورت رایگان دسترسی داشته باشید 🙂
اصلی ترین بخش نقشه راه یادگیری ری اکت، یادگیری خود کتابخانه React هست.
4 – یادگیری ابزار های ساخت ( Build Tools )
اگه بخوایم یک توسعه دهنده حرفه ای ری اکت باشیم، باید با ابزار های ساخت آشنا باشیم. آشنایی و یادگیری Build Tools به ما کمک میکنه تا مهارت های برنامه نویسی خودمون رو تا حد قابل توجهی بهبود بدیم.
به عنوان یک React Developer پیشنهاد میشه با ابزار های زیر آشنا بشیم :
- npm
- yarn
- parcl
- gulp
- webpack
- rollup
- pnpm
- task runners
- npm scripts
از بین ابزار های بالا، یادگیری همشون ضروری نیست ( طبق نقشه راه یادگیری React آشنایی کافیه )
اما سعی کنید با ابزار های npm و Webpack ضروریه.
5 – استایل دهی ( Styling )
یکی از اصلی ترین و مهم ترین توانایی هایی که هر React Developer و Front-End Developer باید بهش تسلط خوبی داشته باشه، مهارت استایل دهی ( Styleing ) هست.
تو دنیای وب، استایل دهی به وسیله CSS انجام میشه.
کتابخانه های خیلی زیادی هستن که در زمینه Styling به ما کمک میکنن. فریمورک های CSS زیادی وجود دارن مثل کتابخانه Antd یا کتابخانه Material UI در ری اکت !
این کتابخانه ها عموما یه عالمه کامپوننت آماده و از پیش ساخته شده در اختیار ما میزارن که باعث میشه سرعت توسعه اپیکیشن ما تا حد خیلی زیادی افزایش پیدا کنه.
طبق مسیر یادگیری ریکت و به عنوان یک React Developer باید حداقل به یک فریمورک CSS تسلط داشته باشیم تا درصورت نیاز ازشون استفاده کنیم.
6 – مدیریت وضعیت ( State Management )
زمانیکه اپیکیشن های ری اکتی ما بزرگ میشن، به یکسری State ( حالت / وضعیت ) مشترک نیاز خواهیم داشت که تو اپیکیشن خودمون ذخیره کنیم و تو کامپوننت های مختلف ازشون استفاده کنیم. ( مثل ذخیره State های گلوبال و مشترک )
بطور مثال میخوایم اطلاعات کاربر رو که یک State هست در جایی ذخیره کنیم و در صفحات مختلف ازش استفاده کنیم.
برای چنین موردی ما به یک کتابخانه State Management احتیاج داریم.
خود ری اکت Context API رو در اختیار ما گذاشته ( برای آشنایی با این مورد مقاله هوک useContext در ری اکت رو مطالعه کنید )
- اگر به یک State Management قدرتمند نیاز داشته باشیم میتونیم از موارد زیر استفاده کنیم :
- MobX
- Redux
- Redux Thunk
- Redux Better Promise
- Redux Saga
- Redux Observable
- Helpers
- Rematch
- Reselect
- Date Persist
- Redux Phoenix
- Redux Form
- و …
معمولا توی پروژه های کوچک ری اکتی نیازی به State Management ها نداریم اما زمانیکه اپیکیشن ما متوسط یا بزرگ میشه و با دیتا های زیادی سروکار داشته باشیم، به یک State Management نیاز خواهیم داشت.
پیشنهاد میکنم برای شروع با یکی از State Management ها کار کنید و اگه نیاز داشتید سراغ بقیه برید.
پیشنهاد من ریداکس هست! چون هم قدرتمنده هم محبوب ترین State Management ری اکت هست.
برای آشنایی بیشتر مقاله ریداکس در ری اکت رو مطالعه کنید.
بطور کل توانایی مدیریت State در ری اکت از اهمیت بالایی برخورداره و به همین دلیل در نقشه راه یادگیری ری اکت قرار گرفته.
7 – تایپ چکر ها ( Type Checkers )
ما تو زبان برنامه نویسی جاوااسکریپت تایپ چکر نداریم! یعنی اگه تایپ یک متغیر رو اشتباه وارد کنیم، کامپایلر جاوااسکریپت هیچ اروری به ما نمیده!
این موضوع زمانی که اپیکیشن ما بزرگ میشه، برامون دردسر ساز میشه!
راه حل پیشنهادی ما یادگیری تایپ اسکریپت هست! چون اگه فردا روزی خواستید با سایر فریمورک ها و کتابخانه های جاوااسکریپتی کار کنید، میتونید از تایپ اسکریپت استفاده کنید.
در کل تایپ اسکریپت کم و کاستی های جاوااسکریپت رو رفع کرده و یک زبان برنامه نویسی بسیار قدرتمند هست.
تایپ چکر ها یکی از مهمترین مراحل مسیر یادگیری React هستن.
اگه با تایپ اسکریپت آشنا نیستید پیشنهاد میکنم مقاله تایپ اسکریپت در ری اکت رو مطالعه کنید.
8 – فرم ها در ری اکت ( Form Helpers )
فرم ها یکی از مهمترین و چالش برانگیز ترین بخش های هر اپیکیشن تحت وب هستن. تقریبا تمامی وبسایت هایی که پیاده سازی میکنیم فرم دارن ( فرم ورود ، ثبت نام و .. )
ما باید بتونیم فرم های اپیکیشن خودمون رو بطور مناسب مدیریت کنیم.
از Form Validation ( احراز اطلاعات فرم ) گرفته تا مدیریت ارور در فرم ( Error Handeling )
همچنین فرم های ما باید بهینه باشن.
کتابخانه های خیلی زیادی در زمینه مدیریت فرم ری اکت به ما کمک میکنن.
پیشنهاد میکنم به عنوان یک React Developer که مسیر یادگیری ریکت رو میخواد اصولی پیش ببره، حداقل با یکی از کتابخانه های زیر برای مدیریت فرم در ری اکت آشنا باشید :
9 – روتینگ ( Routing )
همونطور که میدونیم، ری اکت یک SPA ( Single Page Application ) به معنی اپیکیشن تک صفحه هست.
ما برای اینکه تو ری اکت بتونیم صفحات مختلفی رو به کاربر نمایش بدیم و امکان جابجایی بین صفحات رو برای کاربران مهیا کنیم، باید از کتابخانه های Rounting استفاده کنیم.
تو مبحث روتینگ، کتابخانه React Router از همه بهتر ، قدرتمندتر و محبوب تره.
پس یادگیری کتابخانه React Router رو میشه به عنوان یکی از مراحل ضروری نقشه راه یادگیری ری اکت دونست!
10 – آشنایی با API Clients
تو دنیای وب، کمتر وبسایتی رو میشه پیدا کرد که بدون API توسعه داده شده باشه. ما به کمک API ها میتونیم از سرویس های مختلفی برای توسعه اپیکیشن خودمون استفاده کنیم.
همچنین میتونیم از Back-End اطلاعات مورد نیاز خودمون رو به کمک API دریافت کنیم.
همچنین ما به عنوان یک React Developer باید با REST API آشنا باشیم.
میشه گفت تو تمام آگهی های استخدامی React ، آشنایی با REST API درج شده.
ابزار های زیر در زمینه REST API به ما کمک میکنن و خوبه که باهاشون آشنا باشیم :
- Fetch
- SuperAgent
- Axios ( برای آشنایی با axios پیشنهاد میکنم مقاله کتابخانه axios در ری اکت رو مطالعه کنید )
همچنین در زمینه GraphQL پیشنهاد میشه با ابزار های زیر آشنا باشیم :
- Apollo
- Relay
- urql
11 – آشنایی با کتابخانه های کاربردی
کتابخانه های خیلی زیادی وجود دارن که به ما کمک میکنن خیلی بهتر و راحت تر بتونیم اپیکیشن های ری اکتی خودمون رو توسعه بدیم.
یادگیری و استفاده از این کتابخانه ها ضروری نیست اما کمک میکنن اپیکیشن های بهینه و کاربردی تری داشته باشیم.
از جمله این کتابخانه های کاربردی که پیشنهاد میشه باهاشون آشنا باشیم میتونیم به موارد زیر اشاره کنیم :
- Lodash
- Moment
- Ramda
- RxJs
- Numeral
- classnames
- و…
البته آشنایی با موارد بالا کافیه اما اگه خواستید تو مسیر یادگیری ریکت سنگ تموم بزارید، پیشنهاد میکنم یادگیری رو با Lodash ، Moment و classnames شروع کنید.
12 – تست نویسی ( Testing )
یکی از مهمترین مهارت هایی که متاسفانه Developer ها نادیده میگیرنش، مهارت تست نویسی هست.
تست نویسی کمک میکنه اپیکیشن بهینه تر و توسعه پذیرتری داشته باشیم. اگه به مهارت تست نویسی تسلط داشته باشید از سایر Developer ها یک قدم جلوترید!
پیشنهاد میکنم مقاله تست نویسی در ری اکت رو مطالعه کنید تا با کتابخانه های Testing در React آشنا باشید.
اگه به مسیر یادگیری ری اکت نگاهی بندازیم، میبینیم که 3 نوع تست نویسی به ما توصیه کرده.
برای Unit Testing میتونیم از کتابخانه های زیر استفاده کنیم :
- Tape
- AVA
- Chai
- Mocha
- Sinon
- Jest
- Enzyme
- و..
برای End To End Testing میتونیم از کتابخانه های زیر استفاده کنیم :
- Nightwatch.js
- Cucumber.js
- Puppeteer
- Cypress
- Selenium , Webdriver
- و ..
باتوجه به به اهمیت بالای تست نویسی، تست نویسی رو به عنوان یکی از مراحل نقشه راه یادگیری ریکت در نظر بگیرید.
13 – دو زبانه کردن سایت ری اکتی
گاهی اوغات نیاز داریم یک اپیکیشن چند زبانه در ری اکت پیاده سازی کنیم. خصوصا زمانیکه قصد ساخت یک اپیکیشن تحت وب بین المللی داریم، نیاز به وبسایت چند زبانه خواهیم داشت.
کتابخانه های زیادی در زمینه ایجاد سایت چند زبانه در ری اکت به ما کمک میکنن، کتابخانه هایی مثل :
- React Intl
- React i18next
- و ..
عملکرد کلی این 2 کتابخانه تا حد خیلی زیادی شبیه هم هست، این کتابخانه ها برای ما تاریخ ها، اعداد، رشته ها و .. رو ترجمه و مدیریت میکنن.
توانایی ایجاد سایت 2 زبانه در ری اکت نیز یکی از توانمندی های مسیر یادگیری React هست.
14 – رندر سمت سرور ( Server-Side-Rendering )
بطور کلی صفحات اپیکیشن ری اکتی ما به 2 صورت میتونن رندر بشن :
- رندر سمت سرور ( Server-Side-Rendering )
- رندر سمت کلاینت ( Client-Side-Rendering )
تو رندر سمت کلاینت، مرورگر یک فایل html خام دانلود میکنه و پس از پردازش جاوااسکریپت، خروجی رو داخل اون فایل html رندر میکنه و نمایش میده.
مشکلی که این روش داره این هست که صفحات Client-Side نمیتونن سئو بشن ( چون خزنده های گوگل در زمان مراجعه به صفحه، با یک صفحه خالی html مواجه میشن )
اما تو Server-Side-Rendering صفحات و کامپوننت های ما سمت سرور رندر میشن و خروجی ( که یک فایل html با محتوای کامل هست ) به مرورگر فرستاده میشه ( تو این روش صفحات ما سئو میشن چون توسط خزنده های گوگل مشاهده میشن )
قطعا تو خیلی از پروژه های وب به سئو نیاز داریم، تو چنین پروژه هایی باید از تکنیک SSR ( Server-Side-Rendering ) استفاده کنیم.
برای رندر سمت سرور میتونیم از کتابخانه های زیر استفاده کنیم :
- Next.js
- Rogue
- After.js
رندر سمت سرور در React از اهمیت بالایی برخورداره، به همین دلیل یکی از مراحل نقشه راه یادگیری React هست.
15 – رندر استاتیک صفحات ( Static Site Generation )
SSG مخف عبارت Static Site Generation هست و یک روش رندر و ایجاد صفحات در ری اکت محسوب میشه.
تو روش SSG صفحات ما در زمان ساخت ( Build ) ایجاد میشن.
در حقیقت ما بر اساس نیازمون باید روش SSR ( رندر سمت سرور ) یا CSR ( رندر سمت کلاینت ) یا SSG ( رندر استاتیک ) رو انتخاب کنیم.
پس به عنوان یک React Developer که میخوایم بر اساس مسیر یادگیری ریکت جلو بریم، باید با Static Site Generation آشنا باشیم.
16 – رندر سمت سرور ری اکت ( React Server Side Rendering )
ما میدونیم که ری اکت بخاطر رندر سمت کلاینت ( CSR ) سئوی خوبی نداره! پس چه راه حلی برای سئو کردن اپیکیشن های ری اکتی وجود داره؟!
راه حل رندر سمت سرور در ری اکت هست. ما به کمک Rails میتونیم صفحات ری اکت خودمون رو سمت سرور رندر کنیم تا امکان سئو شدن صفحات ما وجود داشته باشه.
مباحثی که در ری اکت با سئو مرتبط هستن، از اهمیت بالایی برخوردان! به همین دلیل داخل نقشه راه یادگیری React قرار گرفتن.
17 – ساخت اپیکیشن موبایل با ری اکت نیتیو
حالا که ما به React تسلط خوبی پیدا کردیم و تونستیم اپیکیشن های تحت وب بسازیم، چرا اپیکیشن موبایل ( اندروید و ios ) نسازیم ؟!
ما با یادگیری React Native میتونیم خیلی راحت اپیکیشن های اندروید و IOS بسازیم.
نکته مثبتی که وجود داره این هست که React و React Native مشترکات خیلی زیادی دارن، پس کار مایی که میخوایم هر 2 رو یادبگیریم خیلی آسونه 🙂
البته اجباری برای یادگیری ری اکت نیتیو وجود نداره و ما بر اساس نقشه یادگیری ریکت میتونیم یکی از کتابخانه های زیر رو مسلط بشیم :
- React Native
- Cordova/PhoneGap
18 – ساخت اپیکیشن دسکتاپ
زمانیکه ما به React مسلط بشیم، میتونیم با یادگیری یک فریمورک ساده اپیکیشن دسکتاپ بسازیم!
این خیلی عالیه چون میتونیم با 1 تیر 2 نشون بزنیم.
ما بایادگیری یکی از کتابخانه های زیر میتونیم به کمک ری اکت اپیکیشن Desktop بسازیم :
- Proton Native
- Electron
- React Native Windows
19 – واقعیت مجازی در ری اکت
اگه به حوزه واقعیت مجازی علاقه مند باشیم و دوست داشته باشیم یک اپیکیشن واقعیت مجازی پیاده سازی کنیم، میتونیم از کتابخانه React 360 استفاده کنیم.
این کتابخانه به ما در زمینه ایجاد یک اپیکیشن واقعیت مجازی مبتنی بر React کمک میکنه.
میتونیم واقعیت مجازی رو هم به عنوان یکی از مراحل نقشه یادگیری ری اکت بدونیم چون از اهمیت بالایی برخورداره.
20 -آشنایی با Back-End و Full-Stack شدن !
حالا که تونستیم تسلط خوبی به React پیدا کنیم، میتونیم بریم سراغ Back-End و Full-Stack شدن. البته هیچ اجباری وجود نداره که Full-Stack Developer بشیم ولی ضروریه که با ساختار Back-End آشنا باشیم و بدونیم چطور کار میکنه.
ما نمیخوایم متخصص Back-End بشیم اما باید بدونیم تو بک اند داره چه اتفاق هایی میوفته.
این آخرین مرحله از مسیر یادگیری ری اکت بود اما پروسه یادگیری ما نباید متوقف بشه 🙂
با کلیک روی هر مرحله، میتونید توضیحات جامع تر اون مرحله رو مطالعه کنید :
جمع بندی
افرادی که قصد شروع یادگیری ری اکت رو دارن، به یک مسیر یادگیری React نیاز دارن. مسیر های یادگیری خیلی زیادی در سطح وب وجود داره اما ما تو این مقاله معتبر ترین اونهارو بررسی کردیم!
معتبرترین مسیر یادگیری React رو سایت Roadmap منتشر کرده که به زبان فارسی تو این مقاله قرار دادیمش:)
امیدوارم که این مسیر یادگیری ریکت براتون مفید بوده باشه و خیلی زود بتونید به ری اکت مسلط بشید 🙂
ما تو این مقاله یک مسیر یادگیری ریکت منتشر کردیم که بر اساس نقشه راه منتشر شده توسط وبسایت roadmap.sh هست.
نقشه راه منتشر شده توسط این وبسایت حاصل سالها تحقیق و تجربه متخصصین و مهندسین مهندسی نرم افزار از سراسر جهان است.
این نقشه راه یادگیری، بروزرسانی سال 1402 است.
قطعا!
خیلی مهمه که چه تکنولوژی هایی رو با چه اولویتی آموزش ببینیم!
اگه اولویت این نقشه راه یادگیری رو رعایت نکنیم یا برخی از این تکنولوژی هارو یاد نگیریم، زمانیکه وارد بازار کار بشیم دچار مشکل میشیم.
در کل بهترین بازدهی ممکن رو زمانی خواهیم داشت که طبق این مسیر یادگیری جلو بریم.
17 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
بهترین مسیر یادگیری ری اکت بود که خوندم مرسی ازتون
امیدوارم براتون مفید واقع شده باشه 🙂
خیلی مفید و کاربردی بود تشکر
سلام و درود
خوشحالم که برات مفید واقع شده 🙂
بهترین نقشه راه یادگیری ری اکت بود مررسی
سلام و درود
خوشحالم که برات مفید واقع شده 🙂
فوق العاده کامل و عالی بود طبق همین مسیر یادگیری پیش میرم ممنون
سلام 🙂
با خیال راحت طیق همین مسیر پیش برو چون بهترین و کاملترین مسیر یادگیری React هست و منبع معتبری داره.
و خوشحالم که برات مفید واقع شده 🙂
سلام خیلی عالی بود ❤️❤️❤️
سلام مصطفی جان
ممنونم از نظری که گذاشتی 🙂 و خیلی خوشحالم که برات مفید واقع شده 🙂
موفق باشی رفیق
سپاس فراوان بابت سخاوتتتون در به اشتراک گذاشتن اطلاعاتتون و همینطوری وقتی که گذاشتید محتوای رایگان بذارید برامون . تا قبل ازین وقتی مقاله های ری اکت رو میخوندم بغض میکردم و فک میکردم من به درد یادگیری برنامه نویسی نمیخورم ولی با مقاله های شما خیلی جذابه یادگیری ری اکت
سلام مریم جان واقعا خوشحالم که مقالات برات مفید واقع شدن و مرسی بابت انرژی مثبتت 🙂
حس ناامیدی و سردرگمی واسه شروع مسیر یادگیری برنامه نویسی کاملا طبیعیه و اگه از برنامه نویس های باتجربه هم بپرسی، میبینی همه اون اوایل یادگیری همین حس رو داشتن. پس تنها چیزی که باید بدونی اینه که ناامید نشی و باانگیزه به سمت هدفت بری چون این احساسات موقته.
امیدوارم حسااابی بترکونی 🙂
چه به موقع بهم انگیزه دادید و این رو به فال نیک میگیرم . ممنون
موفق باشی 🌱
ممنون
بسیار عالی و جامع خیلی کمک کرد مطالبتون به درک کارکرد و کلیات ریکت
سپاس
ارادت مهدی جان:) خوشحالم که برات مفید بوده.