jsx چیست؟

همونطور که گفتم قرار نیست من خیلی اکادمیک همه چیز رو توضیح بدم بیشتر یه سری یادداشت است که برای خودم می نویسم تا بعدا اگه لازم شد بخونمش...

پس اگه می خوای دقیق تر بدونی jsx چیه می تونی مقاله نیما رو بخونی! jsx چیست؟

در واقع jsx یه اکستنشن ه برای جاواسکریپت که اجازه می ده ما html مون رو داخل js استفاده کنیم.

چند نکته برای استفاده از jsx هست :

return (
<div className=&quotApp&quot>
<h1>hello world</h1>
</div>
);
}

اولیش اینه که برای این که class به یه المان بدیم باید از className استفاده کنیم به جای class.

نکته بعدی که باید در نظر بگیرید اینه که

return (
<label for=&quottaha&quot>taha</label>
); 

نباید از for برای label استفاده کنیم هر چند که مرورگر نمایش می ده اما با همچین اروری مواجه می شیم.

همونطور که معلومه باید از htmlfor استفاده کنیم به جای for برای label.

در تگ های که تگ بسته ندارند مانند input در jsx شما باید اون تگ رو ببندید مثلا اینطوری

<input type=&quottext&quot />

یا مثلا br رو باید اینطوری ازش استفاده کنی:

<br />

شما وقتی می خواین یه چیزی رو return کنید باید فقط یک المان رو برگردونید.

مثلا اینجوری اشتباه :

return (
<div><h1>hello</h1></div>
<div><h1>hello</h1></div>
);
}

اگه بخوایم درستش کنیم باید اینشکلیش کنیم:

return (
<div>
<div>
<h1>hello</h1>
</div>
<div>
<h1>hello</h1>
</div>
</div>
);

در واقع می تونیم از متغییر ها هم استفاده کنیم برای استفاده هم باید اونا رو داخل {} بزاریم.

مثال زیر رو نگاه کن.

import React from &quotreact&quot
function App() {
const name = &quotreact&quot
return (
<div>
<h4>hello {name}</h4>
</div>
);
}
export default App;

همینطور می تونیم توی {} عملیات های ریاضی رو هم انجام بدیم

return (
<div className=&quotApp&quot>
<h4>what is 1 + 1 = {1 + 1}</h4>
</div>
);
}

همچنین می تونیم که تو jsx از شرط ها استفاده کنیم مثلا یه متغییر درست می کنیم به نام shownum

const shownum = true;

بعد بگیم که اگه shownum درست بود این متن رو نمایش بده:

{ shownum ? p&quot> <h4>what is 1 + 1 = {1 + 1}</h4> : null}

همچنین می تونیم متغییر تعریف کنیم که مقدارش بر اساس یه شرطی ان

function App() {
const shownum = true;
let math;
if (shownum) {
math = <h4>{1 + 11}</h4>;
} else {
math = null;
}
return <div className=&quotApp&quot>{math}</div>;
}