آموزش ری اک (React js)،Jsx چیست ؟ مقدمه ای بر Jsx

آموزش ری اک (React js)،Jsx چیست ؟ مقدمه ای بر Jsx

اگر شما تازه وارد دنیای React شدید یا داخل آن هستید . باید با چیزی به نام Jsx برخورد کرده باشید . و احتمالا مقداری گیج شده اید که آیا واقعا Jsx چیست ؟ جاوااسکریپت است یا کد Html…

در این مقاله ما سعی میکنیم که جواب درستی به این سوال jsx چیست بدهیم

خب ما قبلاً در مقاله خود در ReactJS گفته بودیم كه React كتابخانه ای جاوا اسكریپت ، كارآمد و انعطاف پذیر برای ساخت رابط های كاربری است. اما به جای استفاده از JavaScript معمولی ، کد React باید در چیزی بنام JSX نوشته شود.

اجازه دهید نمونه کد JSX را مشاهده کنیم:

const ele = <h1>This is sample JSX</h1>;

کد1

قطعه کد بالا تا حدی شبیه HTML است و همچنین از یک متغیر  JavaScript استفاده می کند اما نه HTML است و نه جاوااسکریپت ،در واقع JSX است. JSX اساساً سینتکس نوینی از JavaScript معمولی است و برای ایجاد عناصر React استفاده می شود. سپس این عناصر به React DOM ارائه می شوند. ما در مقاله های  بعدی به طور مفصل درباره رندر و DOM توضیح خواهیم داد.

چرا Jsx ؟

• سریعتر از جاوااسکریپت معمولی است. زیرا هنگام ترجمه به JavaScript معمولی ، بهینه سازی را انجام می دهد.
• ایجاد template هارا برای ما آسان تر می کند.
• به جای جدا کردن کد های React از component ها استفاده میکند.

استفاده از عبارات جاوااسکریپت در جی اس اکس(JSX): در ری اکت  ما مجاز به استفاده از عبارات JavaScript عادی با JSX هستیم. برای جاسازی هر عبارت JavaScript در قطعه ای از کد که با JSX نوشته شده است ، باید این عبارت را در پرانتزهای حلقه ای (curly braces )قرار بدهیم {}.برای مثال  برنامه زیر را که در پرونده App.js نوشته شده است در نظر بگیرید:

render() {
        
        let errorWeb= "well come to errorweb"; 
        return (
            <div className="App">
                {errorWeb}
            </div>
        );
          
        
    }
}
export default App;

در برنامه بالا همان منظور App است. ما کد جاوااسکریپتی مد نظر را در داخل Jsx نوشتیم.

باید بگم ما میتوانیم همه عبارات جاوااسکریپتی را درون braces {} بنویسیم ، به جز دستور شرطی if-else که باید به جای آن از دستور شرطی تک خطی یا همان ternary condition  استفاده کنیم .

let errorWeb= "well come to errorweb"; 
let show = errorWeb.includes("errorweb") ? alert("hello errorweb"):alert("errorweb is not definde");
        return (
            <div className="App">
                {errorWeb,show}
            </div>
        );

Attribute ها در JSX:

JSX به ما امکان می دهد از ویژگی هایی با عناصر HTML استفاده کنیم دقیقاً مانند آنچه در HTML معمولی انجام می دهیم. اما به جای قرارداد نامگذاری معمول HTML ، JSX برای Attribute ها از روش نوشتاری کمل کیس camelcase استفاده می کند. به عنوان مثال ، کلاس در HTML در JSX به className تبدیل می شود. دلیل اصلی این امر این است که برخی از نام Attribute ها در HTML مانند “class” کلمات کلیدی اختصاصی در JavaScript هستند یعنی کلمه class رزرو شده است. بنابراین ، برای جلوگیری از این مشکل ، JSX از روش نوشتاری کمل کیس camelcase برای Attribute ها استفاده می کند.مانند مثال های بالا.

تعیین مقادیر attribute:

 JSX به ما اجازه می دهد مقادیر صفت را به دو روش مشخص کنیم:

1. قرار دادن داخل تگ یا دابل کوتیشن ” ”  ‘ ‘
2. قرار دادن داخل {}

مثال:

<div className="App"> </div>

<div style={ {} }> </div>

خب امیدوارم این مقاله درک شمارا از Jsx  بالا برده باشد.

راستی یکی دیگر از قوانین Jsx  اینست که باید همه المان های شما داخل یک المان والد قرار بگیرد.مانند مثال های بالا.

برای خواندن مقاله ری اکت(React) بر روی لینک کلیک کنید

کلمات کلیدی:Jsx چیست ؟،چرا Jsx،Jsx در ری اکت،کاربرد Jsx،Attribute ها در JSX