Togglإغلاق القائمة

⚡ ملخص ذكي

تُشغّل مكتبة ReactJS واجهات المستخدم لعدد لا يُحصى من مواقع الويب الحديثة وتطبيقات الجوال. تشرح هذه الصفحة ماهية المكتبة، وكيفية إعدادها، وكيفية عمل المكونات، وJSX، والحالة، والخصائص، والأحداث معًا.

⚛️ Foundation: ReactJS هو برنامج مفتوح المصدر يعتمد على المكونات Javaمكتبة برمجية تم إنشاؤها في فيسبوك (الآن ميتا) لبناء واجهات مستخدم سريعة وتفاعلية.
🧩 المكونات: وحدات البناء القابلة لإعادة الاستخدام، المكتوبة كدوال أو فئات، تقسم منطق واجهة المستخدم إلى أجزاء مستقلة وقابلة للصيانة.
📝 جسك: A Javaتتيح لك إضافة بناء الجملة البرمجية كتابة علامات وتعبيرات تشبه لغة HTML داخل نفس الملف.
🔄 الولاية والمقترحات: تقوم الحالة بتخزين البيانات الخاصة والمتغيرة داخل المكون، بينما تقوم الخصائص بتمرير البيانات للقراءة فقط إليه.
⚙️ مسارات الإعداد: تُناسب علامات البرمجة النصية لشبكة توصيل المحتوى (CDN) التجارب السريعة؛ بينما تُناسب حزم npm أو Vite المشاريع الحقيقية.
🚀 الممارسة الحديثة: أصبحت مكونات الوظائف المزودة بخطافات وواجهة برمجة تطبيقات React 18+ createRoot هي المعيار الموصى به الآن.
💼 التأثير الوظيفي: لا تزال مهارات React من بين المهارات الأكثر طلباً في قوائم وظائف مطوري الواجهة الأمامية في جميع أنحاء العالم.

اقرأ المزيد

ما هو ReactJS؟

ReactJS هي واجهة أمامية مفتوحة المصدر Javaمكتبة النصوص البرمجية لبناء واجهات المستخدم. ReactJS يتم صيانته بواسطة شركة مينوا (فيسبوك سابقًا) ومجموعة من المطورين الأفراد والشركات. ويُستخدم على نطاق واسع كأساس لبناء تطبيقات الصفحة الواحدة وتطبيقات الجوال. يتميز بسهولة استخدامه، ويتيح للمستخدمين إنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام.

قبل أن تكتب سطرك الأول من كود React، من المفيد أن تعرف ما الذي يميز هذه المكتبة عن غيرها. Javaالنص البرمجي. يتناول القسم التالي ميزاته الأساسية.

مميزات ReactJS

جسك: JSX هو امتداد لـ Javaالبرمجة النصية. على الرغم من أن استخدام JSX ليس إلزاميًا في React، إلا أنه يُعدّ من الميزات الجيدة وسهلة الاستخدام.

مكوناتالمكونات تشبه المكونات النقية Javaتُسهّل وظائف البرمجة النصية كتابة الكود من خلال تقسيم المنطق إلى أجزاء مستقلة قابلة لإعادة الاستخدام. يمكننا استخدام المكونات كدوال أو كفئات. كما تحتوي المكونات على حالة وخصائص، مما يُسهّل العمل. داخل مكون الفئة، تُحفظ الحالة والخصائص.

DOM الظاهري: يقوم React بإنشاء DOM افتراضي، أي ذاكرة تخزين مؤقتة لبنية البيانات. يتم تحديث التغييرات النهائية فقط في DOM الخاص بالمتصفح، مما يضمن سرعة العرض.

Javaتعابير البرمجة النصية: يمكن استخدام تعبيرات JS في ملفات JSX باستخدام الأقواس المعقوفة، على سبيل المثال {}.

مزايا ReactJS

فيما يلي أهم مزايا وفوائد استخدام ReactJS:

