افزودن React به پروژه موجود

mohsen•1 ماه قبل•1 ماه قبل
ارسال شده در
react/docs/v19

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

شما نیاز به نصب اگرچه می‌توانید React را آنلاین یا حتی با یک صفحه HTML ساده هم امتحان کنید، اما در واقع اکثر ابزارهای JavaScript برای توسعه نیازمند Node.js هستند.

استفاده از React برای یک زیرمسیر کامل از وب‌سایت موجود شما

فرض کنید یک اپ وب در آدرس example.com دارید که با فناوری دیگری (مانند Rails) ساخته شده است و می‌خواهید تمام مسیرهایی که با example.com/some-app/ شروع می‌شوند را کاملاً با React پیاده‌سازی کنید.

برای این کار نحوه ستاپ زیر را به شما توصیه می‌کنیم:

  • بخش React اپ خود را با استفاده از یکی از فریم‌ورک‌های مبتنی بر React بسازید.
  • مسیر در تنظیمات فریم‌ورک مورد استفاده خود مشخص کنید (نحوه انجام این کار: برای Next.js، برای Gatsby).
  • سرور یا پروکسی خود را کانفیگ کنید تا تمام درخواست‌های تحت /some-app/ توسط اپ React شما پردازش شوند.

با طی کردین این مراحل می توانید مطمئن باشید که اپ React شما از بست پرکتیسهای موجود این فریم‌ورک‌ها بهره‌مند میشود.

بسیاری از فریم‌ورک‌های مبتنی بر React به صورت full-stack هستند و اپ شما قادر به بهرمندی از قابلیت های سرور می کنند. با این حال، می‌توانید از تمامی قابلیت های ری اکت حتی بدون اجرای JavaScript روی سرور نیز بهره مند شوید. در این صورت، خروجی HTML/CSS/JS را (اجرای دستورnext export برای Next.js، خروجی پیش‌فرض برای Gatsby) برای درخواست ها به مسیر /some-app/ سرو کنید.

استفاده از React برای بخشی از صفحه موجود

فرض کنید صفحه ای را قبلن با فناوری دیگری (خواه با فناوری سمت سروری مانند Rails یا سمت کلاینتی مانند Backbone) توسعه داده اید و می‌خواهید کامپوننت‌های تعاملی React را در جایی از این صفحه رندر کنید. این یک روش معمول برای ادغام React با اپ موجود است --در واقع، برای سال ها React به همین شیوه در Meta مورد استفاده قرار میگرفت!

شما می‌توانید این کار را در دو مرحله انجام دهید:

  • یک محیط JavaScript راه‌اندازی کنید تا بتوانید از سینتکس JSX استفاده کنید، کد را با سینتکس import / export به ماژول‌های مختلف تقسیم کرده و از پکیج‌های (به عنوان مثال، React) npm در پروژه خود استفاده کنید.
  • کامپوننت‌های React خود را در جایی که می‌خواهید در صفحه آنها را نمایش دهید، رندر کنید.

این مراحل کلی است و رویکرد دقیقتر به ستاپ صفحه بستگی دارد، بنابراین در ادامه به برخی جزئیات آن می پردازیم.

مرحله 1: راه‌اندازی محیط JavaScript ماژولار

محیط JavaScript ماژولار به شما این امکان را می‌دهد تا کامپوننت‌های React را در فایل‌های جداگانه، به جای قرار دادن همه کدر در یک فایل واحد، توسعه دهید. همچنین را قادر به استفاده از تمام پکیج‌های شگفت‌انگیزی که توسط دیگر توسعه‌دهندگان در npm منتشر شده‌اند --از جمله خود React!-- می کند. نحوه انجام این کار به تنظیمات موجود پروژه شما بستگی دارد:

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

      npm install react react-dom

سپس کدهای زیر را در بالای فایل اصلی JavaScript خود اضافه کنید (این فایل ممکن است index.js یا main.js نامگذاری شده باشد):

      import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);
    
      <!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- Your existing page content (in this example, it gets replaced) -->
    <div id="root"></div>
  </body>
</html>

اگر عبارت"Hello, world!" در صفحه نمایش داده شد، همه چیز درست است! و به مطالعه ادامه دهید.

ادغام یک محیط JavaScript ماژولار به یک پروژه موجود برای اولین بار می‌تواند کار سختی به نظر برسد، اما ارزش انجامش را دارد! اگر به مشکل برخوردید، سعی کنید از جامعه React یا چت Vite کمک بگیرید.

مرحله 2: رندر کامپوننت‌های React در هر کجای صفحه

در مرحله قبلی، این کد را به ابتدای فایل اصلی خود اضافه کردید:

      import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

البته، قطعا نمی‌خواهید محتوای موجود صفحه کلن حذف شود!

پس این کد را باید حذف کنید.

در عوض، باید کامپوننت‌های React خود را در مکان‌های خاصی در بین تگ های HTML رندر کنید. صفحه HTML خود را (یا فایل سروری که آن را تولید می‌کنند) باز کرده و تگهایی با شناسه های یکتا id برای کامپوننت های خود ایجاد کنید، به عنوان مثال:

      <!-- ... جایی در صفحه ... -->
<nav id="navigation"></nav>
<!-- ... بقیه کدها ... -->

این کار پیدا کردن المان با متد document.getElementById را ممکن می کند و بعد از پیدا کردن می توانید آن را به تابع createRoot پاس دهید تا کامپوننت React در صفحه نمایش داده شود:

      <!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <p>This paragraph is a part of HTML.</p>
    <nav id="navigation"></nav>
    <p>This paragraph is also a part of HTML.</p>
  </body>
</html>
    
      import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

توجه کنید که محتوای HTML اصلی صفحه index.html حفظ شده است، اما کامپوننت NavigationBar اکنون درون <nav id="navigation"> از HTML شما ظاهر می‌شود. برای اطلاع بیشتر از نحوه استفاده از مستندات را مطالعه کنید.

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

استفاده از React Native برای یک اپ موبایل نیتیو موجود

فریم ورک React Native همچنین می‌تواند به طور تدریجی به اپ‌های بومی موجود اضافه شود. اگر شما یک اپ نیتیو موجود برای اندروید (Java یا Kotlin) یا iOS (Objective-C یا Swift) دارید، این راهنما را مطالعه کنید تا بتوانید یک صفحه React Native به اپ خود اضافه کنید.

رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!