// User هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function User(props) {
    return <li>{props.username}</li>;
}

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

// User.js الموجود في الملف User هنا قمنا بتضمين المكون
import User from "./components/User";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // وضعنا فيها 3 عناصر users هنا قمنا بتعريف مصفوفة إسمها 
    let users = ['Mhamad', 'Sara', 'Ramy'];

    // users للمرور على جميع عناصر المصفوفة map() هنا قمنا باستخدام الدالة
    // user مع تخزين عنصر واحد منهم في كل مرة بشكل مؤقت في المتغير
    // <User> في المكون user ليتم في النهاية عرض قيمة المتغير
    return (
        <>
            <h1>Users data</h1>
            <ul>
                {users.map(user => <User username={user} />)}
            </ul>
        </>
    );
}

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

// User هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function User(props) {
    return <li>Value at index {props.index} = {props.username}</li>;
}

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

// User.js الموجود في الملف User هنا قمنا بتضمين المكون
import User from "./components/User";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // وضعنا فيها 3 عناصر users هنا قمنا بتعريف مصفوفة إسمها 
    let users = ['Mhamad', 'Sara', 'Ramy'];

    // users للمرور على جميع عناصر المصفوفة map() هنا قمنا باستخدام الدالة
    // user مع تخزين عنصر واحد منهم في كل مرة بشكل مؤقت في المتغير
    // index بالإضافة أيضاً إلى تخزين رقم فهرس العنصر الحالي في المتغير 
    // <User> في المكون index و قيمة المتغير user و في النهاية سيتم عرض قيمة المتغير
    return (
        <>
            <h1>Users data</h1>
            <ul>
                {users.map((user, index) => <User username={user} index={index} />)}
            </ul>
        </>
    );
}

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

// User هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function User(props) {
    return <li>{props.username} has id {props.userId}.</li>;
}

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

// User.js الموجود في الملف User هنا قمنا بتضمين المكون
import User from "./components/User";

// الذي يمثل الحاوية الرئيسية في واجهة المستخدم <App> هنا قمنا بتعريف المكون
function App() {
    // وضعنا فيها 3 عناصر عبارة عن كائنات users هنا قمنا بتعريف مصفوفة إسمها 
    let users = [
        {id: 1, username: 'Mhamad'},
        {id: 2, username: 'Sara'},
        {id: 3, username: 'Ramy'}
    ];

    // users للمرور على جميع عناصر المصفوفة map() هنا قمنا باستخدام الدالة
    // user مع تخزين عنصر واحد منهم في كل مرة بشكل مؤقت في المتغير
    // <User> الذي هو عبارة عن كائن في المكون user ليتم في النهاية تمرير قيم المتغير
    return (
        <>
            <h1>Users data</h1>
            <ul>
                {users.map(user => <User userId={user.id} username={user.username} />)}
            </ul>
        </>
    );
}

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