logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

On this page

  • Overview
  • استخدام React لمسار فرعي كامل من موقع الويب الحالي الخاص بك
  • استخدام React لجزء من صفحتك الحالية
  • الخطوة 1: إعداد بيئة JavaScript معمارية (modular)
  • الخطوة 2: عرض مكونات React في أي مكان على الصفحة
  • استخدام React Native في تطبيق محمول أصلي موجود

    GET STARTED

  • Quick Start
    • Tutorial: Tic-Tac-Toe
    • Thinking in React
  • Installation
    • Creating a React App
    • Build a React App from Scratch
    • Add React to an Existing Project
  • Setup
    • Editor Setup
    • Using TypeScript
    • React Developer Tools
  • React Compiler
    • Introduction
    • Installation
    • Incremental Adoption
    • Debugging and Troubleshooting

  • LEARN REACT

  • Describing the UI
    • Your First Component
    • Importing and Exporting Components
    • Writing Markup with JSX
    • JavaScript in JSX with Curly Braces
    • Passing Props to a Component
    • Conditional Rendering
    • Rendering Lists
    • Keeping Components Pure
    • Your UI as a Tree
  • Adding Interactivity
    • Responding to Events
    • State: A Component's Memory
    • Render and Commit
    • State as a Snapshot
    • Queueing a Series of State Updates
    • Updating Objects in State
    • Updating Arrays in State
  • Managing State
    • Reacting to Input with State
    • Choosing the State Structure
    • Sharing State Between Components
    • Preserving and Resetting State
    • Extracting State Logic into a Reducer
    • Passing Data Deeply with Context
    • Scaling Up with Reducer and Context
  • Escape Hatches
    • Referencing Values with Refs
    • Manipulating the DOM with Refs
    • Synchronizing with Effects
    • You Might Not Need an Effect
    • Lifecycle of Reactive Effects
    • Separating Events from Effects
    • Removing Effect Dependencies
    • Reusing Logic with Custom Hooks
Learn React
Installation

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

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

Note

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

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

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

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

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

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

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

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

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

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

  1. إعداد بيئة JavaScript والتي تمكنك من استخدام بنية JSX، وتقسيم الكود إلى وحدات باستخدام العبارات الأساسية import / export، واستخدام الحزم (على سبيل المثال ، React) من مدير الحزم npm.
  2. قم بتصيير مكونات 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

ثم أضف هذه الأسطر من الكود في أعلى ملف JavaScript الرئيسي الخاص بك (قد يسمى index.js أو main.js):

import { createRoot } from 'react-dom/client'; // إزالة محتوى HTML الحالي document.body.innerHTML = '<div id="app"></div>'; // عرض مكون React بدلاً من ذلك const root = createRoot(document.getElementById('app')); root.render(<h1>مرحبًا بكم!</h1>);

إذا تم استبدال محتوى صفحتك بالكامل بـ “مرحبًا بكم!”، فقد نجحت العملية! استمر في القراءة.

Note

دمج بيئة JavaScript معمارية في مشروع موجود قد يبدو مرعبًا أول الأمر، ولكنه يستحق ذلك! إذا تعثرت ، جرب السؤال في المجتمع أو الدردشة في Vite.

الخطوة 2: عرض مكونات React في أي مكان على الصفحة

في الخطوة السابقة، وضعت هذا الكود في أعلى ملفك الرئيسي:

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

// إزالة محتوى HTML الحالي
document.body.innerHTML = '<div id="app"></div>';

// عرض مكون React بدلاً من ذلك
const root = createRoot(document.getElementById('app'));
root.render(<h1>مرحبًا بكم!</h1>);

بالتأكيد لا تريد حذف محتوى HTML الحالي!

احذف هذا الكود.

بدلًا عن ذلك، ربما تريد عرض مكونات React الخاصة بك في أماكن محددة في HTML الخاص بك. افتح صفحة HTML الخاصة بك (أو قوالب الخادم التي تنشئها) وأضف معرفًا فريدًا id إلى أي علامة، على سبيل المثال:

<!-- ... في مكان ما في ملف html ... -->
<nav id="navigation"></nav>
<!-- ... المزيد من html ... -->

هذا يتيح لك العثور على عنصر HTML باستخدام document.getElementById وتمريره إلى createRoot حتى تتمكن من عرض مكون React الخاص بك داخله:

import { createRoot } from 'react-dom/client'; function NavigationBar() { // مَهمّة: هذا المكون يعرض مكون شريط التنقل return <h1>مرحبًا من React</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);

لاحظ كيف احتفظت بمحتوى HTML الحالي من index.html، ولكن مكون React الخاص بك NavigationBar الآن يظهر داخل <nav id="navigation"> من HTML الخاص بك. اقرأ وثائق استخدام createRoot لمعرفة المزيد حول تصيير مكونات React داخل صفحة HTML موجودة.

عندما تضيف React في مشروع موجود، من الشائع أن تبدأ بمكونات تفاعلية صغيرة (مثل الأزرار)، ثم تستمر تدريجيًا في “النمو” حتى تصبح صفحتك بأكملها مبنية بـ React. إذا وصلت إلى هذه النقطة، فإننا نوصي بالانتقال إلى إطار عمل لـ React مباشرة بعد ذلك للاستفادة القصوى من React.

استخدام React Native في تطبيق محمول أصلي موجود

يمكن أيضًا دمج React Native في التطبيقات الأصلية الموجودة تدريجيًا. إذا كان لديك تطبيق أصلي موجود لنظام أندرويد (Java أو Kotlin) أو iOS (Objective-C أو Swift) ، اتبع هذا الدليل لإضافة شاشة React Native إليه.

PreviousBuild a React App from Scratch
NextSetup
Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
Learn React
Quick Start
Installation
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
API Reference
React APIs
React DOM APIs
Community
Code of Conduct
Meet the Team
Docs Contributors
Acknowledgements
More
Blog
React Native
Privacy
Terms
import { createRoot } from 'react-dom/client';

// إزالة محتوى HTML الحالي
document.body.innerHTML = '<div id="app"></div>';

// عرض مكون React بدلاً من ذلك
const root = createRoot(document.getElementById('app'));
root.render(<h1>مرحبًا بكم!</h1>);
<!-- ... في مكان ما في ملف html ... -->
<nav id="navigation"></nav>
<!-- ... المزيد من html ... -->