آموزش 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 در جاوا اسکریپت در فرادرس

کلیک کنید

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

نحوه اجرای برنامه React چگونه است؟

برای مشاهده برنامه React به صورت Live، باید آن را با استفاده از ترمینال اجرا کرد. برای این هدف، ابتدا باید با استفاده از دستور cd my-app  در ترمینال در محل پوشه‌ای قرار بگیریم که برنامه در آن نصب شده است. در این رابطه باید نام برنامه شخصی خود را جایگزین my-app  کنیم.

فیلم آموزش پروژه محور ری اکت – طراحی سایت رمز ارزها با React.js در فرادرس

کلیک کنید

در این مرحله نیاز است دستور NPM start  را در ترمینال اجرا کرد. این دستور برنامه ساخته شده را در مرورگر وب در localhost:3000  راه‌اندازی می‌کند و خروجی چیزی شبیه به تصویر زیر خواهد بود.

ساختار دایرکتوری برنامه React چگونه است؟

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

فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS

کلیک کنید

• «Node_Modules»
• «/Public»
  • «Index.html»
  • «Favicon.ico»
• «/Src»
  • «App.css»
  • «App.js»
  • «App.test.js»
  • «Index.css»
  • «Index.js»
  • «logo.svg»
• «gitignore.»
• «Package.json»
• «Package-lock.json»
• «README.md»

هر پوشه و فایل موجود در دایرکتوری، هدف و عملکرد خاصی در برنامه React دارد.

  پوشه Node_Modules

پوشه « Node_Modules  » در برنامه React حاوی تمام وابستگی‌هایی است که برنامه برای عملکرد صحیح به آن نیاز دارد. این پوشه را می‌توان از کنترل منبع حذف و سپس می‌توان آن را از فایل « Package.json  » بازسازی کرد.

فیلم آموزش پروژه محور ری اکت جی اس – طراحی وب اپلیکیشن پیشرو PWA با React.js در فرادرس

کلیک کنید

فایل Package.json فایلی ضروری محسوب می‌شود که با پوشه Node_Modules کار می‌کند. این پوشه تمام وابستگی‌های مورد نیاز برنامه و برخی از دستورات اسکریپت را در خود دارد. اگر پوشه Node_Modules حذف شود، برنامه React دیگر کار نخواهد کرد، زیرا اجرای برنامه به آن فایل‌ها بستگی دارد. برای بازیابی وابستگی‌ها، می‌توان دستور NPM install  را در ترمینال اجرا کرد تا این دستور به طور خودکار تمام بسته‌های فهرست شده در فایل Package.json را دوباره نصب کند.

این ویژگی منحصربه‌فرد برای ایجاد برنامه ری اکت نیست، بلکه برای هر پروژه Node.js که وابستگی دارد اعمال می‌شود. با انجام این کار، می‌توان کدهای پروژه را بدون نیاز به پوشه حجیم Node_Modules ، به اشتراک گذاشت. تصویر بالا حاوی پوشه‌ها و فایل‌های بسیار بیشتری است که در عکس بالا همه آن‌ها قابل مشاهده نیستند.

فیلم آموزش مقدماتی نود جی اس Node.js در فرادرس

کلیک کنید

پوشه Public در دایرکتوری ری اکت جی اس چیست؟

پوشه « Public  » یا پوشه عمومی حاوی فایل‌های ثابت مانند فایل HTML است. از این فایل می‌توان برای ایجاد تغییرات در عنوان برنامه وب، افزودن CDNهایی مانند فونت‌های گوگل و موارد دیگر استفاده کرد.

فیلم آموزش پروژه محور ری اکت – طراحی سایت رمز ارزها با React.js در فرادرس

کلیک کنید

این فایل فقط نوعی فایل HTML معمولی محسوب می‌شود. تنها نکته حائز اهمیت در رابطه با این فایل این است که تگ div  در آن دارای شناسه root  است، زیرا کل برنامه React در آنجا قرار می‌گیرد.

1<div id="root"></div>

در کل در این پوشه فایل‌هایی مانند تصویر زیر قرار خواهند گرفت.

فایل gitignore. چیست؟

فایل « .gitignore  » فایل‌ها و پوشه‌هایی را مشخص می‌کند که به وسیله کنترل منبع کاربر نادیده گرفته می‌شوند. این شامل « Node_Modules  » و پوشه « Build  » به طور پیش‌فرض می‌شود، اما کاربر می‌تواند فایل‌ها را در صورت نیاز به آن اضافه یا از آن حذف کند.

پوشه Build

پوشه Build در پروژه قابل مشاهده نیست، اما زمانی که پروژه ساخته می‌شود، ایجاد خواهد شد. این پوشه شامل نوعی پوشه آماده تولید از منابع استاتیک است که می‌تواند در پلتفرم‌هایی مانند «Netlify» مستقر شود.

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

کلیک کنید

پوشه Src

پوشه « Src  » جایی است که بیشترین کارهای توسعه در آن انجام می‌شود و توجه به آن بسیار حائز اهمیت خواهد بود. این پوشه، پوشه اصلی برای توسعه‌دهنده React و حاوی کد منبع برنامه است. پوشه Src حاوی فایل‌هایی خواهد بود که در تصویر زیر قابل مشاهده هستند.

در ادامه این آموزش React JS رایگان ، هر یک از فایل‌های زیر را جداگانه شرح خواهیم داد.

• « App.js  »
• « Index.js »
• « Index.css »
• « App.css »

فایل App.js چیست؟

در پروژه ری اکت جی اس، App.js جایی است که همه اجزای برنامه را گرد هم می‌آورد. اگرچه می‌توان نام دیگری را هم برای این فایل انتخاب کرد، اما بهتر است آن را با نام App.js نگهداری کنیم تا شفافیت و خوانایی پروژه بالا برود و برای سایر برنامه‌نویسان در آینده قابل درک باشد.

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

کلیک کنید

فایل Index.js

از طرف دیگر، Index.js نقطه شروع برنامه ری اکت محسوب می‌شود. به طور خاص، این فایل جایی است که فایل App.js را رندر کرده و «شناسه روت یا ریشه» ( Root Id ) را از فایل « Index.html » هدف قرار می‌دهد. در این فایل تمام اجزا و صفحات برنامه به همدیگر می‌رسند. محتویات این فایل چیزی شبیه به قطعه کد زیر است.

