آموزش نصب و راه اندازی React Js

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

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

معرفی کوتاه React.js و مزایای آن

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

مزایای React.js

مهم‌ترین مزایای راه اندازی React Js شامل موارد زیر می‌شوند:

کامپوننت‌محور

React ساختار برنامه را به کامپوننت‌های مستقل و قابل استفاده مجدد تقسیم می‌کند که این امر باعث افزایش نظم و خوانایی کد می‌شود.

استفاده از Virtual DOM 

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

یک‌طرفه بودن جریان داده (One-Way Data Binding)

در React، داده‌ها از والد به فرزند منتقل می‌شوند، که باعث پیش‌بینی‌پذیری و کنترل بهتر داده‌ها در پروژه می‌شود.

پشتیبانی از JSX

 JSX یک سینتکس مشابه HTML است که در React برای نوشتن ساختار UI داخل JavaScript استفاده می‌شود. این ویژگی خوانایی و توسعه‌پذیری کد را بهبود می‌بخشد.

اکوسیستم گسترده و جامعه کاربری قوی

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

سازگاری با فریمورک‌های مختلف

React را می‌توان در کنار ابزارهایی مانند Next.js برای رندر سمت سرور (SSR) یا React Native برای توسعه اپلیکیشن‌های موبایل استفاده کرد.

آموزش نصب و راه اندازی React Js از صفر تا صد

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

بررسی پیش‌نیازهای لازم

قبل از راه اندازی ری اکت، باید مطمئن شوید که Node.js و npm (یا Yarn) روی سیستم شما نصب شده باشد. Node.js محیطی برای اجرای JavaScript در خارج از مرورگر است و همراه با آن، npm که مدیریت پکیج‌ها را بر عهده دارد، نصب می‌شود. همچنین پیشنهاد می‌شود از یک ویرایشگر کد مانند VS Code برای نوشتن و مدیریت کدها استفاده کنید.

نصب Node.js و بررسی نسخه آن

برای نصب Node.js، به وب‌سایت رسمی Node.js مراجعه کرده و نسخه LTS: Long Term Support را دانلود و نصب کنید. پس از نصب، برای اطمینان از موفقیت‌آمیز بودن آن، ترمینال یا CMD را باز کرده و دستور زیر را اجرا کنید:

اگر خروجی نسخه‌ای از Node.js را نشان داد (مثلاً v18.16.0)، نصب با موفقیت انجام شده است. همچنین برای بررسی نسخه npm، از دستور زیر استفاده کنید:

راه اندازی React Js با استفاده از Create React App) CRA)

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

اگر دستور npx را برای اولین بار اجرا می‌کنید، ممکن است چند دقیقه طول بکشد تا دانلود و اجرا شود. پس از اتمام نصب، وارد پوشه پروژه شوید:

سپس برای اجرای پروژه، دستور زیر را اجرا کنید:

با این کار، سرور اجرا شده و اپلیکیشن شما در مرورگر روی آدرس http://localhost:3000 نمایش داده می‌شود.

 راه اندازی React Js با استفاده از Vite (روش سریع‌تر و سبک‌تر)

اگر به دنبال روشی سریع‌تر و کم‌حجم‌تر برای راه اندازی پروژه ری اکت هستید، Vite گزینه بهتری است. برای این کار، ابتدا دستور زیر را اجرا کنید:

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

برای اجرای پروژه، دستور زیر را اجرا کنید:

با این روش، سرور توسعه React با سرعت بیشتری راه‌اندازی شده و در آدرس http://localhost:5173 قابل مشاهده است.

بررسی ساختار پروژه React

پس از راه اندازی پروژه ری اکت ساختار آن شامل فایل‌ها و پوشه‌های زیر خواهد بود:

• src/ → شامل کدهای اصلی اپلیکیشن React
  
• public/ → شامل فایل‌های استاتیک مانند index.html
  
• package.json → شامل اطلاعات و وابستگی‌های پروژه
  
• node_modules/ → شامل پکیج‌های نصب‌شده از npm
  

برای شروع، می‌توانید فایل src/App.js را ویرایش کرده و کد زیر را جایگزین کنید:

نصب ابزارهای کمکی و پکیج‌های ضروری

پس از نصب و راه اندازی React Js، ممکن است بخواهید ابزارهای کمکی را برای بهبود کدنویسی خود اضافه کنید. برخی از پکیج‌های پرکاربرد عبارتند از:

• React Router برای مدیریت مسیرها در اپلیکیشن:

Axios برای درخواست‌های HTTP:

Styled Components برای استایل‌دهی پیشرفته:

نصب افزونه React DevTools برای مرورگر

برای اشکال‌زدایی و تحلیل بهتر کامپوننت‌های React، افزونه React Developer Tools را روی مرورگر کروم یا فایرفاکس نصب کنید. این ابزار کمک می‌کند که وضعیت (state) و props کامپوننت‌ها را مشاهده و بررسی کنید.

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

پس از نصب و راه اندازی ری اکت شما یک پروژه React فعال دارید. از این مرحله به بعد، می‌توانید شروع به اضافه کردن کامپوننت‌های جدید، مدیریت وضعیت (state)، کار با API و بهینه‌سازی کدها کنید.

سخن آخر

در این مقاله، به‌صورت گام‌به‌گام نحوه نصب و راه اندازی React Js را بررسی کردیم. ابتدا پیش‌نیازهای لازم مانند Node.js و npm را معرفی کردیم، سپس دو روش Create React App (CRA) و Vite برای ایجاد پروژه را توضیح دادیم. همچنین، به بررسی ساختار پروژه React، نصب پکیج‌های ضروری و ابزارهای کمکی مانند React DevTools پرداختیم.

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

سوالات متداول

در ادامه به چند پرسش پرتکرار درباره  راه اندازی React Js پاسخ می‌دهیم:

 آیا برای کار با React باید جاوا اسکریپت بلد باشم؟

بله، آشنایی با مفاهیم پایه JavaScript مانند متغیرها، توابع، آرایه‌ها و شی‌گرایی ضروری است. 

تفاوت بین Create ،React App ،CRA و Vite چیست؟

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

 آیا می‌توان React را بدون Node.js نصب کرد؟

خیر، برای استفاده از ابزارهای مدیریت بسته مانند npm یا yarn و اجرای سرور محلی React، نیاز به Node.js دارید.

چرا پس از نصب، هنگام اجرای npm start خطا دریافت می‌کنم؟

ممکن است یکی از مشکلات زیر باشد:

• نسخه Node.js یا npm شما قدیمی است → با node -v و npm -v بررسی کنید.
  
• پکیج‌ها ناقص نصب شده‌اند → دستور npm install را اجرا کنید.
  
• پورت 3000 قبلاً در حال استفاده است → می‌توانید از دستور npx kill-port 3000 استفاده کنید.

آیا می‌توان از React برای ساخت اپلیکیشن موبایل استفاده کرد؟

بله، با استفاده از React Native می‌توانید اپلیکیشن‌های موبایل برای Android و iOS توسعه دهید.