يستخدم ReactJS نموذج DOM افتراضيًا يعتمد على ذاكرة تخزين مؤقتة لبنية البيانات، ولا يتم تحديث نموذج DOM الخاص بالمتصفح إلا بالتغييرات النهائية. وهذا يجعل التطبيق أسرع.
يمكنك إنشاء مكونات من اختيارك باستخدام ميزة مكونات React. يمكن إعادة استخدام هذه المكونات، كما أنها مفيدة في صيانة الكود.
ReactJS هو برنامج مفتوح المصدر Javaمكتبة برمجية، لذا من السهل البدء بها.
اكتسبت ReactJS شعبية كبيرة في فترة وجيزة، وهي تدعم منتجات مثل فيسبوك و Instagramتستخدمه العديد من الشركات الشهيرة مثل شركة آبل، Netflix، الخ.
تتولى ماتا صيانة مكتبة ReactJS، لذا فهي تتم صيانتها وتحديثها باستمرار.
يمكن استخدام ReactJS لتطوير واجهة مستخدم غ��ية لتطبيقات سطح المكتب والجوال.
من السهل تصحيح الأخطاء والاختبار حيث تتم معظم الترميز Javaسيناريو بدلاً من استخدام لغة HTML.

عيوب ReactJS

فيما يلي سلبيات/عيوب استخدام ReactJS:

معظم الكود مكتوب بلغة JSX، أي أن HTML وCSS جزء من... Javaقد يكون الأمر مربكًا بعض الشيء، حيث تفضل معظم الأطر الأخرى الاحتفاظ بـping HTML منفصل عن Javaكود البرنامج النصي.
حجم ملف ReactJS كبير نسبياً.

بعد معرفة المفاضلات، أنت الآن جاهز لإعداد React. أسرع طريقة لتجربته هي مباشرةً من شبكة توصيل المحتوى (CDN)، والتي سنتناولها أولاً؛ ثم سنشرح إعدادات npm للمشاريع الحقيقية.

باستخدام ReactJS من CDN

للبدء في استخدام React، نحتاج أولاً إلى إضافة ReactJS إلى صفحتنا. يمكنك البدء بسهولة في استخدام ReactJS من خلال شبكة توصيل المحتوى (CDN). Javaملفات البرامج النصية، كما هو موضح أدناه.

انتقل إلى موقع توثيق React القديم للحصول على روابط CDN، أي، https://legacy.reactjs.org/docs/cdn-links.htmlوستحصل على الملفات المطلوبة الموضحة في الصورة التالية.

للتطوير

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

لإنتاج

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

استبدل الإصدار استخدم إصدار React الذي تريده لكل من react.development.js و react-dom.development.js. نستخدم الإصدار 16 في هذه الصفحة، لذا ستعمل الأمثلة أدناه دون تغيير.

💡 ملاحظة: تُعدّ هذه الإصدارات عبر UMD/CDN طريقةً قديمةً تعمل حتى React 18، ولا تزال مناسبةً للتعلم. لم يعد React 19 يُصدر إصدارات UMD، وقد حلّت React 18+ محلّها. ReactDOM.render مع createRoot — انظر إلى قسم إصدارات React قرب نهاية هذه الصفحة.

في حال كنت تخطط لاستخدام ملفات CDN، تأكد من الاحتفاظ بسمة crossorigin لتجنب مشاكل النطاقات المختلفة. لا يمكن تنفيذ كود ReactJS مباشرةً في المتصفح، بل يجب تحويله باستخدام Babel إلى كود عادي. Javaقم بتشغيل البرنامج النصي قبل تنفيذه في المتصفح.

إليك البرنامج النصي BabelJS الذي يمكن استخدامه:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

إليكم مثالًا عمليًا لـ ReactJS باستخدام ملفات CDN وبرنامج BabelJS النصي.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

الإخراج:

سنتناول تفاصيل الكود في الفصل التالي؛ دعونا نرى كيفية عمله هنا مع ملفات CDN. استخدام سكربت Babel مباشرةً ليس ممارسة جيدة، وينبغي للمبتدئين استخدامه فقط لتعلم ReactJS في الوقت الحالي. في بيئة الإنتاج، ستحتاج إلى تثبيت React باستخدام حزمة npm.

استخدام حزم NPM