1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4
5ReactDOM.render(
6  <React.StrictMode>
7    <App />
8  </React.StrictMode>,
9  document.getElementById('root')
10);

App.css و Index.css در برنامه ری اکت جی اس

هر دو فایل App.css و Index.css حاوی استایل‌هایی برای برنامه React هستند. فایل Index.css شامل استایل سراسری خواهد بود، در حالی که فایل App.css مختص فایل App.js  است، اما استفاده از هر دو فایل اجباری نیست. کاربر می‌تواند این حق انتخاب را داشته باشد که فقط از یک فایل CSS استفاده کند.

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

کلیک کنید

JSX چیست؟

JSX نوعی پسوند نحوی از جاوا اسکریپت به حساب می‌آید که در React استفاده می‌شود و اجازه می‌دهد HTML و جاوا اسکریپت با هم به روشی ساده‌تر ادغام و نوشته شوند. بدون JSX، نوشتن کد در React می‌تواند زمان‌بر باشد، زیرا هر بار باید از تابع React.createElement استفاده کرد. حتی برای افزودن یک div  ساده باید هر بار از React.createElement  استفاده شود.

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

کلیک کنید

تصویر زیر کد نوشته شده یکسانی را در JSX و React.createElement نشان می‌دهد که به وضوح از آن می‌توان متوجه شد که JSX به منظور نوشتن، درک و مدیریت آسان‌تر استفاده از تابع React.createElement به کار رفته است. برنامه Create-React-App  به صورت داخلی از «Babel» برای تبدیل JSX به جاوا اسکریپت استفاده می‌کند، بنابراین نیازی نیست Babel را با «Webpack» پیکربندی کرد.

باید ها و نباید های JSX

هنگام کار با JSX، مهم است که برخی از بایدها و نبایدها را در نظر داشت تا از بروز هر گونه باگ احتمالی در کدها جلوگیری شود. توجه به دو نکته زیر در این رابطه بسیار حائز اهمیت است:

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

کلیک کنید

• قرار دادن نشانه‌گذاری: نشانه‌گذاری در JSX باید بعد از عبارت بازگشت، به صورت یک خط کد یا به صورت بلوک کد قرار گیرد.
• بسته‌بندی کد: تمام کدهای موجود در JSX باید در یک تگ بسته‌بندی شوند که می‌تواند تگ div  ، تگ بدون محتوا ( <> ) یا هر تگ دیگری باشد. عدم انجام این کار منجر به خطا می‌شود، زیرا React JS به عناصر مجاور نیاز دارد که در تگ والدی پیچیده شوند.

مثال: کدهای زیر بدون تگ والد کار نخواهند کرد.

1const App = () => {
2  return (
3      <h1>JSX Title</h1>
4      <p>This is first JSX Element!</p>
5      <p>This is another JSX Element</p>
6  );
7};

با این حال، کد زیر همانطور که در تگی والد پیچیده شده است کار خواهد کرد:

1const App = () => {
2  return (
3    <div>
4      <h1>JSX Title</h1>
5      <p>This is first JSX Element!</p>
6      <p>This is another JSX Element</p>
7    </div>
8  );
9};

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

نحوه اضافه کردن کامنت به کد JSX

توسعه‌دهندگان برای درک بهتر کد باید نظرات خود را به کد JSX اضافه کنند. آن‌ها می‌توانند با استفاده از دستور میانبر Cmd + /‎  (در مک) یا کلیدهای میانبر Ctrl + /‎  نظرات را به کدهای خود اضافه کنند.

فیلم آموزش پروژه محور ری اکت جی اس – طراحی وب اپلیکیشن پیشرو PWA با React.js در فرادرس

کلیک کنید

• توجه: JSX ابزاری همه‌کاره است و می‌تواند کارهای زیادی را انجام دهد.

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

آموزش استفاده از React JS با CDN

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

فیلم آموزش پروژه محور ری اکت – طراحی سایت رمز ارزها با React.js در فرادرس

کلیک کنید

برای دریافت فایل‌های مورد نیاز، می‌توان به سایت رسمی React JS رفت و لینک‌های CDN را در [+] پیدا کرد. سپس می‌توان با استفاده از «تگ اسکریپت» ( Script ) فایل‌های مورد نیاز را در کدهای خود قرار داد.

هر دو React و ReactDOM از طریق CDN در دسترس هستند. برای «DEV» فایل حاوی کد زیر است:

1<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
2<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

همچنین برای «Prod» این کد به صورت زیر خواهد بود:

1<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
2<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

همچنین برای بارگذاری نسخه‌ای خاص از React و React-DOM، شماره نسخه را باید با عدد ١٨ جایگزین کرد.

برای شروع کار با React، می‌توان از آخرین نسخه React و React-DOM با جایگزین کردن شماره نسخه در react-development.js  و react-dom.developement.js  استفاده کرد. اگر تصمیم به استفاده از فایل‌های CDN باشد، باید حتماً ویژگی cross-origin  برای جلوگیری از هر گونه مشکل بین دامنه‌ای وارد شود.

توجه به این نکته مهم است که کدهای React JS را نمی‌توان مستقیماً در مرورگر اجرا کرد و باید قبل از اجرا در مرورگر با استفاده از Babel  به جاوا اسکریپت منتقل شود. اسکریپتِ BabelJS زیر را می‌توان برای انتقال کدهای React قبل از اجرای آن در مرورگر مانند زیر استفاده کرد:

1<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

مثالی از React JS با CDN

در اینجا مثالی از کار با React JS با استفاده از فایل های CDN و اسکریپت babel.js  آورده شده است.

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <title>Hello World</title>
6    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
7    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
8    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
9  </head>
10  <body>
11    <div id="app"></div>
12    <script type="text/babel">
13      ReactDOM.render(
14        <h1 dir="rtl">سلام. این یک آموزش ساده برای استفاده از React.js با استفاده از CDN است.</h1>,
15        document.getElementById('app')
16      );
17   </script>
18  </body>
19</html>

خروجی کدهای بالا چیزی شبیه به تصویر زیر است:

برنامه نویسی اعلانی و ری اکت

کار را با استفاده از قطعه کد جاوا اسکریپت خالص زیر شروع خواهیم کرد که یک کانتینر را div  از HTML ارائه می‌دهد.

