آموزش React JS رایگان – پروژه محور به زبان فارسی

«ری اکت جی اس» (ریکت | React JS) نوعی کتابخانه جاوا اسکریپت در برنامه نویسی Front-End به حساب می‌آید که اپن سورس و رایگان است و برای ایجاد «رابط‌های کاربری» (UI | User Interface) مبتنی بر «کامپوننت» (Component) استفاده می‌شود. این کتابخانه به وسیله شرکت «متا» (قبلاً فیس‌بوک) همراه با جامعه‌ای از برنامه‌نویسان و سازمان‌ها نگهداری می‌شود. طبق نظرسنجی توسعه‌دهندگان «Stack Overflow» در سال ۱۳۹۹ (۲۰۲۱ میلادی)، React JS با بیش از ۴۰٫۱۴ درصد از سهم بازار به رایج‌ترین ابزار توسعه و برنامه نویسی وب تبدیل شده است. در این مطلب آموزش React JS رایگان، در سطح مقدماتی و به همراه مثال ارائه شده است تا در پایان کاربران با این کتابخانه آشنا شده و بتوانند در سطح مقدماتی با آن برنامه نویسی کنند.

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

React JS چیست؟

React JS در اصل نوعی «کتابخانه» (Library) برای زبان برنامه نویسی جاوا اسکریپت محسوب می‌شود که توسط فیس‌بوک (متا) توسعه یافته است و می‌توان با استفاده از آن رابط‌های کاربری تعاملی ساخت. این کتابخانه به توسعه‌دهندگان این امکان را می‌دهد تا با استفاده از کدهای کوچک و جدا شده (همان کامپوننت)، وب اپلیکیشنی پیچیده ایجاد کنند.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

در دنیای برنامه نویسی، React JS به طور کلی یک کتابخانه در نظر گرفته می‌شود، اگرچه برخی به دلیل قابلیت‌های آن برای ساخت برنامه‌های کاربردی کامل از آن به عنوان «فریمورک» (Framework) یاد می‌کنند. همچنین ابزاری به نام «React Native» هم هست که برای ساخت اپلیکیشن‌های بومی موبایل استفاده می‌شود و با React JS تفاوت دارد و لازم است این مسئله را در نظر داشته باشیم. با این حال، برای ایجاد راه‌حل‌های پیچیده، React به کتابخانه‌های اضافی برای مسیریابی، واکشی داده‌ها و سایر الزامات برنامه استاندارد نیاز دارد. در مقابل، فریم‌ ورک‌ های جاوا اسکریپت مانند «AngularJS» ،«Vue.js» و «Ember.js» همه مواردی را ارائه می‌دهند که برای ساخت یک برنامه کامل لازم است.

ویژگی‌ های React JS کدامند؟

از ویژگی‌های React JS می‌توان به فهرست ویژگی‌های زیر اشاره کرد:

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت

کلیک کنید

• JSX: نوعی افزونه جاوا اسکریپت محسوب می‌شود که استفاده از آن آسان است اما استفاده از آن در React اجباری نیست.
• کامپوننت‌ها: مانند توابع جاوا اسکریپت خالص هستند که کد را به کدهای مستقل قابل استفاده مجدد تقسیم می‌کنند. کامپوننت‌ها را می‌توان به عنوان تابع و کلاس‌ استفاده کرد و برای آن‌ها «حالت‌ها» (State) و «Props» را داشت که در ادامه این آموزش رایگان React JS مورد بررسی قرار خواهند گرفت.
• «Virtual DOM»: ری اکت نوعی DOM مجازی در حافظه ایجاد می‌کند. با این شرایط، فقط تغییرات نهایی DOM بعداً در DOM مرورگر به‌روز می‌شوند.
• «عبارت‌های جاوا اسکریپت» (JavaScript Expressions): عبارت‌های جاوا اسکریپت را می‌توان در فایل‌های JSX با استفاده از آکولاد «{}» به کار برد.

مزایای React JS چه هستند؟

از مهم‌ترین مزایای ری اکت می‌توان فهرست موارد زیر را نام برد:

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت

کلیک کنید

• استفاده از Virtual DOM: ری اکت از DOM مجازی استفاده می‌کند که سرعت برنامه را افزایش می‌دهد.
• کامپوننت‌ها: کامپوننت‌ها در React JSقابل‌استفاده مجدد هستند و برای نگهداری کدها بسیار کاربردی محسوب می‌شوند.
• منبع آزاد بودن: React JS نوعی کتابخانه جاوا اسکریپت منبع آزاد محسوب می‌شود که استفاده از آن آسان است.
• محبوبیت زیاد: React JS محبوب است و توسط فیس‌بوک و اینستاگرام نگهداری خواهد شد. همچنین ری اکت جی اس توسط بسیاری از شرکت‌های معروف نیز استفاده می‌شود.
• امکان تعمیر و نگهداری مطلوب: شرکت متا React JS را پشتیبانی می‌کند و این فناوری به طور منظم به‌روزرسانی می‌شود.
• امکان استفاده برای توسعه برنامه‌های دسکتاپ و موبایل: React JS را می‌توان برای توسعه رابط کاربری غنی به منظور توسعه برنامه‌های دسکتاپ و موبایل استفاده کرد.
• اشکال‌زدایی و آزمایش آسان: بیشتر کارهای کد نویسی ری اکت به جای HTML در جاوا اسکریپت انجام می‌شوند و این امر دیباگ کردن و آزمایش برنامه را آسان می‌کند.

