الليلة السندوش في رياكت وبتكلم عن الشروط والاستخدام الامثل والافضل ,وهي اربعة انواع في الاستخدام Conditional في رياكت او في جافا اسكربت عامة بس هنا بتكلم عن رياكت

الطريقة الاولي #

ده الطريقة العادية للشرط باستخدام if و else لو اتحقق الشرط الاول وكان بي true نفذ لي كده لو ما اتحقق وكان بي false نفذ كده

ملاحظة #

بسيطة هنا حابي انوه انو else if في jsx في رياكت م بتشتغل

import React, { useState } from 'react'

export default  const Conditional = ()=>  {
    const [login, setLogin] = useState(false)
    //  method 1
    if (login) {
        return <h2> wel come abobaker </h2>
    } else {
        return <h2> welcome guest</h2>
    }

}

الطريقة التانية #

وده الطريقة الشوية افضل من الطريقة الاولي انك بتستخد متغير تخزن فيو ناتج الشرط بعديها بترجع المتغير ده

طبعا في حالات افضل تستخدم فيها الطريقة ده كمثال لو عاوز تعمل تنسيق معين مثلا لو كان الزول ده حاليا نشط خلي العلامة بتاعت الحالة تاخد كلاس معين لو ما نشط خليها تاخد الكلاس التاني

import React, { useState } from 'react'

export default  const Conditional = ()=>  {
    const [login, setLogin] = useState(false)
    //  method 2
    let message;
    if (login) {
        message = <h2> welcome beko </h2>
    } else {
        message = <h2> welcome guest </h2>
    }
    return <div> {message} </div>

}

الطريقة التالتة #

وده الطريقة المختصرة للif وهي المحبذة جدا وبتخلي كود clean ومقروء نفس الطريقة الاولي ولكن باختصار بتكتب الشرط وبتخت علامة الاستفهام لو اتحقق نفذ لو ما تحقق بتخت علامة النقطتبن فوق بعض بمعني والا نفذ كذا

import React, { useState } from 'react'

export default  const Conditional = ()=>  {
    const [login, setLogin] = useState(false)
    //  method 3
    return login ? <h2> welcome beko</h2> : <h2> wel come guest</h2>

}

    // Abobaker Hilal

الطريقة الرابعة #

وده الابسط والان ظابطة ههه علي قولنا صديقي صديق هنا بستخدم المعاملات وخاصة && بمعني لو الشرط ده صح حقق كذا وبس والسلام عليكم

ملاحظة #

هي لا ترجع شي في حالة عدم صح الشرط هي بترجع فقط في حالة الشرط صح وده بحكم استخدامها يعني م بستخدمها في اي حاجه لا بستخدم في حالة عاوز تكون الحاجة ده مثلا صح بس او ف حالة خطا بس بحيث لا تجتمع الحالتين

import React, { useState } from 'react'

export default  const Conditional = ()=>  {
    const [login, setLogin] = useState(false)
    //  method 4
    return login && <h2> wel come beko </h2>
}

    // Abobaker Hilal