آشنایی با React و مقدمات اولیه

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

معرفی React و تاریخچه آن

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

تفاوت SPA و MPA

قبل از شروع کار با React، باید تفاوت بین SPA (Single Page Application) و MPA (Multi Page Application) را بدانید:

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

React با رویکرد SPA، تجربه کاربری بسیار روان‌تری فراهم می‌کند.

نصب ابزارهای مورد نیاز

برای شروع کار با React به ابزارهای زیر نیاز دارید:

Node.js: محیط اجرای جاوااسکریپت سمت سرور
npm یا yarn: ابزار مدیریت پکیج‌ها
Visual Studio Code: ویرایشگر کد قدرتمند با افزونه‌های مفید برای React

می‌توانید Node.js را از nodejs.org دانلود و نصب کنید. پس از نصب، با اجرای node -v و npm -v در ترمینال از نصب موفق مطمئن شوید.

ساخت اولین پروژه با Vite یا Create React App

برای ساخت پروژه React، دو روش پرکاربرد وجود دارد:

روش ۱: Vite (پیشنهادی)

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

روش ۲: Create React App (سنتی)

npx create-react-app my-app
cd my-app
npm start

Vite سرعت بالاتری دارد و تجربه توسعه بهتری فراهم می‌کند، ولی هر دو روش معتبر هستند.

معرفی JSX و تفاوت آن با HTML

React از سینتکسی به نام JSX (JavaScript XML) استفاده می‌کند. JSX ترکیبی از جاوااسکریپت و HTML است که به شما اجازه می‌دهد کد UI را به‌صورت خوانا بنویسید:

const element = 
Hello, React!تفاوت‌های کلیدی JSX با HTML:

در JSX به‌جای class از className استفاده می‌شود.

همه تگ‌ها باید بسته شوند.

درون JSX می‌توان از کد جاوااسکریپت با {} استفاده کرد.

مفهوم Virtual DOM

یکی از مهم‌ترین مفاهیم React، Virtual DOM است.

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

جمع‌بندی

در این فصل یاد گرفتیم که React چیست، چه ابزارهایی برای شروع لازم داریم و چطور اولین پروژه خود را راه‌اندازی کنیم. همچنین مفاهیم JSX و Virtual DOM را به‌عنوان پایه‌های فکری React شناختیم. در فصل بعد، وارد مفاهیم اصلی‌تر مانند کامپوننت‌ها، Props و State خواهیم شد.