معایب React JS کدامند؟

از مهم‌ترین معایب React JS نیز می‌توان فهرست معایب زیر را بیان کرد:

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

• JSX: بیشتر کدها با JSX نوشته شده‌اند که می‌تواند کاملاً گیج‌کننده باشد، زیرا اکثر فریم‌ورک‌های دیگر ترجیح می‌دهند HTML را از کدهای جاوا اسکریپت جدا نگه دارند.
• اندازه فایل: اندازه فایل React JS بزرگ است.

چرا باید React JS را یاد گرفت؟

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

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

در کل می‌توان دلایل زیر را برای یادگیری React JS مطرح کرد:

• استفاده از React JS آسان است و این کتابخانه ویژگی‌هایی مانند سادگی، انعطاف‌پذیری و DOM مجازی را ارائه می‌دهد. زیرساخت ماژولار آن به توسعه‌دهندگان کمک می‌کند تا برنامه‌ها را به سرعت بسازند و نگهداری کنند.
• تقاضای زیاد برای توسعه‌دهندگان React JS دلیل دیگری برای یادگیری React به حساب می‌آید. در ایالات‌متحده آمریکا، میانگین حقوق سالانه یک توسعه‌دهنده React JS چیزی نزدیک به ۱۲ هزار دلار است. شرکت‌ها به طور مستمر در جستجوی استخدام افراد متخصص ری اکت هستند و این یافتن فرصت‌های شغلی در توسعه React را آسان‌تر می‌کند.
• یادگیری اصول اولیه React سخت نیست، به خصوص اگر کاربر درک خوبی از جاوا اسکریپت داشته باشد. React JS همچنین بخش‌هایی از قابلیت‌های قابل‌استفاده مجدد را در سراسر برنامه وب ارائه می‌دهد که یادگیری آن را نسبتاً ساده می‌کند.
• با یادگیری React JS می‌توان درک خود را از اصول جاوا اسکریپت نیز بهبود بخشید. این دانش به کاربر در حرفه او کمک کرده و داشتن آن را به یک مهارت ضروری تبدیل می‌کند.
• همچنین جامعه وسیعی برای پشتیبانی از React در کنار تعداد پروژه‌های منبع باز زیادی در «گیت‌هاب» برای کمک به یادگیری آسان‌تر آن وجود دارد.

درک مفاهیم اساسی جاوا اسکریپت مانند «مپ» (Map)، «فیلتر» (Filter) و موارد دیگر نیز می‌تواند به کاربر در یادگیری سریع‌تر React JS کمک کند. درک این مفاهیم ضروری هستند تا کاربر بتواند با React به طور مؤثر کار کند.

آموزش نصب React JS

در این بخش از آموزش React JS رایگان به نصب این کتابخانه محبوب پرداخته می‌شود. اگر کاربر بخواهد React را نصب یا یک پروژه React ایجاد کند، بهترین راه برای انجام این کار استفاده از Create-React-App است.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

برای شروع، باید از ترمینال یا خط فرمان سیستم‌ عامل خود استفاده کرد. قبل از شروع، باید اطمینان حاصل شود که «نود جی اس» (Node.js) روی کامپیوتر نصب شده باشد. همچنین برای اجرای ری اکت لازم است «NPM» یا «Yarn» را نیز نصب کرد. در این آموزش React JS رایگان ، از NPM استفاده شده است.

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

1node -v

برای اطمینان از نصب بودن یا نبودن NPM نیز می‌توان دستور زیر را در ترمینال وارد کرد.

1npm -v

برای استفاده ازCreate-React-App ، نسخه Node کاربر باید حداقل نسخه ۱۴ و نسخه NPM کاربر نباید پایین‌تر از نسخه ۵.۶ باشد. اگر نسخه NPM کاربر پایین‌تر بود، می‌توان آن را با استفاده از دستور NPM update -g به آخرین نسخه NPM به‌روزرسانی کرد. پس از بررسی نسخه‌های NPM و نود جی اس، می‌توان React را با استفاده از دستورCreate-React-App نصب کرد.

1create-react-app

Create-React-App چیست ؟

«Create-React-App» ابزاری است که پیکربندی و نصب بسته مورد نیاز برای ایجاد برنامه‌های جدید React JS را خودکار می‌کند. این ابزار فرآیند ساخت یک برنامه React را ساده خواهد کرد که اگر به صورت دستی این کار انجام می‌شد، می‌توانست زمان‌بر و پیچیده باشد.

آموزش ساخت اپلیکیشن React JS

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

1npx create-react-app my-app

• توجه: می‌توان my-app را با هر نام دلخواهی جایگزین کرد.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید