Reactالعرض المشروط

// UserGreeting هنا قمنا بتعريف دالة تمثل مكوّن إسمه
// بداخل هذا المكون سيتم عرض رسالة ترحيب بإسم المستخدم
function UserGreeting(props) {
    return <p>Hello {props.user}, welcome back!</p>;
}

// يمكن الوصول إليه من خارج هذا الملف UserGreeting هنا قمنا بجعل المكون
export default UserGreeting;

// GuestGreeting هنا قمنا بتعريف دالة تمثل مكوّن إسمه
// بداخل هذا المكون سيتم عرض رسالة ترحيب و الطلب من المستخدم أن يسجل دخوله
function GuestGreeting() {
    return <p>Hello, please login!</p>;
}

// يمكن الوصول إليه من خارج هذا الملف GuestGreeting هنا قمنا بجعل المكون
export default GuestGreeting;

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;

    // true تساوي isLogged هنا قمنا بوضع شرط يحدد المحتوى الذي سيتم عرضه إذا كانت قيمة
    if (isLogged) {
        return <p>Hello, welcome back!</p>;
    }
    // true لا تساوي isLogged هنا قمنا بوضع شرط يحدد المحتوى الذي سيتم عرضه إذا كانت قيمة
    else {
        return <p>Hello, please login!</p>;
    }
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// GuestGreeting و المكون UserGreeting هنا قمنا بتضمين المكون
import UserGreeting from "./components/UserGreeting";
import GuestGreeting from "./components/GuestGreeting";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;
    // 'Mhamad' و قيمته user هنا قمنا بتعريف متغير إسمه 
    let user = 'Mhamad';

    // true تساوي isLogged هنا قمنا بوضع شرط و هو إذا كانت قيمة
    // <UserGreeting> سيتم عرض محتوى المكون
    if (isLogged) {
        return <UserGreeting user={user} />;
    }
    // true لا تساوي isLogged و هنا قمنا بوضع شرط و هو إذا كانت قيمة
    // <GuestGreeting> سيتم عرض محتوى المكون 
    else {
        return <GuestGreeting />;
    }
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;

    // من أجل تحديد المحتوى الذي سيتم عرضه isLogged هنا قمنا بفحص قيمة
    switch (isLogged) {
        // سيتم عرض المحتوى التالي true تساوي isLogged إذا كانت قيمة
        case true:
            return <p>Hello, welcome back!</p>;
        // سيتم عرض المحتوى التالي false تساوي isLogged إذا كانت قيمة
        case false:
            return <p>Hello, please login!</p>;
    }
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// GuestGreeting و المكون UserGreeting هنا قمنا بتضمين المكون
import UserGreeting from "./components/UserGreeting";
import GuestGreeting from "./components/GuestGreeting";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;
    // 'Mhamad' و قيمته user هنا قمنا بتعريف متغير إسمه 
    let user = 'Mhamad';

    // من أجل تحديد المحتوى الذي سيتم عرضه isLogged هنا قمنا بفحص قيمة
    switch (isLogged) {
        //  <UserGreeting> سيتم عرض محتوى المكون true تساوي isLogged إذا كانت قيمة
        case true:
            return <UserGreeting user={user} />;
        //  <GuestGreeting> سيتم عرض محتوى المكون false تساوي isLogged إذا كانت قيمة
        case false:
            return <GuestGreeting />;
    }
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;

    // من أجل تحديد المحتوى الذي سيتم عرضه isLogged هنا قمنا بفحص قيمة
    // سيتم عرض المحتوى الموضوع بعد الرمز ؟ true تساوي isLogged إذا كانت قيمة
    // : سيتم عرض المحتوى الموضوع بعد الرمز false تساوي isLogged و إذا كانت قيمة
    return (
        <>
            { isLogged ? <p>Hello, welcome back!</p> : <p>Hello, please login!</p> }
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// GuestGreeting و المكون UserGreeting هنا قمنا بتضمين المكون
import UserGreeting from "./components/UserGreeting";
import GuestGreeting from "./components/GuestGreeting";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;
    // 'Mhamad' و قيمته user هنا قمنا بتعريف متغير إسمه 
    let user = 'Mhamad';

    // من أجل تحديد المحتوى الذي سيتم عرضه isLogged هنا قمنا بفحص قيمة
    // <UserGreeting> سيتم عرض محتوى المكون true تساوي isLogged إذا كانت قيمة
    // <GuestGreeting> سيتم عرض محتوى المكون false تساوي isLogged و إذا كانت قيمة
    return (
        <>
            { isLogged ? <UserGreeting user={user} /> : <GuestGreeting /> }
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;

    // من أجل تحديد المحتوى الذي سيتم عرضه isLogged هنا قمنا بفحص قيمة
    // سيتم عرض المحتوى true تساوي isLogged التعبير الشرطي الأول معناه إن كانت قيمة
    // سيتم عرض المحتوى true لا تساوي isLogged التعبير الشرطي الثاني معناه إن كانت قيمة
    return (
        <>
            { isLogged && <p>Hello, welcome back!</p> }
            { !isLogged && <p>Hello, please login!</p> }
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// GuestGreeting و المكون UserGreeting هنا قمنا بتضمين المكون
import UserGreeting from "./components/UserGreeting";
import GuestGreeting from "./components/GuestGreeting";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // true و قيمته isLogged هنا قمنا بتعريف متغير إسمه 
    let isLogged = true;
    // 'Mhamad' و قيمته user هنا قمنا بتعريف متغير إسمه 
    let user = 'Mhamad';

    // من أجل تحديد المحتوى الذي سيتم عرضه isLogged 
    // <UserGreeting> سيتم عرض محتوى المكون true تساوي isLogged التعبير الشرطي الأول معناه إن كانت قيمة
    //  <GuestGreeting> سيتم عرض محتوى المكون true لا تساوي isLogged التعبير الشرطي الثاني معناه إن كانت قيمة
    return (
        <>
            { isLogged && <UserGreeting user={user} /> }
            { !isLogged && <GuestGreeting /> }
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;