مسیر یادگیری React در سال 1402 ( نقشه راه یادگیری ری اکت )

اگه میخواید تو سال 1402 شروع به یادگیری کتابخانه React کنید، جای درستی اومدید 🙂 یادگیری ریکت بدون مسیر یادگیری ری اکت تقریبا غیر ممکنه! مثل این هست که بدون نقشه گنج دمبال گنج باشیم! نقشه راه یادگیری ری اکت به ما کمک میکنه از طریق یک مسیر درست شروع به یادگیری React کنیم.

پس اگه در سال 1402 قصد شروع یادگیری React دارید و دمبال یک نقشه راه یادگیری React هستید، با فِرانت اِندی همراه باشید:)

نقشه راه یادگیری ری اکت ( آپدیت 1402 )

دقت کنید که مسیر یادگیری React در هر سال آپدیت میشه ( به دلیل منسوخ شدن برخی کتابخانه ها و ظهور برخی کتابخانه ها و تکنولوژی های جدید)! پس پیشنهاد میکنم از منابع قدیمی به عنوان نقشه راه یادگیری React استفاده نکنید! تو این مقاله بروزترین مسیر یادگیری ری اکت مرتبط با سال 1402 رو در اختیارتون قرار دادیم که توسط منبع مرجع ( Roadmap.sh ) منتشر شده.

ری اکت یک کتابخانه جاوااسکریپتی هست که به ما در زمینه Front-End و طراحی صفحات گرافیکی UI کمک میکنه.

ری اکت تو سالهای اخیر رشد خیلی خیلی چشمگیری داشته و با سبقت از سایر کتابخانه ها و فریمورک های جاوااسکریپتی تونسته بین Developer ها حسابی محبوب بشه!

درسته که فریمورک ها و کتابخانه های دیگه ای مثل Angular و Vue.js هم وجود دارن اما صادقانه React یه چیز دیگس:)

یادگیری React خیلی آسونه و کار کردن باهاش خیلی لذت بخشه! همچنین کلی مزیت جذاب مثل JSX ، دام مجازی ، هوک و جامعه آماری بزرگ داره که باعث شده اکثر Developer های تازه کار سراغ React برن.

زمانی که دمبال یک مسیر یادگیری ری اکت میریم، به انبوهی از مقالات، ویدئو ها و درکل یه عالمه نقشه راه یادگیری ری اکت میرسیم! اما کدومشون بهترن؟

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

بطور مثال این وبسایت یک React Roadmap منتشر کرده که بیشتر از 259000 ستاره تو گیت هاب دریافت کرده و به جرئت میشه گفت بهترین مسیر یادگیری ریکت هست چون این Roadmap، نتیجه تحقیق و تجربه متخصصین حوزه مهندسی نرم افزار هست.

پس اگه دمبال یک مسیر یادگیری React هستید و نیاز به یک منبع قابل اعتماد دارید، پیشنهاد میکنم این مقاله رو مطالعه کنید چون بر اساس نقشه راه یادگیری React که وبسایت roadmap.sh منتشر کرده هست.

خب اجازه بدید اول تصویر مسیر یادگیری ری اکت رو باهم ببینیم و سپس بصورت متنی هرکدوم از این تکنولوژی ها و کتابخانه هارو بصورت جامع و تخصصی بررسی میکنیم

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

( البته تصویر بالا توسط فِرانت اِندی به زبون فارسی ترجمه شده اما محتوا هیچ تغییری نکرده )

حالا اجازه بدید هرکدوم از موارد تصویر بالارو بصورت متنی بررسی کنیم …

نقشه راه یادگیری ری اکت 20 مرحله داره و ما مرحله به مرحله بررسیشون میکنیم :)

1 – یادگیری موارد پایه

اصلا مهم نیست که قصد شروع یادگیری ری اکت رو داریم یا 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 ، تسلط خوبی نسبت به زبان برنامه نویسی جاوا اسکریپت پیدا کنیم. چون چارچوب اصلی ری اکت، بر اساس زبان برنامه نویسی جاوا اسکریپت پیاده سازی شده.

جاوااسکریپت مختصرا بصورت 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.dev هست. اما خوندن document برای بچه هایی که تازه کار هستن ممکنه سخت باشه.

ما تو وبسایت فِرانت اِندی راجب تک تک هوک ها ، ویژگی ها و کتابخانه های جانبی ری اکت صحبت کردیم، با مراجعه به وبلاگ فِرانت اِندی میتونید به آموزش های ویدئویی و متنی بیشماری بصورت رایگان دسترسی داشته باشید 🙂

اصلی ترین بخش نقشه راه یادگیری ری اکت، یادگیری خود کتابخانه React هست.

4 – یادگیری ابزار های ساخت ( Build Tools )

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

به عنوان یک توسعه دهنده ری اکت پیشنهاد میشه با ابزار های زیر آشنا بشیم :

• 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 تسلط داشته باشیم تا درصورت نیاز ازشون استفاده کنیم.

رفقا مسیر یادگیری ری اکت شامل 20 مرحله میشه و ما تو این مقاله 5 مرحله از اون رو بررسی کردیم. لطفا برای مطالعه مابقی مراحل مسیر یادگیری ری اکت روی لینک زیر کلیک کنید :

مسیر یادگیری ری اکت