برنامج ReactJS التعليمي للمبتدئين: تعلم باستخدام مثال خطوة بخطوة

ما هو ReactJS؟

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

مميزات ReactJS

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

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

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

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

مزايا ReactJS

فيما يلي إيجابيات/فوائد مهمة لاستخدام ReactJS:

يستخدم ReactJS dom الظاهري الذي يستخدم ذاكرة التخزين المؤقت لبنية البيانات في الذاكرة، ويتم تحديث التغييرات النهائية فقط في dom المتصفحات. وهذا يجعل التطبيق أسرع.
يمكنك إنشاء مكونات من اختيارك باستخدام ميزة مكون التفاعل. يمكن إعادة استخدام المكونات وهي مفيدة أيضًا في صيانة التعليمات البرمجية.
Reactjs هي مكتبة جافا سكريبت مفتوحة المصدر، لذا من السهل البدء بها.
أصبح ReactJS شائعًا جدًا في فترة قصيرة وتم الحفاظ عليه بواسطة Facebook وInstagram. يتم استخدامه من قبل العديد من الشركات الشهيرة مثل شركة Apple، Netflix، الخ.
يحتفظ Facebook بمكتبة ReactJS، لذا تتم صيانتها جيدًا وتحديثها باستمرار.
يمكن استخدام ReactJS لتطوير واجهة مستخدم غنية لتطبيقات سطح المكتب والجوال.
من السهل تصحيح الأخطاء والاختبار حيث تتم معظم الترميز Javascript وليس على أتش تي أم أل.

عيوب ReactJS

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

تتم كتابة معظم التعليمات البرمجية بلغة JSX، على سبيل المثال، يعد Html وcss جزءًا من جافا سكريبت، وقد يكون الأمر مربكًا للغاية لأن معظم الأطر الأخرى تفضل إبقاء Html منفصلاً عن كود جافا سكريبت.
حجم ملف ReactJS كبير.

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

لبدء العمل مع رد الفعل، نحتاج أولاً إلى تثبيت Reactjs. يمكنك بسهولة البدء في استخدام Reactjs باستخدام ملفات CDN javascript، كما هو موضح أدناه.

انتقل إلى الموقع الرسمي لـreactjs للحصول على روابط CDN، على سبيل المثال، https://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-development.js و React-dom.developement.js. يمكنك استضافة الملفات في نهايتك لبدء العمل مع Reactjs.

في حالة ما إذا كنت تخطط لاستخدام ملفات CDN، فتأكد من الاحتفاظ بالسمة cross-origin، لتجنب المشكلات عبر النطاقات. لا يمكن تنفيذ كود Reactjs مباشرة في المتصفح ويجب أن يتم نقله باستخدام Babel إلى جافا سكريبت قبل تنفيذه في المتصفح.

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

<script src="https://unpkg.com/[email protected]/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/[email protected]/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

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

بمجرد تثبيت Nodejs، قم بإنشاء مجلد رد الفعل/.

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

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

reactproj\
package.json

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

فيما يلي قائمة الحزم الخاصة بـ Reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

قم بإنشاء مجلد SRC / حيث سيأتي كل رمز js في هذا المجلد. ستكون جميع الأكواد البرمجية لمشروع Reactjs متاحة في المجلد src/. قم بإنشاء ملف Index.js وأضف Import 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>

سوف تتولى حزمة البرامج النصية التفاعلية تجميع التعليمات البرمجية وبدء تشغيل الخادم لعرض ملف html، أي ملف Index.html. تحتاج إلى إضافة الأمر في package.json الذي سيهتم باستخدام البرامج النصية التفاعلية لتجميع التعليمات البرمجية وبدء تشغيل الخادم كما هو موضح أدناه:

 "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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

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

npm run start

C:\reactproj>npm run start		
> [email protected] 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>

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

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

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

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

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

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

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

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

ReactDOM.render(

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

ReactDOM.render سوف تضيف وضع علامة على العنصر مع جذر المعرف. هذا هو ملف html الذي لدينا:

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

الخطوة 3) قم بتجميع الكود.

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

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

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

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

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

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

npm run start

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

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

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

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

ما هو JSX؟

JSX هو امتداد لـ javascript. إنه نص برمجي نموذجي حيث ستتمتع بالقدرة على استخدام HTML و Javascript معا.

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

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

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

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

في حالة React، فهي تتيح لنا الاستفادة من Html وjavascript في نفس الملف والعناية بتغييرات الحالة في 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 هي نفس تعبيرات JavaScript.

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;

لقد أضفنا الكود المطلوب وسوف نستخدم ملف text.jsx في ملف Index.js h1tag المتغير الذي سيتم استخدامه داخل script.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؟

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

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

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 المتغير ويتم تصدير نفس الشيء باستخدام التصدير.

دعونا الآن نستخدم هذا المكون في ملف 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')
);

يتم استخدام Component Hello كعلامة Html، على سبيل المثال، .

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

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

الحالة هي كائن جافا سكريبت مشابه للدعائم التي تحتوي على بيانات لاستخدامها مع عرض 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 خطوة بخطوة

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

تنقسم دورة حياة المكون إلى مراحل التهيئة والتركيب والتحديث وإلغاء التثبيت.

وفيما يلي شرح تفصيلي عن كل مكون.

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

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

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

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

elementDidMount(): يتم استدعاؤه أيضًا عند إضافة المكون إلى dom.

render(): لديك هذه الطريقة لجميع المكونات التي تم إنشاؤها. تقوم بإرجاع عقدة HTML.

تحديث:في هذه الحالة، يتفاعل المستخدم مع DOM ويتم تحديثه. على سبيل المثال، إذا أدخلت شيئًا في مربع النص، يتم تحديث خصائص الحالة.

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

يجب أن يكون ComponentUpdate () : يتم استدعاؤه عند تحديث المكون.

ComponentDidUpdate() : بعد تحديث المكون.

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

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

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

مثال العمل

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

مثال: 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')
);

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

في وحدة تحكم المتصفح تحصل على:

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

يتم عرض الرسائل التالية في وحدة التحكم:

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

في عناصر الإدخال 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;

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

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

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) أدخل اسمك في مربع النص:

انقر فوق زر الإرسال

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

العمل مع الأحداث في Reactjs هو نفس ما كنت ستفعله في جافا سكريبت. يمكنك استخدام كافة معالجات الأحداث المستخدمة في جافا سكريبت. يتم استخدام طريقة 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;

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

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>
    <script src = "out/script.min.js"></script>
  </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. الآن دعنا نختبرها في المتصفح.

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

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

الملخص

ReactJS هي واجهة أمامية مفتوحة المصدر Javaمكتبة نصوص لبناء واجهة المستخدم. يتم صيانتها بواسطة Facebook وتستخدمها العديد من الشركات اليوم لتطوير واجهة المستخدم.
تتضمن الميزات الأساسية لـ ReactJS JSX، والمكونات (المكونات الوظيفية والمكونات القائمة على الفئة)، ودورة حياة المكون، والدعائم، ودعم الحالة للمكون، والعمل مع تعبيرات جافا سكريبت.
يتم شرح إعداد مشروع ReactJS باستخدام ملفات CDN وأيضًا باستخدام حزم npm لبناء المشروع.
JSX هو امتداد لجافا سكريبت. إنه برنامج نصي للقالب حيث سيكون لديك القدرة على استخدام Html وjavascript معًا.
تشبه المكونات وظائف جافا سكريبت الخالصة التي تساعد في تسهيل التعليمات البرمجية عن طريق تقسيم المنطق إلى تعليمات برمجية مستقلة قابلة لإعادة الاستخدام.
الحالة هي كائن جافا سكريبت مشابه للدعائم التي تحتوي على بيانات لاستخدامها مع عرض Reactjs. بيانات الحالة هي كائن خاص ويتم استخدامها داخل المكونات الموجودة داخل الفصل.
الدعائم هي خصائص يتم استخدامها داخل المكون.
تنقسم دورة حياة المكون إلى مراحل التهيئة والتركيب والتحديث وإلغاء التثبيت.
في رد فعل HTML عناصر الإدخال مثل , و<select /> له حالته الخاصة ويحتاج إلى التحديث عندما يتفاعل المستخدم باستخدام طريقة setState().
العمل مع الأحداث في Reactjs هو نفس ما كنت ستفعله في جافا سكريبت. يمكنك استخدام كافة معالجات الأحداث المستخدمة في جافا سكريبت. يتم استخدام طريقة setState() لتحديث الحالة عندما يتفاعل المستخدم مع أي عنصر Html.
يسمح لك ReactJS بالعمل مع CSS خارجي بالإضافة إلى CSS المضمّن باستخدام تعبيرات JavaScript.

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

قد ترغب:

أفضل 5 دورات تفاعلية مع…

ما هو ReactJS؟

مميزات ReactJS

مزايا ReactJS

عيوب ReactJS

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

للتطوير

لإنتاج

ذات المواد

استخدام حزم NPM

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

ما هو JSX؟

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

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

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

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

فئة كمكون

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

مثال الدولة

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

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

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

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

مثال العمل

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

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

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

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

الملخص