كيفية إنشاء عناصر React باستخدام JSX

مقدمة

في هذا الدرس، ستتعلم كيفية وصف العناصر باستخدام JSX. JSX عبارة عن تجريد يسمح لك بكتابة بنية شبيهة بلغة HTML في كود JavaScript الخاص بك، مما يتيح لك إنشاء مكونات React تبدو كعلامات HTML قياسية. JSX هي لغة القوالب لعناصر React، وبالتالي فهي الأساس لأي علامات يوفرها React في تطبيقك.

لأن JSX يسمح لك بكتابة جافا سكريبت في ترميزك، يمكنك استخدام وظائف وأساليب جافا سكريبت، بما في ذلك تعيين المصفوفات وتقييم الدائرة المختصرة للشروط.

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

المتطلبات الأساسية

• أنت بحاجة إلى بيئة تطوير تعمل بنظام Node.js.
• يجب أن تكون قادراً على إنشاء تطبيق باستخدام Create React App.
• أنت بحاجة أيضًا إلى معرفة أساسية بلغة جافا سكريبت.

الخطوة 1 - أضف ترميزًا إلى عنصر React

كما ذكرنا سابقاً، تمتلك React لغة ترميز خاصة تُسمى JSX. وهي عبارة عن مزيج من صيغ HTML وJavaScript، وتبدو كالتالي:

<div>
{inventory.filter(item => item.available).map(item => (
<Card>
<div className="title"}>{item.name}</div>
<div className="price">{item.price}</div>
</Card>
))
}
</div>

بعض وظائف جافا سكريبت مثل .filter و .map بالإضافة إلى بعض وظائف HTML القياسية مثل <div> ستتعرف على ذلك. ولكن هناك أجزاء أخرى مثل HTML وJavaScript، مثل <card> واسم الفصل.

هذه هي لغة JSX، وهي لغة ترميز خاصة تمنح مكونات React إحساس HTML مع قوة JavaScript.

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

للبدء، أنشئ مشروعًا جديدًا. شغّل البرنامج النصي التالي في سطر الأوامر لتثبيت مشروع جديد باستخدام create-react-app:

npx create-react-app jsx-tutorial

بعد انتهاء المشروع، انتقل إلى الدليل التالي:

cd jsx-tutorial

في علامة تبويب جديدة أو نافذة طرفية، ابدأ تشغيل المشروع باستخدام سكربت بدء تشغيل Create React App. سيتم تحديث المتصفح تلقائيًا ليعكس التغييرات، لذا شغّل هذا السكربت طوال فترة عملك.

npm start

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

سيتم تحميل متصفحك مع تطبيق React المضمن كجزء من Create React App.

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

في نافذة طرفية جديدة، انتقل إلى مجلد المشروع وافتح الملف src/App.js باستخدام الأمر التالي:

nano src/App.js

سترى ملفًا كهذا:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

الآن، احذف السطر import logo from './logo.svg' وكل ما يلي عبارة return في الدالة. غيّرها إلى return null. سيبدو الكود النهائي كالتالي:

import React from 'react';
import './App.css';
function App() {
return null;
}
export default App;

احفظ الملف واخرج من محرر النصوص.

وأخيرًا، احذف الشعار. في نافذة الطرفية، اكتب الأمر التالي:

rm src/logo.svg

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

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

هذا يعني أنه يمكنك كتابة شيء يشبه لغة HTML وتتوقع أن يكون الناتج النهائي مشابهاً لها. مع ذلك، هناك بعض المحاذير.

أولاً، إذا نظرت إلى علامة التبويب أو النافذة التي تشغل خادمك، فسترى ما يلي:

Output
...
./src/App.js
Line 1:8: 'React' is defined but never used no-unused-vars
...

