التقديم الشرطي (Conditional Rendering) في React

-

 التقديم الشرطي (Conditional Rendering) في React هو عملية عرض مكونات أو عناصر واجهة المستخدم بناءً على شروط معينة. هذا يسمح بإنشاء واجهات مستخدم ديناميكية تتكيف مع التغيرات في البيانات وتفاعلات المستخدم.



طرق التقديم الشرطي في React

  1. استخدام جملة if...else: يمكنك استخدام جملة if...else لتحديد ما يجب عرضه بناءً على شرط معين. على سبيل المثال:


function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}


المشغل الثلاثي (Ternary Operator): المشغل الثلاثي هو طريقة مختصرة لكتابة جمل الشرط. على سبيل المثال:

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}


المشغل المنطقي &&: يمكنك استخدام المشغل المنطقي && لعرض عنصر فقط إذا كان الشرط صحيحًا. على سبيل المثال:


function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}


أهمية التقديم الشرطي في React

  1. تحسين تجربة المستخدم: يسمح التقديم الشرطي بإنشاء واجهات مستخدم تتفاعل بشكل ديناميكي مع المستخدم، مما يحسن من تجربة المستخدم.
  2. تنظيم الكود: يساعد في تنظيم الكود وجعله أكثر قابلية للقراءة والصيانة.
  3. التكيف مع البيانات: يمكن للتقديم الشرطي أن يتكيف مع التغيرات في البيانات بشكل سلس، مما يجعل التطبيقات أكثر مرونة.

تعليقات

إرسال تعليق

المشاركات الشائعة

تطبيق التنبيهات التفاعلية باستخدام React

-
صورة
  إذا كنت تبحث عن طريقة متميزة لإضافة تنبيهات تفاعلية إلى تطبيقك، فإن هذا المشروع يقدم لك الحل المثالي. يعتمد هذا المشروع على مكتبة React ويستفيد من مكتبة Bootstrap لتوفير تنسيقات جاهزة وأنيقة. دعونا نستعرض كيفية بناء هذا التطبيق خطوة بخطوة. مقدمة تطبيق التنبيهات هو مكون بسيط ولكنه فعال في تحسين تجربة المستخدم من خلال عرض رسائل تنبيهية يمكن إغلاقها يدويًا أو تختفي تلقائيًا بعد مدة زمنية محددة. يمكن تخصيص التنبيهات لتظهر بأنواع مختلفة مثل "Primary"، "Secondary"، و "Success"، مما يوفر مرونة في الاستخدام. المكونات الرئيسية App.js : يقوم باستيراد ملفات التنسيق والمكونات الأساسية مثل AlertApp . يعرض مكون AlertApp في الصفحة الرئيسية للتطبيق. Title.js : مكون يعرض عنوان النص الممرر إليه، مع قيمة افتراضية "Title" إذا لم يتم تمرير أي نص. Button.js : مكون يعرض زر مع أيقونة ونص، مع إمكانية تمرير دالة تنفذ عند الضغط على الزر. AlertApp.js : المكون الرئيسي الذي يعرض مجموعة من التنبيهات المختلفة. يستخدم مكونات Title و Alert لعرض العنوان والتنبيهات على التوالي...
قراءة المزيد

شرح Object Destructuring

-
  بالتأكيد!   Object destructuring   هي ميزة في JavaScript تُستخدم لاستخراج القيم من الكائنات (objects) وتعيينها إلى متغيرات بطريقة مختصرة وواضحة. في React، تُستخدم هذه الميزة بشكل شائع عند التعامل مع   props   و state   لتحسين قراءة الكود وجعله أكثر وضوحًا. مثال على Object Destructuring في React لنفترض أن لدينا مكون React يستقبل بعض الخصائص (props): const MyComponent = ( props ) => {   const { name, age, location } = props;   return (     <div>       <h1> {name} </h1>       <p> Age: {age} </p>       <p> Location: {location} </p>     </div>   ); }; في هذا المثال، قمنا باستخدام  object destructuring  لاستخراج القيم  name  و age  و location  من  props  مباشرةً، بدلاً من الوصول إليها باستخدام  props.name  و props.age  و props.location . فوائد Object Destructuring تحسين قراءة...
قراءة المزيد

تطبيق توليد لون عشوائي للصفحة في React

-
import React from 'react' ; // استيراد مكتبة React import Title from '../Title' ; // استيراد مكون Title من ملف آخر // مكون RandomColor لتغيير ألوان الخلفية عند النقر على الأزرار export default function RandomColor () {   // دالة handleClick لتغيير لون الخلفية ولون الزر الذي تم النقر عليه   function handleClick ( e ) {     console .log(getRandomColo()); // طباعة اللون العشوائي في الكونسول     let body = document .querySelector( "body" ); // الحصول على عنصر الجسم في الصفحة     body.style.background = getRandomColo(); // تعيين لون الخلفية للجسم بلون عشوائي     e.target.style.background = getRandomColo(); // تعيين لون خلفية الزر الذي تم النقر عليه بلون عشوائي   }   // دالة getRandomColo لتوليد لون عشوائي   function getRandomColo () {     let letters = '0123456789ABCDEF' ; // حروف وأرقام اللون الست عشري     let color = "#" ; // بداية الكود اللوني     for ( let i = 0 ; i < 6 ; i++) ...
قراءة المزيد

ما هو JSX في React؟

-
  ما هو JSX في React؟ JSX  (JavaScript XML) هو امتداد لصياغة JavaScript يسمح لك بكتابة عناصر شبيهة بـ HTML داخل JavaScript. يتم تحويل JSX إلى استدعاءات دوال JavaScript بواسطة أدوات مثل Babel، مما يجعل كتابة واجهات المستخدم أكثر سهولة ووضوحًا. كيفية استخدام JSX إليك مثال بسيط لاستخدام JSX: const element = <h1> مرحبًا، عالم! </h1> ; في هذا المثال،   element   هو عنصر React يتم إنشاؤه باستخدام صياغة JSX. يمكن تضمين تعابير JavaScript داخل JSX باستخدام الأقواس المعقوفة   {} : const name = 'علي' ; const element = <h1> مرحبًا، {name}! </h1> ; فوائد استخدام JSX وضوح الكود : يجعل الكود أكثر وضوحًا وسهولة في القراءة، حيث يمكنك رؤية هيكلية HTML مباشرة داخل JavaScript. قوة JavaScript : يمكنك استخدام تعابير JavaScript داخل JSX، مما يمنحك مرونة كبيرة في بناء واجهات المستخدم. أخطاء أقل : يساعدك JSX على اكتشاف الأخطاء في وقت مبكر بفضل الرسائل التحذيرية المفيدة التي يوفرها. امتداد الملفات: js أو jsx؟ .js : يمكن استخدام هذا الامتداد لملفات JavaScript ال...
قراءة المزيد

متى بدأت مواقع الويب؟

-
بدأت فكرة مواقع الويب في أواخر الثمانينات عندما اقترح تيم بيرنرز لي، عالم الكمبيوتر البريطاني، نظامًا لتبادل المعلومات عبر الإنترنت. كان الهدف هو تسهيل الوصول إلى المعلومات وتبادلها بين الباحثين. في عام 1990، أنشأ بيرنرز لي أول موقع ويب في العالم، والذي كان عبارة عن صفحة نصية بسيطة تحتوي على روابط تشعبية. هذا الموقع كان نقطة البداية لعصر جديد من التواصل الرقمي. مع مرور الوقت، تطورت تقنيات الويب وأصبحت المواقع أكثر تفاعلية وجاذبية. في منتصف التسعينات، ظهرت متصفحات الويب مثل Netscape Navigator وInternet Explorer، مما ساهم في انتشار استخدام الإنترنت. في أواخر التسعينات وأوائل الألفية الجديدة، شهدت مواقع الويب تطورًا كبيرًا مع ظهور تقنيات مثل HTML، CSS، وJavaScript. هذه التقنيات سمحت بإنشاء مواقع أكثر تعقيدًا وتفاعلية. مع تطور تقنيات الويب، ظهرت منصات إدارة المحتوى مثل WordPress وJoomla، مما جعل إنشاء وإدارة المواقع أسهل وأكثر فعالية. هذه المنصات ساعدت في نشر الويب بين المستخدمين غير التقنيين. في العقد الأخير، شهدت مواقع الويب تطورًا هائلًا مع ظهور تقنيات مثل HTML5 وCSS3، والتي سمحت بإنشاء...
قراءة المزيد

شرح DOM

-
  DOM هو اختصار لـ  Document Object Model ، والذي يُترجم إلى  نموذج كائن المستند . نموذج كائن المستند (DOM)  هو واجهة برمجية تمثل هيكلية المستندات على الويب. عندما يتم تحميل صفحة ويب، يقوم المتصفح بإنشاء نموذج كائن المستند لهذه الصفحة، مما يسمح للبرامج والنصوص البرمجية بالوصول إلى محتوى الصفحة وتحديثه ديناميكيًا. يمكنك تخيل DOM كشجرة تحتوي على عناصر HTML كعقد. كل عنصر في الصفحة، مثل العناوين، الفقرات، الصور، والروابط، يتم تمثيله ككائن يمكن التفاعل معه. باستخدام DOM، يمكن للمطورين تغيير النصوص، الأنماط، وإضافة أو إزالة عناصر من الصفحة. ببساطة، DOM هو الطريقة التي يمكن بها للمتصفح والبرامج التفاعل مع محتوى صفحة الويب وتحديثه دون الحاجة إلى إعادة تحميل الصفحة بالكامل
