خب کلی مقاله خوندم تا بتونم خیلی دقیق این سینتکس دوست داشتنی رو واشکافی کنم بتونم درک جامعی از این سینتکس داشته باشم و قراره تمام فهمیده هامو اینجا بنویسم.
قرار نیست هرچی که میگم درست باشه، میگن که تالس وقتی درس دادنش تموم می شده به شاگرداش می گفته : خب این تمام فهمیده های من بود، حالا شما برید بهترش کنید و حرف منم همینه
سینتکس jsx در واقع نه جاوا اسکریپت هست نه html بلکه یه چیزی بینشون هست و همونطور که از اسمشون معلومه javascript و xml هست و این سینتکس کاملا قدرت گرفته از جاوا اسکریپت.
اگر این سینتکس نبود ما باید این صورت در ری اکت کد می زدیم
function hello() {
return /*#__PURE__*/React.createElement("div", null, "Hello world!");
}
این یک hello world ساده هست
حالا کدی که ما داخل ری اکت می نویسم در واقع به این شکل هست به لطف یک کامپایلری به نام babeljs
function hello() {
return <div>Hello world!</div>;
}
پس ری اکت بدون این سینتکس سخت و غیرقابل فهم تر می شد و ما به کمک این سینتکس قابل فهم ،می تونیم چیزی شبیه به html بنویسم داخل یک فایل جاوا اسکریپتی.
نکاتی در مورد jsx:
React.createElement(component, props, ...children)
اولین متد component هست
ما دو نوع کامپوننت داخل ری اکت داریم: اولی کامپوننت های داخلی هستن مثل div،span که همون تگ های html هستن و در واقع ویژگی مشترک همه این کامپوننت های داخلی این هست که با حرف کوچک شروع می شوند.
نوع دوم کامپپوننت ها user-define هست که توسط کاربر تعریف میشه و با حرف بزرگ باید شروع بشوند
اینا همون کامپوننت هایی هستن که ما تعریف می کنیم
متد دوم props هست که میشه تشبیهش کرد به attribute های تگ های html و شامل کلاس و آی دی و استایل و ....
متد سوم هم children هست که تکست هایی که می نویسم داخلش هست.
یه حمع بندی کلی بکنم :
