عندما تم تقديم React لأول مرة ، كانت JSX هي إحدى الميزات التي جذبت انتباه معظم الناس (ووجهت أكبر قدر من النقد). إذا كنت تتعلم React ، أو سبق لك أن شاهدت أي أمثلة للتعليمات البرمجية ، فمن المحتمل أنك قمت بأخذ مزدوج في الصيغة. ما هو هذا الدمج الغريب لـ HTML و JavaScript؟ هل هذا رمز حقيقي حتى؟

دعنا نلقي نظرة على ماهية JSX ، وكيف تعمل ، ولماذا نريد أن نمزج HTML و JS في المقام الأول!

ما هو JSX؟

تم تعريفه بواسطة مستندات React على أنها “امتداد لجافا سكريبت” أو “سكر لغوي للاتصال” React.createElement(component, props, ...children))“، JSX هو ما يجعل كتابة مكونات React سهلة.

يعتبر JSX لغة خاصة بالمجال (DSL)، والتي يمكن أن تبدو مشابهة جدًا للغة النموذج ، مثل Moustache أو Thymeleaf أو Razor أو Twig أو غيرها.

فيما يلي مثال على تركيبها:

const element = <h1>Hello, World!</h1>;

ما يأتي بعد علامة التساوي ليس سلسلة أو HTML ، بل JSX. لا يتم عرضه على HTML مباشرة ولكن بدلاً من ذلك يتم عرضه على فئات React التي يستهلكها DOM الظاهري. في النهاية ، من خلال السحر الغامض لـ Virtual DOM ، سوف تشق طريقها إلى الصفحة ويتم تحويلها إلى HTML.

كيف يعمل؟

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

ملاحظة: يمكنك استخدام ملف بابل ريبل لتحويل أي من الأمثلة التالية إلى JavaScript عادي.

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

JSX:

class SitePoint extends Component {
  render() {
    return (
      <div>My name is <span>{this.props.myName}</span></div>
    )
  }
}

React Sans JSX:

class SitePoint extends Component {
  render() {
    return React.createElement(
      "div",
      null,
      "My name is",
      React.createElement(
        "span",
        null,
        this.props.myName
      )
    )
  }
}

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

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

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

لماذا نستخدم JSX؟

هناك عدة أسباب تجعل JSX فكرة جيدة:

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

دعم TypeScript. يدعم TypeScript تجميع ملفات TSX مع فحص النوع. هذا يعني أنه إذا ارتكبت خطأ في اسم عنصر أو نوع سمة ، فسوف تفشل عملية التجميع وستظهر لك رسالة خطأ تشير إلى خطأك. تدعم IDEs الشائعة مثل VS Code أيضًا ملفات TSX وتوفر إكمال التعليمات البرمجية وإعادة البناء وميزات مفيدة أخرى.

الأمان. تهتم JSX بقضايا تعقيم الإخراج المعتادة لمنع الهجمات مثل البرمجة النصية عبر المواقع.

ماذا عن فصل المخاوف؟

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

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

استخدام JSX مع React

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

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

بخلاف ذلك ، يمكنك اختيار أداة Create React App من Facebook. لاستخدام هذا ، ستحتاج إلى تثبيت Node و npm. إذا لم تقم بذلك ، فتوجه إلى Node.js صفحة التحميل واحصل على أحدث إصدار لنظامك (يأتي npm مرفقًا مع Node). بدلاً من ذلك ، يمكنك الرجوع إلى البرنامج التعليمي الخاص بنا حول تثبيت Node باستخدام مدير الإصدار.

مع تثبيت Node ، يمكنك إنشاء تطبيق React جديد مثل:

npx create-react-app myapp

سيؤدي هذا إلى إنشاء ملف myapp مجلد. غيّر إلى هذا المجلد وابدأ تشغيل خادم التطوير كما يلي:

cd myapp
npm start

سيفتح متصفحك الافتراضي وسترى تطبيق React الجديد. لأغراض هذا البرنامج التعليمي ، يمكنك العمل في App المكون الذي يقع في src/App.js.