هذا السطر يُشير إلى أنك لا تستخدم كود React مُستوردًا. عند إضافة سطر استيراد React 'react' إلى الكود، فإنك تستورد كود JavaScript الذي يُحوّل JSX إلى كود React. إذا لم يكن JSX موجودًا، فلا داعي لاستيراده.

لنُغيّر الأمر بإضافة القليل من JSX. ابدأ باستبدال null بمثال "Hello, World":

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

احفظ الملف. إذا نظرت إلى نافذة الأوامر أثناء تشغيل الخادم، ستختفي رسالة التحذير. أما إذا زرت الموقع عبر متصفحك، فسترى الرسالة كعنصر h1.

ثم، تحت الوسم <h1>أضف وسم فقرة يحتوي على النص الذي أكتبه بلغة JSX. سيبدو الكود كالتالي:

import React from 'react';
import './App.css';
function App() {
return(
<h1>Hello, World</h1>
<p>I am writing JSX</p>
)
}
export default App;

بما أن JSX يمتد على عدة أسطر، فأنت بحاجة إلى وضع التعبير بين قوسين.

احفظ الملف. عند القيام بذلك، ستظهر لك رسالة خطأ في نافذة الطرفية التي تشغل خادمك:

Output
./src/App.js
Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
5 | return(
6 | <h1>Hello, World</h1>
> 7 | <p>I am writing JSX</p>
| ^
8 | )
9 | }
10 |

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

الحل يكمن في تغيير بسيط في الكود. ضع الكود داخل وسم فارغ. الوسم الفارغ هو عنصر HTML لا يحتوي على أي كلمات. يبدو كالتالي: <> .

في محرر النصوص الخاص بك، ارجع إلى ./src/App.js وأضف الوسم الفارغ التالي:

import React from 'react';
import './App.css';
function App() {
return(
<>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</>
)
}
export default App;

يُنشئ الوسم الفارغ عنصرًا، لكنه لا يُضاف إلى الترميز النهائي عند تجميع الكود. هذا يُحافظ على نظافة الكود مع توفير عنصر واحد فقط لـ React.

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

الآن بعد أن أضفت بعض أساسيات JSX إلى مكونك وتعلمت كيفية تضمين جميع JSX داخل المكون، ستضيف بعض التنسيقات إلى مكونك.

الخطوة 2 - إضافة تنسيق إلى عنصر باستخدام سمات

في هذه الخطوة، ستتعرف على كيفية تنسيق عناصر مكونك لفهم كيفية عمل سمات HTML مع JSX. تتوفر العديد من خيارات التنسيق في React، بعضها يتطلب كتابة CSS بلغة JavaScript، والبعض الآخر يستخدم معالجات مسبقة. في هذا الدرس، ستتعامل مع فئات CSS وCSS المستورد.

الآن وقد أصبح لديك الكود، حان الوقت لإضافة بعض التنسيقات. افتح ملف App.css في محرر النصوص الخاص بك:

nano src/App.css

بما أنك تستخدم JSX جديدًا، فإن CSS الحالي سيشير إلى عناصر لم تعد موجودة. ولأنك لست بحاجة إلى CSS، يمكنك حذفه.

بعد حذف الكود، ستحصل على ملف فارغ.

بعد ذلك، ستضيف بعض التنسيقات إلى النص. في ملف src/App.css، أضف الكود التالي:

.container {
display: flex;
flex-direction: column;
align-items: center;
}

في كتلة التعليمات البرمجية هذه، قمت بإنشاء محدد فئة CSS يسمى .container واستخدمته لتوسيط المحتوى باستخدام display: flex.

احفظ الملف واخرج. سيتم تحديث المتصفح، لكن لن يطرأ أي تغيير. قبل أن تتمكن من رؤية التغيير، عليك إضافة فئة CSS إلى مكون React الخاص بك. افتح كود JavaScript الخاص بالمكون:

nano src/App.js