تأكد من تثبيت Node.js. إذا لم يكن مثبتًا، فراجع هذا الدليل التعليمي لـ Node.js (https://www.guru99.com/node-js-tutorial.html) تثبيت.

بعد تثبيت Node.js، أنشئ مجلدًا رد الفعل/.

للبدء بإعداد المشروع، قم بتشغيل الأمر الحرف الأول npm.

هكذا سيبدو هيكل المجلدات:

reactproj\
package.json

الآن سنقوم بتثبيت الحزم التي نحتاجها.

إليكم قائمة الحزم الخاصة بـ ReactJS. لقد قمنا بتثبيت React على الإصدار 16، لذا ReactDOM.render الأمثلة الموجودة في هذه الصفحة تعمل تمامًا كما هو موضح:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

افتح موجه الأوامر وقم بتشغيل الأوامر المذكورة أعلاه داخل المجلد reactproj/.

قم بإنشاء مجلد SRC / هذا هو المكان الذي سيُوضع فيه كود جافا سكريبت. سيكون كود مشروع ReactJS متاحًا في مجلد src/. أنشئ ملفًا باسم index.js واستورد react و react-dom، كما هو موضح أدناه.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

لقد كتبنا الكود الأساسي لـ ReactJS. سنشرح تفاصيله في الفصل التالي. نريد عرض مرحباً، من Guru99 دروس تعليميةوينطبق الأمر نفسه على عنصر DOM ذي المعر��ف "root". ويتم استخراجه من ملف index.html، وهو الملف الأساسي، كما هو موضح أدناه.

أنشئ مجلدًا باسم public/ وأضف إليه ملف index.html كما هو موضح أدناه.

index.html و

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

ستتولى حزمة react-scripts مهمة تجميع الكود وتشغيل الخادم لعرض ملف HTML، أي index.html. يجب إضافة الأمر التالي إلى ملف package.json لتفعيل استخدام react-scripts لتجميع الكود وتشغيل الخادم، كما هو موضح أدناه:

 "scripts": {
    "start": "react-scripts start"
  }

بعد تثبيت جميع الحزم وإضافة الأمر أعلاه، يصبح ملف package.json النهائي كما يلي:

package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

لبدء اختبار ReactJS، قم بتشغيل الأمر التالي:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

سيفتح المتصفح مع URL http://localhost:3000/ كما هو مبين أدناه:

عامة/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

سنستخدم نفس العملية لتنفيذ Javaستجد ملفات البرمجة النصية في الفصول التالية أيضًا. أضف جميع ملفات .js و .jsx إلى مجلد src/. سيكون هيكل الملفات كما يلي:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

كيفية إنشاء إعداد مشروع React الأول الخاص بك

إليكم دليلًا خطوة بخطوة في هذا البرنامج التعليمي لـ ReactJS للبدء بأول تطبيق React.

الخطوة 1) قم باستيراد حزم التفاعل.
1. للبدء باستخدام ReactJS، نحتاج أولاً إلى استيراد حزم التفاعل على النحو التالي.

import React from 'react';
import ReactDOM from 'react-dom';

2. احفظ الملف باسم index.js في مجلد src/.

الخطوة 2) اكتب ببساطة Code.
سنكتب رمزًا بسيطًا في هذا البرنامج التعليمي React JS، حيث سنعرض الرسالة مرحباً، من Guru99 درسًا تعليميًا!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render سأضيف قم بإضافة الوسم إلى العنصر ذي المعرّف root. إليك ملف HTML الذي لدينا:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

الخطوة 3) تجميع ملف Code.

بعد ذلك، في هذا البرنامج التعليمي React.js، نحتاج إلى تجميع التعليمات البرمجية للحصول على الإخراج في المتصفح.

هنا هو هيكل المجلد:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

لقد أضفنا الأوامر لتجميع الملف النهائي في package.json على النحو التالي:

"scripts": {
    "start": "react-scripts start"
  },

لتجميع الملف النهائي، قم بتشغيل الأمر التالي:

npm run start

عند تشغيل الأمر أعلاه، سيتم تجميع الملفات وإشعارك في حال وجود أي خطأ. إذا سارت الأمور على ما يرام، فسيتم فتح المتصفح وتشغيل الصفحة على الرابط التالي: http://localhost:3000/

الأمر: بدء تشغيل npm:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

الخطوة 4) تحقق من الإخراج.
استخدم URL http://localhost:3000 سيتم فتحه في المتصفح بمجرد تجميع الكود، كما هو موضح أدناه:

