التقديم الشرطي (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

-
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++) ...
قراءة المزيد

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

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

ما هي 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 : إذا كانت البيانات التي تحتاجها المكونات تأتي من مكون رئيسي أو تحتاج إلى أن تك...
قراءة المزيد

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

-
  سأقدم لك مثالاً بسيطاً يوضح كيفية استخدام  Context ،  createContext ، و  useContext  في React. سنقوم بإنشاء ثلاثة مكونات مستقلة:  App ،  UserProvider ، و  UserProfile . 1. إنشاء السياق (Context) أولاً، سنقوم بإنشاء سياق جديد باستخدام  createContext . // UserContext.js import { createContext } from 'react' ; // إنشاء سياق جديد const UserContext = createContext( null ); export default UserContext; 2. المزود (Provider) سنقوم بإنشاء مكون  UserProvider  الذي سيستخدم  UserContext.Provider  لتغليف المكونات التي تحتاج إلى الوصول إلى البيانات. // UserProvider.js import React, { useState } from 'react' ; import UserContext from './UserContext' ; const UserProvider = ( { children } ) => {   // حالة المستخدم   const [user, setUser] = useState({ name: 'John Doe' , age: 30 });   return (     // تغليف المكونات بـ UserContext.Provider وتمرير قيمة المستخدم     <UserContext.Provider va...
قراءة المزيد

مثال لتمرير مصفوفة عن طريق useState

-
مثال بسيط باستخدام React و useState لتمرير مصفوفة من الفواكه وعرضها في قائمة. كما سيمكن المستخدم من إضافة عناصر جديدة إلى القائمة. import React, { useState } from 'react' ; function FruitList () {   // تعريف حالة الفواكه   const [fruits, setFruits] = useState([ 'تفاح' , 'موز' , 'برتقال' ]);   const [newFruit, setNewFruit] = useState( '' );   // دالة لإضافة فاكهة جديدة إلى القائمة   const addFruit = () => {     if (newFruit.trim() !== '' ) {       setFruits([...fruits, newFruit]);       setNewFruit( '' ); // إعادة تعيين الحقل النصي     }   };   return (     <div>       <h1> قائمة الفواكه </h1>       <ul>         {fruits.map((fruit, index) => (           <li key= {index} > {fruit} </li>         ))}       </ul>       ...
قراءة المزيد

ما هو 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 ال...
قراءة المزيد

المكونات (Components) في React

-
  المكونات (Components) في React المكونات  هي اللبنات الأساسية لأي تطبيق React. يمكن اعتبارها كقطع صغيرة من واجهة المستخدم التي يمكن إعادة استخدامها وتجميعها لإنشاء واجهات مستخدم معقدة. كيفية استخدام المكونات إنشاء مكون : يمكنك إنشاء مكون كدالة أو كصف. إليك مثال لمكون كدالة: function Welcome ( props ) {   return <h1> مرحبًا، {props.name} </h1> ; } استخدام المكون : يمكنك استخدام المكون داخل مكونات أخرى: function App () {   return (     <div>       <Welcome name="علي" />       <Welcome name="فاطمة" />     </div>   ); } فوائد المكونات إعادة الاستخدام : يمكنك استخدام نفس المكون في أماكن متعددة في تطبيقك، مما يقلل من تكرار الكود. التنظيم : تقسيم واجهة المستخدم إلى مكونات صغيرة يجعل الكود أكثر تنظيماً وسهولة في الصيانة. الاختبار : يمكن اختبار كل مكون بشكل مستقل، مما يسهل اكتشاف الأخطاء وإصلاحها. الأداء : React يقوم بتحديث الأجزاء الضرورية فقط من واجهة المستخدم، مما يحسن الأداء. ا...
قراءة المزيد

مفهوم Rendering (التصيير) في React

-
  في React، مفهوم   Rendering   (التصيير) يشير إلى عملية تحويل مكونات React إلى عناصر DOM يمكن عرضها على الشاشة. إليك شرحًا مبسطًا: التصيير الأولي : عند إنشاء مكون React، يتم استدعاء الدالة  render()  الخاصة به. هذه الدالة تأخذ البيانات المدخلة (props) وتعيد ما يجب عرضه على الشاشة باستخدام JSX. على سبيل المثال: class MyComponent extends React . Component {   render() {     return <h1> مرحبًا بالعالم! </h1> ;   } } يتم تحويل JSX إلى عناصر DOM فعلية بواسطة React DOM. التحديثات وإعادة التصيير : عندما تتغير حالة المكون (state) أو خصائصه (props)، يقوم React بإعادة استدعاء الدالة  render()  لتحديث العرض. React يستخدم تقنية تُسمى  Virtual DOM  لمقارنة الشجرة الحالية مع الشجرة الجديدة وتحديث فقط الأجزاء التي تغيرت، مما يجعل العملية أكثر كفاءة. التصيير الشرطي : يمكنك استخدام التصيير الشرطي لعرض مكونات مختلفة بناءً على حالة معينة. render() {   const isLoggedIn = this .state.isLoggedIn;   return (   ...
قراءة المزيد

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

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

10 أمثلة على استخدام props في React

-
  1. تمرير نص كـ Prop function Greeting ( props ) {   return <h1> Hello, {props.name}! </h1> ; } // استخدام المكون <Greeting name= "Alice" /> شرح:  هنا نمرر النص “Alice” كـ  prop  إلى مكون  Greeting  ليظهر النص “Hello, Alice!”. 2. تمرير عدد كـ Prop function Age ( props ) {   return <p> You are {props.age} years old. </p> ; } // استخدام المكون <Age age={ 25 } /> شرح:  نمرر العدد 25 كـ  prop  إلى مكون  Age  ليظهر النص “You are 25 years old.”. 3. تمرير كائن كـ Prop function User ( props ) {   return <p> {props.user.name} is {props.user.age} years old. </p> ; } // استخدام المكون <User user={{ name: 'Bob' , age: 30 }} /> شرح:  نمرر كائن يحتوي على اسم وعمر المستخدم كـ  prop  إلى مكون  User . 4. تمرير مصفوفة كـ Prop function ItemList ( props ) {   return (     <ul>       {props.items.map((item, index) =>...
قراءة المزيد