تم استيراد كود CSS بالفعل باستخدام سطر الاستيراد "./App.css". هذا يعني أن Webpack سيستورد الكود لإنشاء ورقة أنماط نهائية، ولكن لتطبيق CSS على عناصرك، تحتاج إلى إضافة الفئات.

أولاً، في محرر النصوص الخاص بك، ابحث عن الوسوم الفارغة <> ل <div> يتغير.

import React from 'react';
import './App.css';
function App() {
return(
<div>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

في هذا الكود، استبدلتَ الوسوم الفارغة (<>) بوسوم div. تُفيد الوسوم الفارغة في تجميع الكود دون إضافة وسوم إضافية، ولكن يُفضّل استخدام div هنا لأن الوسوم الفارغة لا تقبل أي سمات HTML.

بعد ذلك، عليك إضافة اسم الفئة. هنا يبدأ اختلاف JSX عن HTML. إذا كنت ترغب في إضافة فئة إلى عنصر HTML عادي، يمكنك فعل ذلك على النحو التالي:

<div class="container">

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

إحدى الكلمات المحجوزة هي "class". يتجاوز React هذه الكلمة المحجوزة بتغيير بسيط. فبدلاً من إضافة الخاصية "class"، تُضاف الخاصية "className". وكقاعدة عامة، إذا لم تعمل إحدى الخصائص كما هو متوقع، جرّب إضافة صيغة CamelCase. خاصية أخرى مختلفة قليلاً هي الخاصية "for"، والتي تُستخدم للوسوم. هناك خصائص أخرى، ولكن لحسن الحظ القائمة قصيرة نسبيًا.

الآن بعد أن عرفت كيفية استخدام خاصية class في React، يمكنك تحديث الكود الخاص بك لإضافة الأنماط. في محرر النصوص، أضف className="container" إلى عنصر div الافتتاحي:

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

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

خاصية className فريدة في React. يمكنك إضافة معظم خصائص HTML إلى JSX دون أي تغييرات. على سبيل المثال، ارجع إلى محرر النصوص وأضف المعرّف greeting إلى العنصر. <h1> أضف ما يناسبك. سيبدو كصفحة HTML قياسية:

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1 id="greeting">Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

احفظ الصفحة وأعد تحميل المتصفح. هذا كل شيء.

حتى الآن، يبدو JSX كلغة ترميز قياسية، لكن ميزته تكمن في امتلاكه لقوة جافا سكريبت مع الحفاظ على مظهر HTML. هذا يعني أنه يمكنك تعيين متغيرات والإشارة إليها في خصائصك. للإشارة إلى خاصية، ضعها بين قوسين معقوفين {} بدلاً من علامات الاقتباس.

في محرر النصوص الخاص بك، أضف الأسطر المميزة التالية للإشارة إلى ميزة ما:

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

في هذا الكود، قمت بإنشاء متغير أعلى عبارة الإرجاع يسمى greeting بقيمة &quot;greeting&quot;، ثم قمت بتعيينه للمتغير الموجود في سمة id الخاصة بالعلامة. <h1> لقد قمت بإحالة نفسك.

احفظ الملف واخرج. ستكون الصفحة كما هي، ولكن مع إضافة علامة تعريف.

لقد تعاملت حتى الآن مع عدد قليل من العناصر بمفردها، ولكن يمكنك استخدام JSX لإضافة العديد من عناصر HTML ودمجها لإنشاء صفحات معقدة.

لتوضيح ذلك، أنشئ صفحة تحتوي على قائمة من الرموز التعبيرية. هذه الرموز مُغلّفة بعنصر <img>. عند النقر على أي رمز تعبيري، ستظهر لك صيغته المختصرة CLDR..

للبدء، عليك إضافة بعض العناصر الإضافية إلى الصفحة. افتح الملف src/App.js في محرر النصوص الخاص بك. أبقه مفتوحًا في هذه المرحلة.

nano src/App.js

أولاً، أضف قائمة بالرموز التعبيرية عن طريق إضافة العناصر المميزة التالية:

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

إليك علامة.

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

  يمكنك أيضًا استخدام الرموز التعبيرية مع علامة. <span> لقد أضفتَ إليه بعض الخصائص الأخرى. كل عنصر span له سمة role مُعيّنة على دور img. هذا يُشير إلى البرنامج المُستخدِم بأن العنصر يعمل كصورة. بالإضافة إلى ذلك، كل <span> يحتوي على وسم aria وسمة id باسم emoji. يُخبر وسم aria الزوار الذين يستخدمون قارئات الشاشة بما يتم عرضه. ستستخدم السمة id عند كتابة الأحداث لاحقًا.

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

  احفظ الملف واخرج منه. سيتم تحديث المتصفح وسترى ما يلي:

  

  والآن أضف بعض التنسيقات. افتح كود CSS في محرر النصوص الخاص بك:

  nano src/App.css

  لإزالة الخلفية والحدود الافتراضية للأزرار مع زيادة حجم الخط، أضف الكود المميز التالي:

  .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  button {
  font-size: 2em;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  }
  ul {
  display: flex;
  padding: 0;
  }
  li {
  margin: 0 20px;
  list-style: none;
  padding: 0;
  }

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

  انحنِ للأمام حتى يصبح الوضع أفقيًا.

  احفظ ملف CSS وأغلقه. سيتم تحديث المتصفح وسترى ما يلي:

  

  لقد تعاملتَ الآن مع العديد من عناصر JSX التي تبدو كعناصر HTML عادية. أضفتَ فئات، ومعرّفات، ووسوم aria، وتعاملتَ مع البيانات كسلاسل نصية ومتغيرات. لكن React يستخدم أيضًا سمات لتحديد كيفية استجابة عناصرك لأحداث المستخدم. بعد ذلك، ستبدأ بجعل الصفحة تفاعلية بإضافة أحداث إلى الزر.

  الخطوة 3 - إضافة الأحداث إلى العناصر

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

  الآن وقد أصبح لديك صفحة رئيسية تحتوي على المعلومات، حان الوقت لإضافة بعض الأحداث إليها. هناك العديد من معالجات الأحداث التي يمكنك إضافتها إلى عناصر HTML، ويوفر لك React إمكانية الوصول إليها جميعًا. وبما أن كود JavaScript الخاص بك مُضمّن في ترميز HTML، يمكنك إضافة الأحداث بسرعة مع الحفاظ على تنظيم الكود بشكل جيد.

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

  import React from 'react';
  import './App.css';
  function App() {
  const greeting = "greeting";
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  <p>I am writing JSX</p>
  <ul>
  <li>
  <button
  onClick={event => alert(event.target.id)}
  >
  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
  </button>
  </li>
  <li>
  <button
  onClick={event => alert(event.target.id)}
  >
  <span role="img" aria-label="party popper" id="party popper">🎉</span>
  </button>
  </li>
  <li>
  <button
  onClick={event => alert(event.target.id)}
  >
  <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
  </button>
  </li>
  </ul>
  </div>
  )
  }
  export default App;

  بما أن هذا الكود مكتوب بلغة JSX، فقد استخدمتَ صيغة CamelCase لوصف onclick، أي أضفتَه باسم onClick. تستخدم خاصية onClick هذه دالة مجهولة المصدر لاسترجاع معلومات العنصر الذي تم النقر عليه.

  لقد أضفت دالة سهمية مجهولة تستقبل الحدث من الزر الذي تم النقر عليه، وسيكون للحدث هدف هو العنصر <span> المعلومات التي تحتاجها موجودة في خاصية المعرّف (id)، والتي يمكنك الوصول إليها باستخدام event.target.id. يمكنك تفعيل التنبيه باستخدام الدالة alert().

  احفظ الملف. في متصفحك، انقر على أحد الرموز التعبيرية وستتلقى تنبيهًا باسم الرمز.

  

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

  في محرر النصوص، أنشئ دالة باسم displayEmojiName تلتقط الحدث وتستدعي الدالة alert() مع مُعرّف. ثم مرر الدالة إلى كل خاصية onClick.

  import React from 'react';
  import './App.css';
  const displayEmojiName = event => alert(event.target.id);
  function App() {
  const greeting = "greeting";
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  <p>I am writing JSX</p>
  <ul>
  <li>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
  </button>
  </li>
  <li>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label="party popper" id="party popper">🎉</span>
  </button>
  </li>
  <li>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
  </button>
  </li>
  </ul>
  </div>
  )
  }
  export default App;

  احفظ الملف. في متصفحك، انقر على رمز تعبيري وسترى نفس التحذير.

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

  الخطوة الرابعة - ربط البيانات لإنشاء العناصر

  في هذه الخطوة، ستتجاوز استخدام JSX كلغة ترميز بسيطة. ستتعلم كيفية دمجها مع JavaScript لإنشاء ترميز ديناميكي يقلل من حجم الكود ويحسن من سهولة قراءته. ستحوّل الكود إلى مصفوفة تقوم بالتكرار عليها لإنشاء عناصر HTML.

  لا يفرض JSX قيودًا عليك كما يفعل HTML، بل يسمح لك أيضًا باستخدام JavaScript مباشرةً في ترميزك. لقد جربت هذا بالفعل قليلًا بتمرير الدوال إلى السمات، واستخدمت المتغيرات لإعادة استخدام البيانات. الآن حان الوقت لإنشاء JSX مباشرةً من البيانات باستخدام كود JavaScript القياسي.

  في محرر النصوص، عليك إنشاء مصفوفة بيانات الرموز التعبيرية في ملف src/App.js. إذا كنت قد أغلقت الملف، فأعد فتحه.

  nano src/App.js

  أضف مصفوفة تحتوي على عناصر تتضمن الرمز التعبيري واسمه. لاحظ أنه يجب وضع الرموز التعبيرية بين علامتي اقتباس. أنشئ هذه المصفوفة أعلى دالة التطبيق (App).

  import React from 'react';
  import './App.css';
  const displayEmojiName = event => alert(event.target.id);
  const emojis = [
  {
  emoji: "😀",
  name: "grinning face"
  },
  {
  emoji: "🎉",
  name: "party popper"
  },
  {
  emoji: "💃",
  name: "woman dancing"
  }
  ];
  function App() {
  ...
  }
  export default App;

  الآن بعد أن حصلت على البيانات، يمكنك تكرارها. لاستخدام جافا سكريبت داخل JSX، عليك وضعها بين قوسين معقوفين: {}. يشبه هذا إضافة الدوال إلى السمات.

  لإنشاء مكونات React، تحتاج إلى تحويل البيانات إلى عناصر JSX. وللقيام بذلك، تقوم بربط البيانات وإرجاع عنصر JSX. هناك بعض الأمور التي يجب مراعاتها عند كتابة الكود.

  أولاً، يجب تمثيل مجموعة من العناصر بواسطة حاوية. <div> مُحاطة. ثانيًا، يحتاج كل عنصر إلى خاصية خاصة تُسمى المفتاح. يجب أن يكون المفتاح عبارة عن بيانات فريدة يمكن لـ React استخدامها لتتبع العناصر ومعرفة متى يتم تحديث المكون. يُحذف المفتاح من كود HTML المُجمَّع، لأنه يُستخدم لأغراض داخلية فقط. يُنصح بإضافة سلسلة نصية بسيطة كمفتاح عند استخدام الحلقات.

  إليك مثال بسيط يوضح قائمة بالأسماء في <div> يرسم الخرائط:

  ...
  const names = [
  "Atul Gawande",
  "Stan Sakai",
  "Barry Lopez"
  ];
  return(
  <div>
  {names.map(name => <div key={name}>{name}</div>)}
  </div>
  )
  ...

  سيبدو كود HTML الناتج على النحو التالي:

  ...
  <div>
  <div>Atul Gawande</div>
  <div>Stan Sakai</div>
  <div>Barry Lopez</div>
  </div>
  ...

  سيكون تحويل قائمة الرموز التعبيرية مماثلاً. <ul> سيكون عبارة عن حاوية. تقوم بربط البيانات و <li> أعد مفتاح الاسم المختصر للرموز التعبيرية. قم بتشفير البيانات في الوسوم. <button> و <span> ستقوم باستبدالها بمعلومات الخاتم.

  أضف ما يلي في محرر النصوص الخاص بك:

  import React from 'react';
  import './App.css';
  const displayEmojiName = event => alert(event.target.id);
  const emojis = [
  {
  emoji: '😀',
  name: "test grinning face"
  },
  {
  emoji: '🎉',
  name: "party popper"
  },
  {
  emoji: '💃',
  name: "woman dancing"
  }
  ];
  function App() {
  const greeting = "greeting";
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  <p>I am writing JSX</p>
  <ul>
  {
  emojis.map(emoji => (
  <li key={emoji.name}>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
  </button>
  </li>
  ))
  }
  </ul>
  </div>
  )
  }
  export default App;

  في الكود، انقر على مصفوفة الرموز التعبيرية في الوسم <ul> خريطة وواحد <li> العودة. في أي حال <li> لقد استخدمت اسم الرمز التعبيري كمفتاح أساسي. سيظل الزر يعمل بنفس وظيفته المعتادة. في العنصر <span>استبدل aria-label و id بالاسم. ضع علامة على المحتوى <span> ينبغي أن يكون رمزًا تعبيريًا (إيموجي).

  احفظ الملف. سيتم تحديث نافذتك وستظهر لك البيانات. لاحظ أن المفتاح غير موجود في ملف HTML المُنشأ.

  

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

  الخطوة 5 - عرض العناصر ذات الدوائر القصيرة بشكل مشروط

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

  قد تحتاج أحيانًا إلى عرض معلومات معينة في بعض الحالات دون غيرها. على سبيل المثال، قد ترغب في عرض رسالة تحذير للمستخدم فقط عند تحقق شروط معينة، أو قد ترغب في عرض بعض معلومات الحساب للمسؤول فقط، بحيث لا يراها المستخدم العادي.

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

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

  {isLoggedIn && <button>Log Out</button>}

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

  لتجربة ذلك، أضف الأسطر المميزة التالية:

  import React from 'react';
  import './App.css';
  ...
  function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  {displayAction && <p>I am writing JSX</p>}
  <ul>
  ...
  </ul>
  </div>
  )
  }
  export default App;

  في محرر النصوص الخاص بك، قمت بإنشاء متغير باسم displayAction بقيمة false. ثم الوسم <p> لقد أحطتَ عنصر displayAction بأقواس معقوفة. وفي بداية الأقواس المعقوفة، أضفتَ &amp;&amp; لإنشاء شرط.

  احفظ الملف وستلاحظ اختفاء العنصر من متصفحك. والأهم من ذلك، أنه لن يظهر في كود HTML المُنشأ أيضًا. هذا يختلف عن إخفاء عنصر باستخدام CSS، فهو لن يكون موجودًا أصلًا في الكود النهائي.

  

  في الوقت الحالي، يتم ترميز قيمة displayAction بشكل ثابت، ولكن يمكنك أيضًا تخزين تلك القيمة كحالة أو تمريرها كأساس من مكون رئيسي.

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

  نتيجة

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

  هذا هو الأساس الذي تحتاجه لبناء المكونات المستقبلية. باستخدام مزيج من جافا سكريبت وHTML، يمكنك بناء مكونات ديناميكية مرنة تسمح لتطبيقك بالنمو والتطور.