تجربة تطبيقات الويب

/src/App.js/src/components/UserGreeting.js/src/components/GuestGreeting.js

// 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;
xxxxxxxxxx
 
// 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;
​

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

// يمكن الوصول إليه من خارج هذا الملف UserGreeting هنا قمنا بجعل المكون
export default UserGreeting;
xxxxxxxxxx
 
// 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;
xxxxxxxxxx
 
// GuestGreeting هنا قمنا بتعريف دالة تمثل مكوّن إسمه
// بداخل هذا المكون سيتم عرض رسالة ترحيب و الطلب من المستخدم أن يسجل دخوله
function GuestGreeting() {
    return <p>Hello, please login!</p>;
}
​
// يمكن الوصول إليه من خارج هذا الملف GuestGreeting هنا قمنا بجعل المكون
export default GuestGreeting;
​

⬤ ⬤ ⬤

localhost:3000