1<body>
2  <div id="root"></div>
3</body>

حال می‌توان با نوشتن کدهای زیر در یک فایل اسکریپت، پاراگرافی را در تگ div رندر کرد:

1const root = document.getElementById('root');
2const paragraph = document.createElement('p');
3const paragraphContent = document.createTextNode("این یک پاراگراف است");
4paragraph.appendChild(paragraphContent);
5root.appendChild(paragraph);

در قطعه کد بالا، روند کار به صورت زیر خواهد بود:

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

کلیک کنید

• عنصر div با شناسه root  دریافت شده است.
• عنصر p  ساخته شده است.
• گره متنی برای عنصر p ایجاد می‌شود.
• متن به عنصر p اضافه شده است.
• در نهایت عنصر p در div اضافه خواهند شد.

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

1<p>این یک پاراگران است</p>

React نحوه به‌روزرسانی UI را بر اساس این توضیحات مشخص کرده و روند توسعه را سریع‌تر می‌کند. این رویکرد، رویکرد «برنامه‌ نویسی اعلانی» (Declarative Approach) نامیده می‌شود و به کاربر کمک می‌کند از نوشتن دستورالعمل‌های تکراری و طولانی کدها برای هر کار اجتناب کند.

کامپوننت های ری اکت جی اس

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

فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS در فرادرس

کلیک کنید

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

در صورت لزوم، امکان تجزیه آن‌ها به اجزای کوچک‌تر نیز وجود دارد. در مثال UI زیر، به عنوان یک پروژه ساده در این آموزش رایگان ری اکت جی اس، شش مؤلفه وجود دارند که رابط کاربری را تشکیل می‌دهند. این مؤلفه‌ها به صورت فهرست زیر هستند:

• «TodoApp»: مولفه والد یا ریشه بوده و دارای دو جز مستقیم فرزند است.
• «Header»: نمایش متن عنوان «todos».
• «TodosLogic»: شامل منطق برنامه بوده و خود دارای دو جزء مستقیم فرزند است.
• «InputTodo»: ورودی کاربر را می‌گیرد.
• «TodosList»: به عنوان ظرفی برای آیتم‌های« todos» عمل می‌کند.
• «TodoItem»: آیتم «todos» را رندر می‌کند.

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

Virtual DOM در ری اکت

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

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

کلیک کنید

برای رفع این مشکل، React مفهوم Virtual DOM را معرفی کرد. با این رویکرد، React به جای اینکه مستقیماً DOM مرورگر را دست‌کاری کند، نوعی نمایش مجازی از UI ایجاد می‌کند که می‌تواند به صورت کارآمدتر به‌روز شود. هنگامی که وضعیت کامپوننتی تغییر می‌کند، React نمایش مجازی جدید را با حالت قبلی مقایسه کرده و حداقل تعداد تغییرات موردنیاز برای به‌روزرسانی DOM واقعی را محاسبه خواهد کرد. قطعه کد زیر نوعی رندر مجدد مجدد را با جاوا اسکریپت را نشان می‌دهد:

1const update = () => {
2  //   JavaScript
3  const element2 = `
4    <h3>JavaScript:</h3>
5    <form>
6      <input type="text"/>
7    </form>
8    <span>Time: ${new Date().toLocaleTimeString()}</span>
9  `;
10  document.querySelector('#root2').innerHTML = element2;
11};
12
13setInterval(update, 1000);

در قطعه کد بالا، تابع setInterval()‎ هر ثانیه یک رندر مجدد از رابط کاربری ایجاد می‌کند و باعث می‌شود عناصر DOM دوباره رندر شوند و قسمت ورودی متن حالت خود را از دست بدهد. خروجی چیزی شبیه به تصویر زیر است:

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

کاربرد DOM مجازی در ری اکت

DOM مجازی در React نمایشی از DOM واقعی است که صرفاً در حافظه وجود دارد. این به عنوان نوعی تکنیک بهینه‌سازی برای ارائه کارآمد به‌روزرسانی UI عمل می‌کند. رویکرد اعلامی React به کاربر اجازه می‌دهد تا با انتزاعی کردن پیچیدگی انتقال حالت، کدهای قابل پیش‌بینی‌تری بنویسد. DOM مجازی React را قادر می‌سازد تا تغییرات حالت را مدیریت کرده و DOM واقعی را فقط در صورت لزوم به‌روزرسانی کند.

فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS در فرادرس

کلیک کنید

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

ری اکت چگونه DOM مجازی را پیاده سازی می کند؟

در برنامه React، رابط کاربری (UI) با استفاده از «درخت DOM مجازی» (Virtual Tree DOM) رندر می‌شود که ایجاد و در حافظه ذخیره شده است. هنگامی که به‌روزرسانی‌هایی برای رابط کاربری وجود دارد، React نوعی درخت DOM مجازی جدید ایجاد کرده و آن را با استفاده از نوعی الگوریتم متفاوت با «تصویر لحظه‌ای» (اسنپ شات | Snapshot) قبلی مقایسه می‌کند تا تغییرات لازم را شناسایی کند. این فرآیند به عنوان «Reconciliation» شناخته می‌شود.

• نکته: Snapshot نوعی فایل پیکربندی است که سبک کامپوننت، UI و غیره را در برنامه ری اکت تعریف خواهد کرد.

پس از شناسایی تغییرات، کتابخانه React از نوعی کتابخانه رندر برای به‌روزرسانی DOM واقعی و فیزیکی تنها با ایجاد به‌روزرسانی نه برای کل درخت بلکه برای گره‌های خاصی استفاده می‌کند که تغییر کرده‌اند. این رویکرد کارآمدتر است، زیرا به‌روزرسانی کل DOM می‌تواند زمان‌بر باشد و بر عملکرد برنامه تأثیر منفی بگذارد.

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

آموزش اضافه کردن React به صفحات HTML

در این بخش از آموزش React Js رایگان به آموزش اضافه کردن React به صفحات HTML پرداخته خواهد شد. برای درک اینکه چگونه React در مقایسه با جاوا اسکریپتِ خام رندرینگ را انجام می‌دهد، می‌توان React را به بخش خاصی از صفحه HTML اضافه کرد.

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

کلیک کنید

برای انجام این کار، باید یک عنصر div  ساخت که محتوای React را نگه می‌دارد و سپس شامل دو اسکریپت می‌شود که به React CDN اشاره می‌کنند.