الآن دعنا ندخل في بعض التعليمات البرمجية.

التعبيرات الأساسية

JSX تشبه إلى حد بعيد HTML العادي وتستخدم نفس الصيغة القائمة على XML. إليك مثال “Hello، World” الأساسي للبدء به:

const element = <h1>Hello, World!</h1>;

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

انظر القلم
jsx- مرحبا العالم
بواسطة SitePoint (تضمين التغريدة)
على كود.

لاحظ كيف أن ملف <h1> يتم استخدام العنصر مباشرة داخل JavaScript عادي. لا توجد علامات اقتباس حوله ، لأنه ليس سلسلة نصية ، ولكنه تعبير لغوي.

وبالمثل ، يمكنك استخدام JavaScript في علامات JSX من خلال إحاطة الأقواس المتعرجة:

function getGreeting(name) {
  return `Hello, ${name}`;
}

const element = <h1>{getGreeting('John')}</h1>;

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

انظر القلم
jsx-hello-world-with-js
بواسطة SitePoint (تضمين التغريدة)
على كود.

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

const styles = {
  color: 'red',
  fontStyle: 'italic'
}

const element = <h1 style={styles}>Hello, World!</h1>;

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

انظر القلم
jsx- مرحبًا بالعالم
بواسطة SitePoint (تضمين التغريدة)
على كود.

ملاحظة: إذا كنت بحاجة إلى تمرير قائمة ديناميكية من السمات ، فيمكنك استخدام معامل الانتشار: <h1 {...attributes}></h1>.

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

function getGreeting() {
  return (
    <h2>Welcome to the website</h2>
  )
}

const element = <div>
  <h1>Hello!</h1>
  {getGreeting()}
</div>;

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

انظر القلم
jsx- الأطفال
بواسطة SitePoint (تضمين التغريدة)
على كود.

عبارات شرطية

تفتح حقيقة أنه يمكنك تضمين تعبيرات JavaScript وتمرير عناصر JSX العديد من الاحتمالات لبناء التعليمات البرمجية الخاصة بك. حالة الاستخدام المتكرر هي عرض عنصر مشروط لمستخدم قام بتسجيل الدخول – مثل رسالة مخصصة – أو خطأ في التحقق من الصحة. JSX لا يدعم المعيار if البيانات ، ولكن يمكنك استخدام عامل ثلاثي:

const loggedIn = true;

const element = <div>
  <h1>Hello!</h1>
  <h2>
    {(loggedIn) ? 'Welcome back' : 'Nice to meet you'}
  </h2>
</div>;

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

انظر القلم
jsx- المثال الشرطي
بواسطة SitePoint (تضمين التغريدة)
على كود.

يمكن أن يعود التعبير false، true، null أو undefined لتجنب عرض عنصر. إرجاع بعض القيم الزائفة ، مثل 0 أو سلسلة فارغة ، ستستمر في عرض العنصر:

const error = true;

const element = <div>
  <label>
    Name:
    <input />
    {error ? <div style={{color: 'red'}}>Name invalid</div> : null}
  </label>
</div>;

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

انظر القلم
jsx- عرض شرطي
بواسطة SitePoint (تضمين التغريدة)
على كود.

لاحظ الأقواس المزدوجة المتعرجة المستخدمة في style ينسب. هذا هو بناء الجملة لتمرير كائن مضمن كقيمة: يشير الزوج الخارجي إلى التعبير والداخلي هو الكائن نفسه.

في المقتطف أعلاه ، نرى هذا:

{error ? <div style={{color: 'red'}}>Name invalid</div> : null}

يمكن اختصار هذا إلى أبعد من ذلك ، إلى:

{error && <div style={{color: 'red'}}>Name invalid</div>}

يعمل هذا لأنه في JavaScript ، true && expression يقيم دائما ل expressionو و false && expression يقيم دائما ل false.

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

الحلقات

