Reactقواعد JSX

import React from 'react';
import ReactDOM from 'react-dom/client';

// <h1> هنا قمنا بإنشاء متغير يمثل وسم
const myElement = React.createElement('h1', {}, 'This is not a JSX code');

// في العنصر الأساسي في الصفحة myElement الموجود في المتغير <h1> هنا قمنا بإضافة الوسم
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// <h1> هنا قمنا بإنشاء متغير يمثل وسم
const myElement = <h1>This is JSX code</h1>;

// في العنصر الأساسي في الصفحة myElement الموجود في المتغير <h1> هنا قمنا بإضافة الوسم
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// هنا قمنا بإنشاء متغير وضعنا فيه جميع الوسوم التي نريد إضافتها
const myElement = (
    <div>
        <h1>Reactjs Tutorial</h1>
        <p>This tutorial is made by harmash.</p>
    </div>
);

// في العنصر الأساسي في الصفحة myElement هنا قمنا بإضافة الوسوم الموجودة في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// هنا حاولنا إنشاء متغير وضعنا فيه جميع الوسوم التي نريد إضافتها و لكننا نعلم أننا فعلنا ذلك بطريقة خاطئة
const myElement = (
    <h1>Reactjs Tutorial</h1>
    <p>This tutorial is made by harmash.</p>
);

// في العنصر الأساسي في الصفحة myElement هنا حاولنا إضافة الوسوم الموجودة في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// هنا قمنا بإنشاء متغير وضعنا فيه جميع الوسوم التي نريد إضافتها
const myElement = (
    <>
        <h1>Reactjs Tutorial</h1>
        <p>This tutorial is made by harmash.</p>
    </>
);

// في العنصر الأساسي في الصفحة myElement هنا قمنا بإضافة الوسوم الموجودة في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// هنا حاولنا إنشاء متغير وضعنا فيه وسم غير مغلق مما يعني أنه سيسبب مشكلة
const myElement = <input type="text">;

// في العنصر الأساسي في الصفحة myElement هنا حاولنا إضافة الوسم الموجود في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// <input> هنا قمنا بإنشاء متغير يمثل وسم
const myElement = <input type="text"/>;

// في العنصر الأساسي في الصفحة myElement الموجود في المتغير <input> هنا قمنا بإضافة الوسم
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// و قد مررنا فيه تعبير يمثل عملية حسابية <h1> هنا قمنا بإنشاء متغير وضعنا فيه وسم
const myElement = <h1>The result of the expression is {5 * 3}</h1>;

// في العنصر الأساسي في الصفحة myElement هنا قمنا بإضافة الوسم الموجود في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// وضعنا فيه نص عادي name هنا قمنا بتعريف متغير إسمه 
const name = "Mhamad";

// name و قد مررنا فيه قيمة المتغير <h1> هنا قمنا بإنشاء متغير وضعنا فيه وسم 
const myElement = <h1>Hello {name}</h1>;

// في العنصر الأساسي في الصفحة myElement هنا قمنا بإضافة الوسم الموجود في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';

// وضعنا فيه القيمة 22 age هنا قمنا بتعريف متغير إسمه 
var age = 22;

// و قد مررنا فيه نص عادي بالإضافة إلى القيمة التي ترجعها الجملة الشرطية <h1> هنا قمنا بإنشاء متغير وضعنا فيه وسم 
const myElement = <h1>Your are {if (age >= 18 )? "allowed": "not allowed"} to work</h1>;

// في العنصر الأساسي في الصفحة myElement هنا قمنا بإضافة الوسم الموجود في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

import ReactDOM from 'react-dom/client';
import './index.css';

// "demo" و قد جعلناه يستعمل الكلاس <h1> هنا قمنا بإنشاء متغير وضعنا فيه وسم 
const myElement = <h1 className="demo">Hello World</h1>;

// في العنصر الأساسي في الصفحة myElement هنا قمنا بإضافة الوسم الموجود في المتغير
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);