لماذا لا يظهر مكون React الترحيبي البسيط؟ دليل شامل لحل المشكلة

مقدمة: لماذا لا يظهر مكون React الترحيبي البسيط؟

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

 const mainIntro = props => (
  <div id = "quote-box" >
  <h1 > Hunter x Hunter Quotes </ h1 >
  <div id = "text" > "When I say it doesn't hurt me, that means I can bear it." </ div >
  <div id = "author" > - Killua Zoldyck </ div >
  <button id = "new-quote" > Next Quote </ button >
  <a href = "#" id = "tweet-quote" target = "_blank" > Tweet this quote </ a >
  </ div >
 )
 export default mainIntro;

وتريد استيراده إلى الملف App.js:

 import mainIntro from './components'
 class App extends React . Component {
 render(){
 return (
  <mainIntro />
 );
 }
 }
 const mainNode = document .getElementById( "quoter" );
 ReactDOM.render(
  <App /> ,mainNode);

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

قواعد تسمية المكونات في React: خطوة أساسية للتصحيح

أهمية الأحرف الكبيرة في JSX

بالنسبة لأي شخص على دراية بالبرمجة الشيئية (Object Oriented Programming)، من الشائع تسمية كل صنف (class) بحرف كبير في البداية. على سبيل المثال، قد يُسمى الصنف الذي يصف شخصاً Person للإشارة إلى أنه صنف. في React، التي تستخدم JSX بدلاً من JavaScript العادية، يشير الحرف الأول من الوسم (tag) إلى نوع العنصر الذي يمثله. تُستخدم الأحرف الكبيرة الأولى لتحديد مكونات React، لذلك يجب أن يُسمى المكون mainIntro بدلاً من ذلك MainIntro:

 const MainIntro = props => (
  <div id = "quote-box" >
  <h1 > Hunter x Hunter Quotes </ h1 >
  <div id = "text" > "When I say it doesn't hurt me, that means I can bear it." </ div >
  <div id = "author" > - Killua Zoldyck </ div >
  <button id = "new-quote" > Next Quote </ button >
  <a href = "#" id = "tweet-quote" target = "_blank" > Tweet this quote </ a >
  </ div >
 )
 export default MainIntro;

تسمية الملفات والمكونات: أفضل الممارسات

بينما يمكن أن يظل اسم الملف mainIntro.js، فمن الممارسات الجيدة أيضاً كتابة الحرف الأول منه بحرف كبير (MainIntro.js). لاحقاً، عند تصفح محتويات الدليل (directory)، ستتمكن بسرعة من تمييز أن الملف MainIntro.js يحتوي على مكون React. الآن، يجب أن يبدو ملف App.js على النحو التالي بعد التعديل:

 import MainIntro from './components/MainIntro.js' ;
 class App extends React . Component {
 render(){
 return (
  <MainIntro />
 );
 }
 }
 const mainNode = document .getElementById( "quoter" );
 ReactDOM.render(
  <App /> ,mainNode);

كيفية تثبيت React: فهم طرق الإعداد المختلفة

الاستيراد المحلي مقابل CDN

هناك طريقتان رئيسيتان لاستخدام React. أولاً، تثبيتها وإعدادها محلياً، غالباً من خلال أداة create-react-app. ثانياً، عبر شبكة توصيل المحتوى (CDN). قد تكون لاحظت في الأمثلة السابقة أن مقتطفات التعليمات البرمجية لا تتضمن استيراد React إلى المشروع باستخدام import React from 'react';. سيؤدي هذا إلى ظهور خطأ إذا كنت تعمل على React محلياً. ومع ذلك، إذا كنت تستخدم CDN لتحميل React، فستكون متاحة بشكل عام (globally) ولن تحتاج إلى استيرادها بالطريقة المذكورة أعلاه.

فهم دوال السهم (Arrow Functions) في JavaScript ES6

بناء المكونات الوظيفية بشكل صحيح

قبل التعمق في React، من الضروري أن يكون لديك فهم قوي للغة JavaScript، وخاصة بناء جملة ES6. دعنا نلقي نظرة أخرى على مكون MainIntro:

 const MainIntro = props => (
  <div id = "quote-box" >
  <h1 > Hunter x Hunter Quotes </ h1 >
  <div id = "text" > "When I say it doesn't hurt me, that means I can bear it." </ div >
  <div id = "author" > - Killua Zoldyck </ div >
  <button id = "new-quote" > Next Quote </ button >
  <a href = "#" id = "tweet-quote" target = "_blank" > Tweet this quote </ a >
  </ div >
 )
 export default MainIntro;

إذا نظرت عن كثب إلى السطر الأول، ستلاحظ وجود خطأ في بناء الجملة (syntax error): const MainIntro = props => (

أنت تقوم بكتابة مكون وظيفي (functional component)، وهي عادةً دوال JavaScript بسيطة يمكنها قبول الخصائص (props) كوسيط (argument) وإرجاع JSX صالح. بالطبع، يجب أن يكون بناء الجملة صحيحاً لكي يتم الإرجاع بشكل سليم. يمكن كتابة دوال السهم (arrow functions) بعدة طرق، ولكن لهذا المثال، ستحتاج إلى إضافة الأقواس المتعرجة ({}) والتأكد من إرجاع JSX من المكون نفسه:

 const MainIntro = props => {
 return (
  <div id="quote-box">
  //... rest of the code
  </div>
 );
 }

بعد تطبيق جميع التغييرات المذكورة أعلاه، يجب أن يظهر المكون الخاص بك الآن بشكل صحيح. على الرغم من أن التمييز الرئيسي بين المكونات الوظيفية (functional components) ومكونات الفئات (class components) في React كان يكمن في أن الأولى كانت “بلا حالة” (stateless) بينما الثانية كانت “ذات حالة” (stateful)، فقد طمست React Hooks هذه الفروقات. يمكنك قراءة المزيد حول كلا النوعين من المكونات في هذه النظرة العامة وهذا التعمق في المكونات الوظيفية مع React Hooks.

الخلاصة التقنية

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