حالة الاستخدام المتكرر الأخرى هي تقديم قائمة بالعناصر المكررة. مع JSX ، لا يمكنك استخدام ملفات for الحلقات ، ولكن يمكنك التكرار عبر مصفوفة باستخدام طريقة مخطط المصفوفة (). على سبيل المثال ، إليك طريقة بسيطة لعرض قائمة بالعناصر:

const items = [
  'Bread',
  'Milk',
  'Eggs'
]

const element = <div>
  Grocery list:
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
</div>;

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

انظر القلم
jsx- خريطة
بواسطة SitePoint (تضمين التغريدة)
على كود.

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

مكونات مخصصة

القسمان القادمان أكثر تحديدًا لـ React ، ولكن لا يزال من المفيد التحدث من خلالهما للحصول على فهم جيد لكيفية انسجام كل شيء معًا.

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

ملاحظة: من خلال اصطلاحات التسمية في React ، يجب أن تبدأ العناصر المخصصة بحرف كبير ، لتمييزها عن العناصر القياسية.

function FunctionComponent() {
  return <h2>This is a function component.</h2>
}

class ClassComponent extends React.Component {
  render() {
    return <h2>This is a class component.</h2>
  }
}

const element = <div>
  <FunctionComponent />
  <ClassComponent />
</div>;

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

انظر القلم
jsx- مكونات مخصصة
بواسطة SitePoint (تضمين التغريدة)
على كود.

التعامل مع الحدث

يوفر JSX طريقة لربط أحداث مشابهة لـ HTML العادي. يمكنك تحديد خاصية على عنصر (نفس أسماء الخصائص مثل HTML العادي ولكن camelCased) وتمرير وظيفة كقيمة. في React ، ستتلقى وظيفة رد الاتصال ملف كائن SyntheticEvent كمعامل أول ، وهو عبارة عن تجريد أعلى كائن حدث المتصفح العادي:

function handleEvent(e) {
  alert('Button clicked!');
  console.log(e);
}

const element = <button onClick={handleEvent}>Test click</button>;

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

انظر القلم
شبيبة الأحداث
بواسطة SitePoint (تضمين التغريدة)
على كود.

ملاحظة: انتبه إلى قيمة this عند المرور حول معالجات الأحداث. عندما تحدد المكون الخاص بك على أنه فئة ES6 ، فإنك عادة ما تحدد معالجات الأحداث كطرق للفئة. الأساليب التي تمررها القيمة ليست ملزمة بملف this القيمة ، لذلك للحفاظ على السياق الحالي ، تحتاج إلى ربطهم صراحة. نرى توثيق React لمزيد من التفاصيل حول كيفية القيام بذلك.

ليس فقط للرد

JSX مع React هي أشياء رائعة جدًا. ولكن ماذا لو كنت تستخدم إطار عمل أو مكتبة أخرى ، ولكنك لا تزال ترغب في استخدامها؟ حسنًا ، أنت محظوظ – لأن JSX تقنيًا غير مرتبطة بـ React. لا يزال مجرد DSL أو “السكر النحوي” ، تذكر؟ فيما يلي بعض المشاريع الأخرى التي تستخدم JSX:

  • يمكنك استخدام JSX في Vue’s render تعمل بمساعدة @ vue / babel-preset-jsx إعداد بابل المسبق.
  • بعض الأطر الأخرى التي تضع نفسها على أنها بدائل متوافقة مع React مثل قبل التصرف، نار كبيرة أو تطبيق Hyperapp استخدم JSX لطبقة العرض الخاصة بهم.
  • MDX يسمح لك باستخدام JSX في ملفات Markdown لإضافة عناصر JS تفاعلية.

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

المصدر

المادة السابقةكيفية اختبار توافق تصميم الويب سريع الاستجابة عبر المستعرضات
المقالة القادمةأيهما أفضل لبناء موقع WordPress Vs. Wix

ترك الرد

من فضلك ادخل تعليقك
من فضلك ادخل اسمك هنا