كيفية إعداد React باستخدام Vite (النهج الحديث)

يأتي إعداد react-scripts الموضح أعلاه من Create React App (CRA)، الذي كان الأداة القياسية لبدء التشغيل لسنوات. وقد أوقف فريق React دعم Create React App رسميًا في فبراير 2025، لذا ينبغي على المشاريع الجديدة استخدام أداة بناء حديثة بدلاً منه. الخيار الأكثر شيوعًا اليوم هو برغي، مما يؤدي إلى بدء التشغيل بشكل أسرع وإنتاج عمليات بناء أصغر.

إليك كيفية إنشاء مشروع React جديد باستخدام Vite:

الخطوة 1) قم بتشغيل أمر إنشاء الهيكل في طرفية النظام الخاصة بك:

npm create vite@latest my-react-app -- --template react

الخطوة 2) انتقل إلى المجلد وقم بتثبيت التبعيات:

cd my-react-app
npm install

الخطوة 3) ابدأ تشغيل خادم التطوير:

npm run dev

يُقدّم تطبيق Vite الخدمة على http://localhost:5173/ يتم ذلك افتراضياً، ويتم إعادة التحميل فوراً عند حفظ الملف.

الاختلافات الرئيسية عن الإعداد القديم في هذه الصفحة:

ملف الإدخال هو src/main.jsx بدلاً من src/index.js.
يقوم بتثبيت أحدث إصدار من React، والذي يستخدم إنشاء الجذر بدلاً من ReactDOM.render.
يوجد ملف index.html في جذر المشروع، وليس في مجلد public/.
يتم إنتاج الإصدارات باستخدام npm run build في مجلد dist/.

لتلبية احتياجات التطوير الشاملة مثل التوجيه وعرض الخادم، يوصي فريق React أيضًا بأطر عمل مثل Next.jsكل ما تتعلمه في الفصول أدناه - JSX والمكونات والحالة والخصائص - ينطبق دون تغيير في مشروع Vite أو Next.js.

ما هو JSX؟

JSX هو امتداد لـ Javaسكريبت. إنه سكريبت نموذجي يتيح لك استخدام لغة HTML و Javaكتابة السيناريو معًا.

فيما يلي مثال بسيط لرمز JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

لماذا نحتاج إلى JSX في React؟

بالنسبة لواجهة المستخدم، نحتاج إلى HTML، وسيكون لكل عنصر في DOM أحداث يجب التعامل معها، وتغييرات الحالة، وما إلى ذلك.

في حالة React، يسمح لنا ذلك باستخدام HTML و Javaقم بكتابة البرنامج النصي في نفس الملف، واهتم بتغييرات الحالة في DOM بطريقة فعالة.

التعبيرات في JSX

فيما يلي مثال بسيط لكيفية استخدام التعبيرات في JSX.

في أمثلة ReactJS السابقة، كتبنا شيئًا مثل:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

سنقوم الآن بتعديل الكود أعلاه لإضافة تعابير. تُستخدم التعابير داخل الأقواس المعقوفة {}، ويتم توسيعها أثناء وقت التشغيل. التعابير في React هي نفسها Javaتعابير البرمجة النصية.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

دعونا الآن نختبر نفس الشيء في المتصفح.

كما تلاحظ في لقطة الشاشة أعلاه، لم يتم استبدال تعبير {display}. لا يعرف React كيفية التعامل مع استخدام تعبير داخل ملف .js.

دعونا الآن نضيف التغييرات وننشئ ملف .jsx، كما هو موضح أدناه:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

أضفنا الكود المطلوب وسنستخدم ملف test.jsx في ملف index.js. نريد h1tag المتغير المراد استخدامه داخل ملف index.js، لذلك يتم تصدير نفس الشيء كما هو موضح أعلاه في ملف test.jsx.

إليكم الكود المعدل في ملف index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

لاستخدام ملف test.jsx في ملف index.js، يجب علينا استيراده أولاً كما هو موضح أدناه:

import h1tag from './test.jsx';

يمكننا استخدام h1tag الآن في ReactDOM.render كما هو موضح أدناه:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

هنا هو الإخراج عندما نتحقق من ذلك في المتصفح:

ما هي المكونات في ReactJS؟

المكونات تشبه المكونات النقية Javaوظائف البرمجة النصية التي تساعد في تسهيل كتابة الكود عن طريق تقسيم المنطق إلى كود مستقل قابل لإعادة الاستخدام.

المكونات كوظائف

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

لقد أنشأنا وظيفة تسمى مرحبا تُعيد هذه الدالة وسم h1، كما هو موضح أعلاه. ويعمل اسم الدالة كعنصر، كما هو موضح أدناه:

const Hello_comp = <Hello />;
export default Hello_comp;

المكون مرحبا يُستخدم كعلامة HTML، أي ، المخصصة ل Hello_comp متغير، ويتم تصديره باستخدام الأمر export.

لنستخدم الآن هذا المكون في ملف index.js كما هو موضح أدناه:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

وهذا هو ا��إخراج في المتصفح:

فئة كمكون

إليك مثال ReactJS الذي يستخدم فئة كمكون.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

يمكننا استخدام مكون Hello في ملف index.js كما يلي:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

يُستخدم العنصر Hello كعلامة HTML، أي .

هنا هو الناتج من نفسه.

مكونات الفئة مقابل مكونات الوظائف والخطافات

لقد اطلعت الآن على كلا الطريقتين لكتابة المكونات، فأيهما الأنسب لك؟ تُعلّم هذه الصفحة مكونات الأصناف لأنها تُوضّح مفاهيم الحالة ودورة الحياة، وهو أمرٌ قيّم للمبتدئين ولا يزال يُستخدم في قواعد البيانات القديمة. مع ذلك، منذ أن قدّمت React 16.8 ميزة Hooks، أصبحت مكونات الدوال قادرةً أيضاً على الاحتفاظ بالحالة، وهي الأسلوب المُوصى به لجميع التعليمات البرمجية الجديدة.

البعد	مكون الفئة	مكون وظيفي مع خطافات
الولايه او المحافظه	this.state و this.setState()	خطاف useState()
دورة الحياة	componentDidMount، componentDidUpdate، componentWillUnmount	تغطي دالة useEffect() جميع الجوانب الثلاثة.
بناء الجملة	المزيد من التعليمات البرمجية الجاهزة (المنشئ، الربط، هذا)	باختصار، لا تستخدم هذه الكلمة المفتاحية
الحالة	مدعوم، نمط قديم	يُنصح به للبرامج الجديدة

إليك مثال الحالة من هذه الصفحة بعد إعادة كتابته باستخدام دالة useState Hook:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

كلا الإصدارين يُنتجان نفس المخرجات. تعرّف على صيغة الفئات المستخدمة في الفصول أدناه، ثم تدرب على تحويل كل مثال إلى Hooks.

ما هي الحالة في ReactJS؟

الدولة هي Javaكائن برمجي، مشابه للخصائص، يحتوي على بيانات تُستخدم مع دالة العرض في ReactJS. بيانات الحالة هي كائن خاص وتُستخدم داخل المكونات الموجودة ضمن فئة.

مثال الدولة

إليك مثال عملي لكيفية استخدام الحالة داخل فئة.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

هذا ما حصلنا عليه عندما اختبرناه في المتصفح:

ما هي الدعائم في ReactJS؟

الخصائص هي سمات تُستخدم داخل المكون. وهي تعمل ككائنات أو متغيرات عامة يمكن استخدامها داخل المكون.

الدعائم لعنصر الوظيفة

فيما يلي مثال لتمرير الدعائم إلى مكون دالة.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

كما هو موضح أعلاه، قمنا بإضافة MSG يُعزى ذلك إلى المكون. ويمكن الوصول إليه بنفس الطريقة. الدعائم داخل دالة Hello، وهي كائن سيحتوي على MSG تفاصيل السمة، ويتم استخدامها كتعبير.

يتم استخدام المكون في ملف Index.js كما يلي:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

وهذا هو الإخراج في المتصفح:

الدعائم لمكون الفئة

للوصول إلى الخصائص في فئة ما، يمكننا القيام بذلك على النحو التالي:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

استخدم MSG يتم تمرير السمة إلى المكون في ملف Index.js كما يلي:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

وهذا هو الناتج في المتصفح:

تحقق أيضا: - برنامج AngularJS التعليمي للمبتدئين: تعلم AngularJS خطوة بخطوة

دورة حياة المكون

بعد تغطية المكونات والحالة والخصائص، تتمثل الخطوة التالية في فهم متى يستدعي React أساليب المكون. تنقسم دورة حياة المكون إلى مراحل التهيئة والتركيب والتحديث والإلغاء.

إليكم شرح مفصل لكل مرحلة.

يحتوي المكون في ReactJS على المراحل التالية:

التهيئة: هذه هي المرحلة الأولى من دورة حياة المكون.

هنا سيكون لها الدعائم الافتراضية والحالة على المستوى الأولي.

متزايدفي هذه المرحلة، يتم عرض المكون داخل DOM. لدينا إمكانية الوصول إلى الطرق التالية في حالة التحميل:

دالة render(): لديك هذه الدالة لجميع المكونات التي تم إنشاؤها. وهي تُعيد عنصر HTML.
componentDidMount(): يتم استدعاء هذا مباشرة بعد إضافة المكون إلى DOM.

تحديثفي هذه الحالة، يتفاعل المستخدم مع نموذج كائن المستند (DOM) ويتم تحديثه. على سبيل المثال، عند إدخال نص في مربع النص، يتم تحديث خصائص الحالة.

فيما يلي الطرق المتاحة في حالة التحديث:

يتم استدعاء الدالة shouldComponentUpdate() قبل إعادة عرض المكون؛ وتتيح لك تحديد ما إذا كان ينبغي تحديث المكون أم لا. يؤدي إرجاع القيمة true إلى إعادة عرض المكون.
componentDidUpdate(): يتم استدعاؤها بعد تحديث المكون.

إلغاء التثبيت: تظهر هذه الحالة عندما لا يكون المكون مطلوبًا أو تتم إزالته.

فيما يلي الطريقة المتاحة في حالة إلغاء التحميل:

componentWillUnmount(): يتم استدعاؤها قبل إزالة المكون أو تدميره مباشرة.

مثال عملي لأساليب دورة الحياة

إليك مثال عملي يوضح الطرق التي يتم استدعاؤها في كل مرحلة.

مثال: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

عند التحقق من المخرجات في المتصفح:

يظهر لك في وحدة تحكم المتصفح ما يلي:

عندما يدخل المستخدم في مربع النص:

تظهر الرسائل التالية في وحدة التحكم:

الآن بعد أن عرفت متى يتم عرض المكون وتحديثه، دعنا نطبق الحالة والأحداث على حالة استخدام عملية: معالجة مدخلات المستخدم من خلال النماذج.

العمل مع النماذج

في ReactJS، عناصر إدخال HTML مثل ، و <select /> لها حالتها الخاصة وتحتاج إلى التحديث عند تفاعل المستخدم، باستخدام طريقة setState().

سنتعرف في هذا الفصل على كيفية التعامل مع النماذج في ReactJS.

هذا مثال عملي:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

بالنسبة لحقول الإدخال، نحتاج إلى الحفاظ على الحالة، ولذلك يوفر React طريقة خاصة تسمى setStateوهذا يساعد في الحفاظ على الحالة عند حدوث أي تغيير. في تطبيق حقيقي، يُستدعى أيضًا event.preventDefault() قم بتفعيل خاصية "formSubmit" داخل النموذج لمنع المتصفح من إعادة تحميل الصفحة عند الإرسال.

استخدمنا حدثي onChange و onClick على مربع النص وزر الإرسال. عندما يكتب المستخدم داخل مربع النص، يتم استدعاء حدث onChange، ويتم تحديث حقل الاسم داخل كائن الحالة، كما هو موضح أدناه:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

الإخراج في المتصفح هو كما يلي:

الخطوة 1) أدخل اسمك في مربع النص:

الخطوة 2) انقر على زر الإرسال:

العمل مع الأحداث في ReactJS

تُعدّ النماذج مصدرًا واحدًا فقط لتفاعل المستخدم. التعامل مع الأحداث في ReactJS هو نفسه كما كنت ستفعله في Javaالبرنامج النصي. يمكنك استخدام جميع معالجات الأحداث المستخدمة في Javaيُستخدم أسلوب setState() لتحديث الحالة عندما يتفاعل المستخدم مع أي عنصر HTML.