با انجام این کار، می‌توان از توانایی React برای به‌روزرسانی مؤثر و رندر کردن تنها مؤلفه‌های ضروری صفحه استفاده کرد. این می‌تواند به‌ویژه در برنامه‌های پیچیده‌تری که در آن مؤلفه‌های متعددی وجود دارند که باید مرتباً به‌روزرسانی شوند، منجر به تجربه کاربری بهتر و روان‌تر شود. در کل، نحوه ادغام کدهای ری اکت در HTML چیزی مشابه قطعه کد زیر است:

1<body>
2  <h1 dir = "rtl"> استفاده از react در html</h1>
3  <!--  React container  -->
4  <div id="root1"></div>
5
6  <!-- React scripts -->
7  <script
8    src="https://unpkg.com/react@18/umd/react.development.js"
9    crossorigin
10  ></script>
11  <script
12    src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
13    crossorigin
14  ></script>
15  <!-- load script file. -->
16  <script src="script.js"></script>
17</body>

سپس، در یک فایل جاوا اسکریپت، کد React JS زیر باید اضافه شود.

1const rootElement = document.querySelector('#root1');
2const root = ReactDOM.createRoot(rootElement);
3
4const update = () => {
5  const element1 = React.createElement(
6    'div',
7    null,
8    React.createElement(
9      'form',
10      null,
11      React.createElement('input', {
12        type: 'text',
13      })
14    ),
15    React.createElement(
16      'span',
17      null,
18      'Time: ',
19      new Date().toLocaleTimeString()
20    )
21  );
22  root.render(element1);
23};
24
25setInterval(update, 1000);

در کد بالا، ابتدا به عنصر DOM که در فایل HTML موجود است دسترسی ایجاد می‌شود و از آن برای ایجاد برنامه React جدید استفاده خواهد شد. این نوعی رویکرد رایج هنگام ادغام React در برنامه موجود به حساب می‌آید، زیرا به کاربر اجازه می‌دهد تا به تدریج اجزا و ویژگی‌های جدید را بدون بازنویسی همه‌چیز از ابتدا معرفی کند.

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

1const rootElement = document.querySelector('#root1');
2const root = ReactDOM.createRoot(rootElement);

React از ReactDOM استفاده می‌کند تا مطمئن شود DOM واقعی فقط آنچه لازم است را دریافت و دوباره رندر می‌کند. سپس محتوای اختصاص داده شده به element1  در داخل DOM ارائه خواهد شد:

1root.render(element1);

محتوایی که ارائه شده است عناصر React نامیده می‌شوند. آن‌ها آنچه را توصیف می‌کنند که کاربر روی صفحه می‌بیند. حال اگر عناصر به صورت زیر در کنسول مرورگر وارد شوند نتیجه چیست؟

1let element1 = React.createElement(
2 // ...
3);
4console.log(element1)

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

هنگامی که React عناصر خود را رندر می‌کند، نوعی شی DOM مجازی ایجاد کرده و آن را در حافظه ذخیره می‌کند. اگر تغییراتی در رندر ایجاد شود، React درخت DOM مجازی جدیدی ایجاد می‌کند و آن را با نسخه قبلی مقایسه خواهد کرد تا آنچه را تغییر داده است شناسایی کند. این فرآیند بسیار سریع‌تر از دست‌کاری DOM واقعی انجام می‌شود، زیرا DOM مجازی نوعی نمایش کم‌خجم و سبُک از UI محسوب می‌شود. پس از اینکه React عناصر لازم را به‌روزرسانی کرد، DOM واقعی به‌روز شده و با محتوای جدید رندر مجدد می‌شود. تصویر GIF زیر این رفتار را نشان می‌دهد.

آموزش راه اندازی React JS با Vite

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

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

کلیک کنید

این ویژگی ابزار Vite باعث می‌شود برای ایجاد پروژه React فوری بسیار گزینه مناسبی به حساب آید. در این بخش از آموزش رایگان ری اکت جی اس به نحوه کار با این ابزار نیز پرداخته خواهد شد. برای استفاده از این ابزار باید دستور زیر را در ترمینال وارد کرد.

1npm create vite@latest

حال باید نام پروژه (در این مثال: Faradars-test-app ) را وارد کنیم و سپس Preact از فهرست چارچوب‌ها باید انتخاب شود:

همچنین از کاربر خواسته می‌شود، بین جاوا اسکریپت و تایپ اسکریپت یکی را انتخاب کند که در این مثال، جاوا اسکریپت انتخاب شده است. پس از انجام این کار، حال باید پروژه را باز و NPM install  را اجرا کرد تا وابستگی‌های لازم در پوشه محلی Node_Modules  نصب شوند.

1cd Faradars-test-app
2npm install

حال می‌توان فایل Package.json  را با نوعی ویرایشگر متن باز کرد و اسکریپت‌های زیر را در آن دید.

1{
2  "name": "react",
3  "private": true,
4  "version": "0.0.0",
5  "type": "module",
6  "scripts": {
7    "dev": "vite",
8    "build": "vite build",
9    "preview": "vite preview"
10  },
11  "dependencies": {
12    "react": "^18.2.0",
13    "react-dom": "^18.2.0"
14  },
15  "devDependencies": {
16    "@types/react": "^18.0.28",
17    "@types/react-dom": "^18.0.11",
18    "@vitejs/plugin-react": "^3.1.0",
19    "vite": "^4.2.0"
20  }
21}

برای اجرای سرور توسعه، دستور NPM run dev  را در ترمینال باید اجرا کنیم. با این کار، برنامه به طور خودکار در پنجره مرورگر در پورت موجود شروع می‌شود. اگر چیزی ظاهر نشد، می‌توان نشانی مشخص شده در تصویر زیر را در مرورگر باز کرد که در این مثال، آدرس آن http://localhost:5173/  است.

خروجی کار بالا که به صورت عملی در این مطلب انجام شده است به صورت تصویر زیر خواهد بود:

مقایسه ساختار پوشه Vite با CRA

هنگام مقایسه ساختار پوشه React Create App (CRA) و Vite، واضح است که پوشه Src  حاوی فایل‌های کاری در هر دو حالت خواهد بود. تفاوت اصلی این است که CRA از Index.js  به عنوان نقطه ورود استفاده می‌کند، در حالی که Vite به فایل main.jsx  متکی است. علاوه بر این، CRA فایل‌های .js یا .jsx هنگام نوشتن کد React JS را مجاز می‌شمارد، در حالی که Vite فقط فایل‌های .jsx را می‌پذیرد.

