بناء واجهة المستخدم باستخدام المكونات

المفاهيم الأساسية لـ React

هناك ثلاثة مفاهيم أساسية في React تحتاج إلى التعرف عليها لبدء بناء تطبيقات React. وهي:

• المكونات (Components)
• الخصائص (Props)
• الحالة (State)

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

المكونات

يمكن تقسيم واجهات المستخدم إلى كتل بناء أصغر تسمى مكونات.

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

تتيح لك هذه الوحدات النمطية الحفاظ على الكود بشكل أفضل مع نموه لأنه يمكنك إضافة وتحديث وحذف المكونات دون التأثير على بقية التطبيق.

الشيء الجميل في مكونات React هو أنها مجرد JavaScript. دعونا نرى كيف يمكنك كتابة مكون React من منظور JavaScript:

إنشاء المكونات

في React، المكونات هي دوال. داخل علامة script الخاصة بك، أنشئ دالة جديدة تسمى header:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

المكون هو دالة تُرجع عناصر واجهة المستخدم. داخل عبارة return للدالة، يمكنك كتابة JSX:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

لعرض هذا المكون في DOM، قم بتمريره كوسيطة أولى في طريقة root.render():

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

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

أولاً، يجب كتابة مكونات React بحروف كبيرة لتمييزها عن HTML و JavaScript العاديين:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// كتابة مكون React بحروف كبيرة
root.render(Header);

ثانيًا، تستخدم مكونات React بنفس الطريقة التي تستخدم بها علامات HTML العادية، باستخدام الأقواس الزاوية <>:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

إذا حاولت تشغيل الكود في متصفحك مرة أخرى، فسترى التغييرات.

تداخل المكونات

عادةً ما تتضمن التطبيقات محتوى أكثر من مكون واحد. يمكنك تداخل مكونات React داخل بعضها البعض كما تفعل مع عناصر HTML العادية.

في مثالك، أنشئ مكونًا جديدًا يسمى HomePage:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

ثم قم بتداخل مكون <Header> داخل المكون الجديد <HomePage>:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* تداخل مكون Header */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

شجرة المكونات

يمكنك الاستمرار في تداخل مكونات React بهذه الطريقة لتشكيل أشجار المكونات.

على سبيل المثال، يمكن أن يحتوي مكون HomePage الرئيسي على مكونات Header وArticle وFooter. ويمكن أن يحتوي كل من هذه المكونات بدوره على مكونات فرعية خاصة به وهكذا. على سبيل المثال، يمكن أن يحتوي مكون Header على مكونات Logo وTitle وNavigation.

يسمح لك هذا التنسيق النمطي بإعادة استخدام المكونات في أماكن مختلفة داخل تطبيقك.

في مشروعك، نظرًا لأن <HomePage> أصبح الآن المكون الرئيسي، يمكنك تمريره إلى طريقة root.render():

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

موارد إضافية:

• المكون الأول
• استيراد وتصدير المكونات