إليك مثال عملي لكيفية استخدام الأحداث في ReactJS.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

بالنسبة لحقول الإدخال، نحتاج إلى الحفاظ على الحالة، ولذلك يوفر React ما يلي: setState طريقة تساعد في الحفاظ على الحالة كلما حدث تغيير.

لقد استخدمنا الأحداث عند_التغيير و عند _ النقر في مربع النص والزر. عندما يكتب المستخدم داخل مربع النص، عند_التغيير يتم استدعاء الحدث، ويتم تحديث حقل الاسم داخل كائن الحالة، كما هو موضح أدناه:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

وهذا هو الإخراج في المتصفح:

عندما يُدخل المستخدم الاسم:

عندما ينقر المستخدم على زر انقر هنا:

العمل مع Inline CSS في ReactJS

بعد أن تعالج مكوناتك البيانات والأحداث، تأتي الخطوة الأخيرة وهي تصميمها. سنلقي نظرة على مثال عملي لفهم CSS المضمن في ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

لقد أضفت نمط اللون: 'أحمر' إلى وسم h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

الإخراج في المتصفح هو كما يلي:

يمكنك إنشاء كائن بالنمط الذي تريده على العنصر واستخدام تعبير لإضافة النمط، كما هو موضح في المثال أعلاه.

العمل مع CSS الخارجي في ReactJS

لنقم بإنشاء ملف CSS خارجي. للقيام بذلك، أنشئ مجلدًا باسم css/ وأضف إليه ملف style.css.

style.css

.h1tag {
color:red;
}

قم بإضافة style.css إلى ملف Index.html الخاص بك

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

والآن دعونا نضيف الفئة إلى وسم h1 في ملف .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

يتم تحديد تفاصيل الفئة باستخدام السمة className. لاحظ أن JSX يستخدم اسم_الفئة بدلاً من سمة فئة HTML، لأن الفئة كلمة محجوزة في Javaالبرنامج النصي. الآن دعونا نختبره في المتصفح.

هذا ما تراه عند فحص وسم h1 في المتصفح:

يمكنك أن ترى أنه تمت إضافة class="h1tag" بنجاح إلى وسم h1.

لماذا تم استبدال ReactDOM.render بـ createRoot؟

تستخدم جميع الأمثلة في هذه الصفحة ReactDOM.render لتركيب التطبيق، وهو ما يتوافق مع React 16 و17، وهما الإصداران اللذان تستهدفهما هذه الدورة. أما React 18، الذي صدر في مارس 2022، فقد استبدل نقطة الدخول هذه بواجهة برمجة التطبيقات createRoot، بينما أزال React 19 دالة ReactDOM.render تمامًا. والسبب هو التزامن: إذ تُمكّن createRoot من React من إعداد عدة نسخ من واجهة المستخدم في الوقت نفسه، ومقاطعة عمليات العرض ذات الأولوية المنخفضة، والحفاظ على...ping وتجعل الرسوم المتحركة سلسة. وتعتمد ميزات مثل التجميع التلقائي، واستخدام الانتقال، والبث القائم على التشويق على ذلك.

يبدو المكافئ الحديث لملف index.js المستخدم في جميع أنحاء هذه الصفحة كما يلي:

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

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

كل ما تعلمته هنا - المكونات، وJSX، والحالة، والخصائص، والأحداث - يعمل بنفس الطريقة بعد هذا التغيير البسيط في نقطة الدخول. تظهر اختلافات الإصدارات كهذه بشكل متكرر في أسئلة مقابلة React JSلذلك من المفيد فهم كلا واجهتي برمجة التطبيقات (APIs).

الأسئلة الشائعة

ReactJS مكتبة وليست إطار عمل متكامل. فهي تركز فقط على بناء واجهة المستخدم. أما بالنسبة للتوجيه وجلب البيانات وعرض الصفحة من جانب الخادم، فيستخدمها المطورون مع أدوات مثل React Router أو أطر عمل مثل Next.js.