آموزش راه اندازی React JS بدون نیاز به Vite و CRA

اگر کاربر بخواهد بدون استفاده از ابزارهایی مانند Vite و CRA برنامه React بسازد، باید کارهای بیشتری انجام دهد. برای این هدف باید چند کتابخانه را نصب و پیکربندی کرد تا ویژگی‌هایی را که این ابزارها به صورت خودکار ارائه می‌کنند جبران شوند.

فیلم آموزش پروژه محور ری اکت – طراحی سایت رمز ارزها با React.js در فرادرس

کلیک کنید

استفاده از برنامه Create-React-App ،Vite یا راه حل‌های دیگر معمولاً ساده‌ترین گزینه برای شروع کار با React هستند. با این حال، گاهی اوقات امکان دارد پروژه به حداقل تنظیمات نیاز داشته باشد و ابزارهای موجود ممکن است شامل مواردی باشند که کاربر به آن‌ها نیاز ندارد.

به عنوان مثال، Create-React-App انتزاعات زیادی اضافه می‌کند که سفارشی کردن پیکربندی را دشوار خواهد کرد. بنابراین، درک چگونگی راه‌اندازی پروژه بدون نیاز به هیچ ابزاری برای ارائه حداکثر انعطاف‌پذیری بسیار مهم است. به همین دلیل در این بخش از آموزش React JS رایگان به آن پرداخته‌ایم.

ایجاد پوشه و راه اندازی پروژه جدید

در قدم اول نیاز به ایجاد یک پوشه و راه‌اندازی پروژه جدید در آن وجود دارد که ما این کار را به صورت زیر در ترمینال انجام دادیم:

1mkdir react-project-Faradars-test1

حال پس از ایجاد پوشه پروژه باید وارد آن شد و دستور، NPM init -y  را اجرا کرد تا فایل Package.json  تولید شود. این به کاربر امکان می‌دهد اسکریپت‌ها را اضافه کرده و وابستگی‌های پروژه را اضافه کند.

نصب وابستگی ها

برای شروع کار با React، باید دو وابستگی اساسی زیر را نصب کرد:

• React
• React-DOM

React تنها شامل کتابخانه ری اکت است، در حالی که React-DOM به کاربر اجازه می‌دهد از React با DOM استفاده کند. با دستور زیر این کار قابل انجام است:

1npm install react react-dom

در مرحله بعد، باید «Bundler» (وب‌پک نوعی باندلر است) و کامپایلر را نصب کرد تا کدها و وابستگی‌های پروژه بسته‌بندی شوند و کدها به آنچه همه مرورگرها می‌فهمند تبدیل شوند. برای این منظور از «Webpack» و «Babel» استفاده می‌شود و هر دو را به عنوان Dependencyباید نصب کرد. برای نصب Webpack می‌توان دستور زیر را به کار برد.

1npm install --save-dev webpack webpack-cli webpack-dev-server

برای نصب Babel نیز باید از دستور زیر استفاده شود.

1npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env

در مرحله بعد، باید افزونه‌ای برای کمک به ادغام بسته‌های Webpack در فایل‌های HTML نصب شود. این افزونه به اضافه کردن تگ‌های اسکریپت لازم به فایل HTML برای بسته‌های Webpack کمک می‌کند که با دستور زیر قابل انجام است:

1npm install --save-dev html-webpack-plugin

پیکربندی Webpack

می‌توان پیکربندی‌های مختلفی را برای توسعه و تولید با Webpack تنظیم کرد. برای این کار، سه فایل webpack.common.js ، webpack.dev.js  و webpack.prod.js را در ریشه پروژه باید ایجاد شوند. این فایل‌ها به کاربر اجازه می‌دهند تا نوعی پیکربندی مشترک را حفظ کند و در عین حال محیط‌های مختلف را نیز هدف قرار دهد.

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

کلیک کنید

در فایل webpack.common.js ، پیکربندی رایج زیر باید قرار بگیرد.

1const path = require('path');
2const HTMLWebpackPlugin = require('html-webpack-plugin');
3module.exports = {
4  entry: './src/index.js',
5  output: {
6    path: path.join(__dirname, 'dist'),
7    filename: 'bundle.js',
8    clean: true,
9  },
10  plugins: [
11    new HTMLWebpackPlugin({
12      template: './src/index.html',
13    }),
14  ],
15  module: {
16    rules: [
17      {
18        test: /.(js|jsx)$/,
19        exclude: /node_modules/,
20        use: [{ loader: 'babel-loader' }],
21      },
22    ],
23  },
24};

همچنین برای گنجاندن پیکربندی متداول در تنظیمات محیطی خاص (یعنی توسعه و تولید)، ابزاری به نام «Webpack-Merge» باید با دستور زیر نصب شود.

1npm install --save-dev webpack-merge

حال باید فایل webpack.dev.js  را باز کرده و پیکربندی مخصوص dev  زیر را به آن اضافه کرد.

1const { merge } = require('webpack-merge');
2const common = require('./webpack.common.js');
3module.exports = merge(common, {
4  mode: 'development',
5  devtool: 'inline-source-map',
6  devServer: {
7    static: './dist',
8    port: 3001,
9    open: true,
10    hot: true,
11    compress: true,
12  },
13});

همچنین باید در فایل webpack.prod.js  نیز باید اسکریپت زیر قرار بگیرد.

1const { merge } = require('webpack-merge');
2const common = require('./webpack.common.js');
3module.exports = merge(common, {
4  mode: 'production',
5  devtool: 'source-map',
6});

پوشه کاری پروژه ما تا به اینجا باید به صورت زیر باشد.

ذخیره همه فایل ها

در شی<  module.exports فایل webpack.common.js  ، گزینه‌ای ورودی مشخص شده است تا به Webpack بگوید برای شروع ساختن بسته به کجا نگاه کند. برای این کار باید یک فایل Src/Index.js در ریشه پروژه ایجاد و کدی را به آن اضافه کرد. شی خروجی جایی است که به Webpack می‌گوید فایل‌های همراه را خروجی بگیرد.

