إضافة React إلى مشروع موجود بالفعل

إذا كنت تريد إضافة بعض التفاعلية إلى مشروعك الموجود بالفعل ، فليس عليك إعادة كتابته في React. أضف React إلى مجموعة الأدوات الموجودة لديك ، وقم بتقديم مكونات React التفاعلية في أي مكان.

Note

تحتاج إلى تثبيت Node.js إلى بيئة التطوير المحلية الخاصة بك. على الرغم من أنه يمكنك تجربة React عبر الإنترنت أو باستخدام صفحة HTML بسيطة ، إلا أن معظم أدوات JavaScript التي تريد استخدامها للتطوير تتطلب Node.js.

استخدام React لمسار فرعي كامل من موقع الويب الحالي الخاص بك

لنفترض أن لديك تطبيق ويب موجود على example.com مبني بتقنية خادم أخرى (مثل Rails) ، وتريد تنفيذ جميع المسارات التي تبدأ بـ example.com/some-app/ بالكامل مع React.

هنا ما نوصي به لإعداده:

بناء الجزء الخاص بـ React في تطبيقك باستخدام إحدى الإطارات القائمة على React.
حدد /some-app كـ مسار أساسي في إعدادات إطار العمل الخاص بك (هنا كيف مع: Next.js, Gatsby).
قم بتكوين خادمك أو بروكسي بحيث يتم التعامل مع جميع الطلبات تحت /some-app/ من قبل تطبيق React الخاص بك.

يضمن هذا أن الجزء الخاص بـ React من تطبيقك يمكن أن يستفيد من أفضل الممارسات المدمجة في تلك الإطارات.

العديد من الإطارات القائمة على React هي إطارات full-stack وتتيح لتطبيق React الخاص بك الاستفادة من الخادم. ومع ذلك ، يمكنك استخدام نفس النهج حتى إذا لم تتمكن أو لا تريد تشغيل JavaScript على الخادم. في هذه الحالة ، قم بتصدير HTML/CSS/JS (next export output لـ Next.js ، هذا هو الافتراضي لـ Gatsby) في /some-app/ بدلاً من ذلك.

استخدام React لجزء من صفحتك الحالية

لنفترض أن لديك صفحة موجودة على example.com مبنية بتقنية أخرى (إما خادم مثل Rails أو عميل مثل Backbone) ، وتريد تقديم مكونات React التفاعلية في أي مكان على تلك الصفحة. هذه هي الطريقة الشائعة لدمج React - في الواقع ، هذا هو شكل معظم استخدام React في Meta لسنوات عديدة!

يمكنك القيام بذلك في خطوتين:

إعداد بيئة JavaScript والتي تمكنك من استخدام بنية JSX، وتقسيم الكود إلى وحدات مع الكلمات المفتاحية import / export ، واستخدام الحزم (على سبيل المثال ، React) من مدير الحزم npm.
قم بتصيير مكونات React حيث تريد رؤيتها على الصفحة.

نفس النهج يعتمد على إعداد صفحتك الحالية ، لذلك دعنا نتناول بعض التفاصيل.

الخطوة 1: إعداد بيئة JavaScript معمارية (modular)

بيئة JavaScript المعمارية تسمح لك بكتابة مكونات React في ملفات منفصلة، بدلاً من كتابة كل الكود في ملف واحد. كما تتيح لك استخدام جميع الحزم الرائعة التي نشرها مطورون آخرون على مدير الحزم npm - بما في ذلك React نفسه! كيفية القيام بذلك تعتمد على إعدادك الحالي:

إذا كان تطبيقك مقسم بالفعل إلى ملفات تستخدم عبارات import، فحاول استخدام الإعداد الذي لديك بالفعل. تحقق مما إذا كان كتابة <div /> في كود JS الخاص بك يسبب خطأ في البناء. إذا تسبب في خطأ في البناء، فقد تحتاج إلى تحويل كود JavaScript الخاص بك باستخدام Babel، وتمكين Babel React preset لاستخدام JSX.
إذا لم يكن لتطبيقك إعداد حالي لتجميع وحدات JavaScript، فقم بإعداده مع Vite. تحتفظ مجتمع Vite بـ العديد من التكاملات مع إطارات العمل الخلفية ، بما في ذلك Rails و Django و Laravel. إذا لم يتم سرد إطار عمل الخلفية الخاص بك، اتبع هذه الإرشادات لدمج بناء Vite يدويًا مع إطار عملك.

للتحقق مما إذا كان إعدادك يعمل، قم بتشغيل هذا الأمر في مجلد مشروعك:

Terminal

npm install react react-dom

Then add these lines of code at the top of your main JavaScript file (it might be called index.js or main.js):

Fork

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>);

If the entire content of your page was replaced by a “Hello, world!”, everything worked! Keep reading.

Note

Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it’s worth it! If you get stuck, try our community resources or the Vite Chat.

Step 2: Render React components anywhere on the page

In the previous step, you put this code at the top of your main file:

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>);

Of course, you don’t actually want to clear the existing HTML content!

Delete this code.

Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique id attribute to any tag, for example:

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

This lets you find that HTML element with document.getElementById and pass it to createRoot so that you can render your own React component inside:

Fork

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 />);

Notice how the original HTML content from index.html is preserved, but your own NavigationBar React component now appears inside the <nav id="navigation"> from your HTML. Read the createRoot usage documentation to learn more about rendering React components inside an existing HTML page.

When you adopt React in an existing project, it’s common to start with small interactive components (like buttons), and then gradually keep “moving upwards” until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to a React framework right after to get the most out of React.

Using React Native in an existing native mobile app

React Native can also be integrated into existing native apps incrementally. If you have an existing native app for Android (Java or Kotlin) or iOS (Objective-C or Swift), follow this guide to add a React Native screen to it.

PreviousStart a New React Project NextEditor Setup