قراءة المزيد

ما هي Props في React؟

-
  ما هي Props؟ Props  هي اختصار لكلمة “Properties” وهي وسيلة لتمرير البيانات من مكون إلى آخر في React. تُستخدم props لتمكين المكونات من الوصول إلى بيانات مخصصة وقيم ومعلومات أخرى. كيفية استخدام Props لتمرير props إلى مكون، تقوم ببساطة بإضافتها كسمات عند استدعاء المكون. على سبيل المثال: function Greeting ( props ) {   return <h1> Hello, {props.name}! </h1> ; } function App () {   return <Greeting name= "Alice" /> ; } في هذا المثال، يتم تمرير قيمة  name  إلى مكون  Greeting ، والذي يستخدمها لعرض رسالة ترحيب مخصصة. المشكلة التي حلتها Props قبل ظهور props، كان من الصعب إعادة استخدام المكونات بنفس الطريقة. كان يجب عليك كتابة نفس الشيفرة مرارًا وتكرارًا مع تغييرات طفيفة. Props حلت هذه المشكلة عن طريق تمكين المكونات من أن تكون ديناميكية وقابلة لإعادة الاستخدام بسهولة. هل الأفضل استخدام Props أو البيانات من ملف بيانات مستقل؟ يعتمد ذلك على الحالة: استخدام Props : إذا كانت البيانات التي تحتاجها المكونات تأتي من مكون رئيسي أو تحتاج إلى أن تك...
قراءة المزيد

مفهوم إعادة الاستخدام (Reusability)

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

المشغل الثلاثي (Ternary Operator)

-
  المشغل الثلاثي (Ternary Operator) في JavaScript هو طريقة مختصرة لكتابة جمل الشرط   if...else . يتم استخدامه بشكل متكرر في React.js لتقديم عناصر JSX بناءً على شروط معينة. الصيغة الأساسية للمشغل الثلاثي هي: condition ? expressionIfTrue : expressionIfFalse استخدام المشغل الثلاثي في JSX في React، يمكنك استخدام المشغل الثلاثي لتقديم عناصر JSX بشكل مشروط. على سبيل المثال: const isLoggedIn = true ; return (   <div>     {isLoggedIn ? <p> Welcome back! </p> : <p> Please log in. </p> }   </div> ); في هذا المثال، إذا كانت قيمة  isLoggedIn  تساوي  true ، سيتم عرض النص “Welcome back!”، وإذا كانت  false ، سيتم عرض النص “Please log in.” أهمية المشغل الثلاثي في React الوضوح والاختصار : يساعد المشغل الثلاثي في كتابة كود أكثر وضوحًا واختصارًا مقارنة بجمل الشرط التقليدية  if...else . تحسين الأداء : يمكن أن يكون استخدام المشغل الثلاثي أكثر كفاءة في بعض الحالات لأنه يقلل من عدد الأسطر البرمجية ويجعل الكود أكثر قا...
قراءة المزيد

مثال بسيط يوضح كيفية استخدام createContext و useContext لتمرير البيانات بين المكونات في React

-
  الخطوات الأساسية إنشاء السياق  باستخدام  createContext . توفير قيمة السياق  باستخدام  Provider . قراءة قيمة السياق  باستخدام  useContext . مثال عملي 1. إنشاء السياق أولاً، نقوم بإنشاء سياق جديد باستخدام  createContext . // ThemeContext.js import { createContext } from 'react' ; export const ThemeContext = createContext( 'light' ); 2. توفير قيمة السياق نقوم بلف المكونات في  Provider  لتوفير قيمة السياق. // App.js import React, { useState } from 'react' ; import { ThemeContext } from './ThemeContext' ; import Page from './Page' ; function App () {   const [theme, setTheme] = useState( 'dark' );   const toggleTheme = () => {     setTheme(( prevTheme ) => (prevTheme === 'dark' ? 'light' : 'dark' ));   };   return (     <ThemeContext.Provider value= {{ theme, toggleTheme }}>       <Page />     </ThemeContext.Provider>   ); } expor...
قراءة المزيد