HTMLWebpackPlugin به کاربر امکان می‌دهد از نوعی الگوی HTML سفارشی استفاده کند که در آن‌ همه فایل‌های همراه ضروری را تزریق می‌کند. حال باید فایل Src/Index.html ایجاد شود و کد زیر را به آن اضافه کرد.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta
7      name="viewport"
8      content="width=device-width, initial-scale=1.0"
9    />
10    <title>React application</title>
11  </head>
12  <body>
13    <div id="root"></div>
14  </body>
15</html>

Index.html  در داخل پوشه Src  قرار دارد. تمرکز این بخش بر کانتینر ریشه div  است. همان‌طور که در هنگام نوشتن React در HTML انجام شد، از این عنصر DOM برای نمایش برنامه نیز باید استفاده کرد. module.rules  در فایل کانفیگ به کاربر اجازه می‌دهد تا قوانینی را برای ماژول‌ها تنظیم کند.

در این فایل به Webpack گفته می‌شود که از babel-loader  برای انتقال فایل‌های جاوا اسکریپت استفاده کند. علاوه بر این، باید به بارگذار Babel  دستورات اضافی برای انجام کار داده شود. برای انجام این کار، باید نوعی فایل پیکربندی Babel به نام .babelrc  در ریشه پروژه ایجاد کرد و کد زیر به آن اضافه شود.

1{
2  "presets": [
3    "@babel/preset-env",
4    ["@babel/preset-react", {
5      "runtime" : "automatic"
6    }]
7  ]
8}

اکنون Webpack برای اجرای برنامه React پیکربندی شده است.

تعریف اسکریپت ها

در مرحله بعد، باید اسکریپت‌ها را در فایل Package.json  تغییر داد تا از فایل های پیکربندی استفاده کند.

فیلم آموزش برنامه نویسی جاوا اسکریپت در ادوبی انیمیت Adobe Animate در فرادرس

کلیک کنید

می‌توان آن‌ها را به صورت زیر به‌روز کرد.

1"scripts": {
2  "start": "webpack serve --config webpack.dev.js",
3  "build": "webpack --config webpack.prod.js"
4},

حال باید آن را ذخیره کرد.

رندر کردن کد React

قبل از اجرای اسکریپت‌ها، باید فایل Src/Index.js را باز و کد زیر را به آن اضافه کرد:

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3
4const rootElement = document.getElementById('root');
5
6const root = ReactDOM.createRoot(rootElement);
7root.render(<h1>سلام. به مجله فرادرس خوش آمدید. این یک آموزش ساده ری اکت است</h1>);

با این کار React و ReactDOM را به جای بارگیری، از CDN مربوطه وارد شده است و از آن‌ها برای ارائه یک عنصر JSX ساده در محفظه ریشه استفاده خواهد شد. این شبیه به «سینتکس» (Sytnax) ارائه عناصر React در فایل HTML خواهد بود. حال با اجرای دستور NPM start در ترمینال، اپلیکیشنی که ساخته شده است با ری اکت اجرا خواهد شد. خروجی ترمینال چیزی شبیه به تصویر زیر است:

خروجی برنامه نیز به صورت تصویر زیر خواهد بود که در آدرس http://localhost:3001/ باز شده است.

اگر دستور NPM run build در ترمینال وارد شود، پوشه dist آماده تولید در پوشه اصلی پروژه، ایجاد خواهد شد.

مدیریت فایل های دیگر

در module.rules  پروژه فوق، فقط قوانینی برای مدیریت فایل‌های جاوا اسکریپت و فایل‌های JSX اضافه شده است. می‌توان به Webpack گفت که چگونه انواع فایل‌های دیگر مانند تصاویر، CSS ،HTML و غیره را مدیریت کند که در این بخش از  آموزش React JS رایگان به آن پرداخته خواهد شد.

فیلم آموزش برنامه نویسی جاوا اسکریپت در ادوبی انیمیت Adobe Animate در فرادرس

کلیک کنید

اضافه کردن تصویر

اگر به عنوان مثال نوعی فایل تصویری مانند  Src/images/faradars-logo.svg به پروژه اضافه شود، باید قطعه کد Src/Index.js  را به صورت زیر به روز کرد.

1// ...
2import reactLogo from './images/faradars-logo.svg';
3root.render(
4  <div>
5    <h1>سلام. به این آموزش ری اکت خوش آمدید</h1>
6    <img src={reactLogo} className="logo faradars" alt="faradars logo" />
7  </div>
8);

حال اگر دستور NPM start اجرا شود، اجرا با خطا مواجه خواهد شد.

برای رفع مشکل باید module.rules  را در webpack.common.js  به‌روزرسانی کرد تا نوع منبع دارایی را در بر بگیرد و سرور بدون دریافت خطا راه‌اندازی شود.

1module: {
2  rules: [
3    // ...
4    {
5      test: /.(png|svg|jpg|gif)$/i,
6      type: 'asset/resource',
7    },
8  ],
9},

و سپس باید آبجکت خروجی را به‌روزرسانی کرد تا assetModuleFilename  را شامل شود.

1output: {
2  // ...
3  assetModuleFilename: 'images/[name][ext][query]',
4},

اضافه کردن کد CSS

می‌توان فایل Src/styles/app.css را اضافه و نوعی قانون CSS مانند کد زیر را نیز به پروژه اضافه کرد:

1body {
2  color: #ff2778;
3}

پس از آن، باید فایل CSS را در فایل Src/Index.js به صورت زیر وارد کرد:

1import './styles/app.css';

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

1npm install --save-dev mini-css-extract-plugin css-loader

اکنون باید در فایل webpack.common.js کد زیر را وارد کرد:

1const MiniCssExtractPlugin = require('mini-css-extract-plugin');

پس از آن، افزونه را باید در آرایه پلاگین‌ها یا همان افزونه‌ها به صورت زیر اضافه کرد:

1plugins: [
2  // ...
3  new MiniCssExtractPlugin({
4    filename: 'styles.css',
5  }),
6],

در گام بعدی باید module.rules را به‌روز کرد تا از لودرهایی مانند زیر استفاده کند:

1module: {
2  rules: [
3    // ...
4    {
5      test: /.css$/,
6      use: [MiniCssExtractPlugin.loader, 'css-loader'],
7    },
8  ],
9},