مع الصلبة Javaيتقن معظم المتعلمين أساسيات البرمجة، بما في ذلك المكونات، وJSX، والحالة، والخصائص، في غضون أسبوعين إلى أربعة أسابيع من الممارسة المنتظمة. أما الاستعداد لسوق العمل، بما في ذلك استخدام الخطافات، والتوجيه، واستدعاءات واجهة برمجة التطبيقات، فيستغرق عادةً من شهرين إلى ثلاثة أشهر من بناء مشاريع صغيرة.

يستخدم ReactJS نموذج DOM الخاص بالمتصفح لإنشاء مواقع الويب، بينما يستخدم React Native نفس نموذج المكونات لإنشاء تطبيقات iOS أصلية. Android التطبيقات. تنتقل المهارات بين الاثنين، لكن React Native يستبدل علامات HTML بمكونات واجهة المستخدم الأصلية.

نعم. مساعدون مثل مساعد الطيار جيثب و شات جي بي تي يمكن للذكاء الاصطناعي إنشاء مكونات، وشرح الأخطاء، وتحويل مكونات الفئات إلى خطافات. راجع دائمًا الكود المُنشأ، لأن الذكاء الاصطناعي قد يقترح واجهات برمجة تطبيقات قديمة مثل ReactDOM.render.

من غير المرجح حدوث ذلك على المدى القريب. يُسرّع الذكاء الاصطناعي عملية البرمجة الروتينية، لكن لا يزال المطورون مطلوبين لتصميم بنية المكونات، وإدارة حالة التطبيق، ومراجعة إمكانية الوصول، وتصحيح أخطاء الإنتاج. إن تعلم React بالإضافة إلى سير العمل المدعوم بالذكاء الاصطناعي يزيد من قيمتك، لا يقللها.

تحقق أيضا: - أهم 70 سؤالاً وإجابات في مقابلات React (محدثة)

دورة ReactJS للمبتدئين

ما هو ReactJS؟

مميزات ReactJS

مزايا ReactJS

عيوب ReactJS

باستخدام ReactJS من CDN

للتطوير

لإنتاج

استخدام حزم NPM

كيفية إنشاء إعداد مشروع React الأول الخاص بك

كيفية إعداد React باستخدام Vite (النهج الحديث)

ما هو JSX؟

لماذا نحتاج إلى JSX في React؟

التعبيرات في JSX

ما هي المكونات في ReactJS؟

المكونات كوظائف

فئة كمكون

مكونات الفئة مقابل مكونات الوظائف والخطافات

ما هي الحالة في ReactJS؟

مثال الدولة

ما هي الدعائم في ReactJS؟

الدعائم لعنصر الوظيفة

الدعائم لمكون الفئة

دورة حياة المكون

مثال عملي لأساليب دورة الحياة

العمل مع النماذج

العمل مع الأحداث في ReactJS

العمل مع Inline CSS في ReactJS

العمل مع CSS الخارجي في ReactJS

لماذا تم استبدال ReactDOM.render بـ createRoot؟

الأسئلة الشائعة

تلخيص هذه التدوينة بـ:

اشترك في النشرة الإخبارية

ما هو ReactJS؟

مميزات ReactJS

مزايا ReactJS

عيوب ReactJS

ذات المواد

باستخدام ReactJS من CDN

للتطوير

لإنتاج

استخدام حزم NPM

كيفية إنشاء إعداد مشروع React الأول الخاص بك

كيفية إعداد React باستخدام Vite (النهج الحديث)

ما هو JSX؟

لماذا نحتاج إلى JSX في React؟

التعبيرات في JSX

ما هي المكونات في ReactJS؟

المكونات كوظائف

فئة كمكون

مكونات الفئة مقابل مكونات الوظائف والخطافات

ما هي الحالة في ReactJS؟

مثال الدولة

ما هي الدعائم في ReactJS؟

الدعائم لعنصر الوظيفة

الدعائم لمكون الفئة

دورة حياة المكون

مثال عملي لأساليب دورة الحياة

العمل مع النماذج

العمل مع الأحداث في ReactJS

العمل مع Inline CSS في ReactJS

العمل مع CSS الخارجي في ReactJS

لماذا تم استبدال ReactDOM.render بـ createRoot؟

الأسئلة الشائعة

تلخيص هذه التدوينة بـ:

اشترك في النشرة الإخبارية