خروجی نهایی با اجرای دستور NPM start  به صورت زیر خواهد بود:

همانطور که مشاهده می‌شود، استایل متن تغییر کرده و در کنار آن لوگویی قابل مشاهده است.

State در React JS چیست؟

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

فیلم آموزش پروژه محور ری اکت – طراحی سایت رمز ارزها با React.js در فرادرس

کلیک کنید

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

فایل test.jsx  این پروژه حاوی قطعه کد زیر است:

1import React from 'react';
2import ReactDOM from 'react-dom';
3
4class Hello extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = {
8       msg: "سلام. به این آموزش از مجله فرادرس خوش آمدید"
9    }
10  }
11  render() {
12    return <h1>{this.state.msg}</h1>;
13  }
14}
15export default Hello;

فایل Index.js  نیز حاوی قطعه کد زیر است:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Hello from './test.jsx';
4
5ReactDOM.render(
6    <Hello />,
7    document.getElementById('root')
8); 

خروجی به صورت تصویر زیر خواهد بود:

Props در ری اکت چیست؟

«Props» در React JS مقادیری هستند که به کامپوننت‌ها منتقل می‌شوند و به آن‌ها اجازه دسترسی به داده‌ها یا ویژگی‌ها را از منابع خارجی می‌دهند. آن‌ها را می توان به عنوان متغیرهای سراسری در نظر گرفت که می توان به آن‌ها دسترسی پیدا کرد و در داخل کامپوننت استفاده کرد. در اینجا مثالی از ارسال props  به کامپوننت تابع برای پروژه بالا آورده شده است. قطعه کد جاوا اسکریپت زیر در نظر گرفته شود:

1import React from 'react';
2import ReactDOM from 'react-dom';
3function Hello(props) {
4    return <h1>{props.msg}</h1>;
5}  
6const Hello_comp = <Hello msg="سلام. به این آموزش از مجله فرادرس خوش آمدید" />;
7export default Hello_comp;

در مثال فوق، نوعی ویژگی به نام msg به کامپوننت Hello اضافه می‌شود. این ویژگی را می‌توان به‌عنوان « props » در تابع Hello ، که شی‌ای است که جزئیات ویژگی msg را دارد ارسال کرد و به آن دسترسی داشت. سپس کامپوننت به صورت زیر در Index.js  استفاده می‌شود:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Hello_comp from './test.jsx';
4
5ReactDOM.render(
6    Hello_comp,
7    document.getElementById('root')
8); 

خروجی قطعه کد بالا به صورت زیر خواهد بود:

دسترسی به Props در کلاس

برای دسترسی به Props در کلاس، می‌توان این کار را به صورت زیر انجام داد. فایل test.jsx حاوی قطعه کد زیر است:

1import React from 'react';
2import ReactDOM from 'react-dom';
3
4class Hello extends React.Component {
5  render() {
6    return <h1>{this.props.msg}</h1>;
7  }
8}
9export default Hello;

ویژگی msg به صورت زیر به کامپوننت در Index.js ارسال خواهد شد.

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Hello from './test.jsx';
4
5ReactDOM.render(
6    <Hello msg="سلام. به این آموزش از مجله فرادرس خوش آمدید" />,
7    document.getElementById('root')
8); 

خروجی نیز به صورت تصویر زیر خواهد بود:

چرخه زندگی کامپوننت در آموزش React JS

چرخه زندگی کامپوننت در React JS به چهار مرحله زیر تقسیم می‌شود:

فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS در فرادرس

کلیک کنید

• «راه‌اندازی اولیه» (Initialization)
• «نصب» (Mounting)
• «به‌روزرسانی» (Update)
• «جداسازی» (UnMounting)

مقداردهی اولیه یا راه‌اندازی اولیه اولین مرحله‌ای است که در آن کامپوننت دارای ویژگی‌ها و حالت پیش‌فرض خود خواهد بود. بعد از آن نوبت حالت Mounting است که در آن کامپوننت در داخل DOM ارائه می‌شود. این مرحله جایی است که متد componentDidMount() فراخوانی شده و با اضافه شدن کامپوننت به DOM راه‌اندازی می‌شود. متد render()‎ نیز در این مرحله موجود است و گره HTML را بازمی‌گرداند.

همچنین مرحله به‌روزرسانی زمانی رخ می‌دهد که DOM با کاربر تعامل داشته باشد یا به وسیله کاربر به‌روز شود. به عنوان مثال، هنگامی که متن در جعبه متنی وارد می‌شود، ویژگی‌های حالت به‌روز می‌شوند. متدهای ‎ shouldComponentUpdate() و ‎ componentDidUpdate() در این مرحله در دسترس هستند. همچنین مرحله Unmounting زمانی اتفاق می‌افتد که کامپوننت دیگر مورد نیاز نباشد یا حذف شود. متد componentWillUnmount() در این مرحله فراخوانی خواهد شد که با حذف یا از بین رفتن کامپوننت فعال می‌شود.

مثالی از بررسی چرخه زندگی کامپوننت در ری اکت

در ادامه این آموزش React JS رایگان مثالی کاربردی ارائه خواهد شد که در آن متدهای فراخوانی شده در هر حالت را نشان می‌دهد.

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

کلیک کنید

فایل complife.jsx این مثال حاوی کدهای زیر است:

1import React from 'react';
2import ReactDOM from 'react-dom';
3class COMP_LIFE extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {name: ''};
7
8    this.UpdateName = this.UpdateName.bind(this);
9    this.testclick = this.testclick.bind(this);
10  }
11
12  UpdateName(event) {
13    this.setState({name: event.target.value});
14  }
15  
16  testclick(event) {
17    alert("The name entered is: "+ this.state.name);
18  }
19  
20  componentDidMount() {  
21    console.log('Mounting State : calling method componentDidMount');
22  }   
23 
24  shouldComponentUpdate() {  
25    console.log('Update  State : calling method shouldComponentUpdate');
26    return true;
27  }  
28
29  componentDidUpdate() {  
30    console.log('Update  State : calling method componentDidUpdate')  
31  }  
32  componentWillUnmount() {  
33    console.log('UnMounting State : calling method componentWillUnmount');
34  }  
35
36  render() {
37    return (
38      <div>        
39         نام خود را وارد کنید:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
40        <h2>{this.state.name}</h2>
41        <input type="button" value="اینجا کلیک کنید" onClick={this.testclick} />
42      </div>
43    );
44  }
45}
46
47export default COMP_LIFE;

فایل Index.js نیز حاوی کدهای زیر است:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import COMP_LIFE from './complife.jsx';
4
5ReactDOM.render(
6    <COMP_LIFE />,
7    document.getElementById('root')
8); 

خروجی برنامه بالا به صورت تصویر زیر است:

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

Mounting State : calling method componentDidMount complife.jsx:30

حال اگر نامی در جعبه متنی وارد شود خروجی به صورت زیر خواهد بود:

این بار در کنسول مرورگر چیزی شبیه به خروجی زیر قابل مشاهده خواهد بود:

Mounting State : calling method componentDidMount   complife.jsx:30
Update State: calling method shouldComponentUpdate  complife.jsx:34
Update State: calling method componentDidUpdate     complife.jsx:39
Update State: calling method shouldComponentUpdate  complife.jsx:34
Update State: calling method componentDidUpdate     complife.jsx:39
Update State: calling method shouldComponentUpdate  complife.jsx:34
Update State: calling method componentDidUpdate     complife.jsx:39
Update State: calling method shouldComponentUpdate  complife.jsx:34
Update State: calling method componentDidUpdate     complife.jsx:39
Update State: calling method shouldComponentUpdate  complife.jsx:34
Update State: calling method componentDidUpdate     complife.jsx:39
Update State: calling method shouldComponentUpdate  complife.jsx:34
Update State: calling method componentDidUpdate     complife.jsx:39
Update State: calling method shouldComponentUpdate  complife.jsx:34
Update State: calling method componentDidUpdate     complife.jsx:39

آموزش کار با فرم ها در React JS

در این بخش از آموزش رایگان ری اکت، آموزش کار با ری اکت آموزش داده خواهد شد. در React JS، عناصر ورودی HTML مانند input  ، textarea  ، و select  حالت جداگانه خود را دارند که باید هنگام تعامل کاربر با آن‌ها به‌روز شوند. این کار می‌تواند با استفاده از متد setState()‎ انجام شود که در ادامه مثالی برای آن ارائه خواهد شد.

فیلم آموزش معرفی و آشنایی با کتابخانه ReactJS (رایگان) در فرادرس

کلیک کنید

فایل form.jsx مثال کار با فرم‌ها در ری اکت حاوی کدهای زیر است:

1import React from 'react';
2import ReactDOM from 'react-dom';
3class Form extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {name: ''};
7
8    this.UpdateName = this.UpdateName.bind(this);
9    this.formSubmit = this.formSubmit.bind(this);
10  }
11
12  UpdateName(event) {
13    this.setState({name: event.target.value});
14  }
15  
16  formSubmit(event) {
17    alert("The name entered is: "+ this.state.name);
18  }
19
20  render() {
21    return (
22      <form>        
23         نام خود را وارد کنید:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
24        <h2>{this.state.name}</h2>
25        <input type="submit" value="ارسال" onClick={this.formSubmit} />
26      </form>
27    );
28  }
29}
30
31export default Form;

برای فیلدهای ورودی، React متدی خاص به نام setState ارائه می‌کند که به حفظ حالت هر زمان که تغییری وجود دارد کمک خواهد کرد. در این مثال از رویدادهای onChange  و onClick  در جعبه متن و دکمه ارسال استفاده شده است. هنگامی که چیزی در جعبه متنی وارد می‌شود، رویداد onChange فراخوانی شده و فیلد نام در داخل شی حالت بر اساس آن به‌روز می‌شود.

1UpdateName(event) {
2    this.setState({name: event.target.value});
3  }

فایل Index.js حاوی قطعه کد زیر خواهد بود:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Form from './form.jsx';
4
5ReactDOM.render(
6    <Form />,
7    document.getElementById('root')
8); 

خروجی در مرورگر به صورت زیر خواهد بود:

حال با پرکردن فرم و ارسال آن خروجی چیزی شبیه به تصویر زیر خواهد بود:

آموزش کار با رویدادها در React JS

React JS به کاربران این امکان را می‌دهد تا با رویدادها مشابه آنچه در جاوا اسکریپت ساده برخورد می‌کنند با آن‌ها برخورد داشته باشند. کاربران می‌توانند از همه رویدادهای جاوا اسکریپت در ری اکت استفاده کنند. هنگامی که کاربر با هر عنصر HTML تعامل برقرار می‌کند، متد setState()‎ برای به‌روزرسانی وضعیت مطابق با آن استفاده می‌شود. در این بخش از آموزش React JS رایگان مثالی از کار بارویدادها در React JS بررسی خواهد شد.

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

کلیک کنید

در اینجا فایلی داریم به نام events.jsx  که حاوی کدهای زیر است:

1import React from 'react';
2import ReactDOM from 'react-dom';
3class EventTest extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {name: ''};
7
8    this.UpdateName = this.UpdateName.bind(this);
9    this.testclick = this.testclick.bind(this);
10  }
11
12  UpdateName(event) {
13    this.setState({name: event.target.value});
14  }
15  
16  testclick(event) {
17    alert("The name entered is: "+ this.state.name);
18  }
19
20  render() {
21    return (
22      <div>        
23         نام خود را وارد کنید:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
24        <h2>{this.state.name}</h2>
25        <input type="button" value="اینجا کلیک کنید" onClick={this.testclick} />
26      </div>
27    );
28  }
29}
30
31export default EventTest;

وقتی کاربر متنی را در فیلد ورودی وارد می‌کند، رویداد onChange  فعال می‌شود که به نوبه خود فیلد نام را در شی حالت به‌روزرسانی می‌کند. متد setState()‎ برای اطمینان از حفظ وضعیت کامپوننت استفاده می‌شود. کد این کار در زیر نشان داده شده است:

1UpdateName(event) {
2    this.setState({name: event.target.value});
3  }

حال فایل Index.js  نیز حاوی کد زیر خواهد بود:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import EventTest from './events.jsx';
4
5ReactDOM.render(
6    <EventTest />,
7    document.getElementById('root')
8); 

خروجی نهایی به صورت تصویر زیر است:

حال اگر کاربر نامی را در کارد وارد کند و دکمه اینجا کلیک کنید را بزند، خروجی به صورت تصویر خواهد بود:

سخن پایانی

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