با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش JSX بپردازیم.
JSX مخفف JavaScript XML است.
با استفاده از JSX میتوانیم کد های html رو داخل React بنویسیم.
JSX بسیار آسان است.
با استفاده از JSX میتوانیم کد ها و المان های html را در جاوا اسکریپت بنویسیم و آن ها را بدون استفاده از توابعی مانند ()createElemet یا ()appendChild در DOM قرار دهیم.
در واقع JSX تگ های html را به عناصر react تبدیل میکند.
در مثال زیر کد های html را مستقیما در یک متغیر جاوا اسکریپت ذخیره کرده ایم:
1 2 3 | const myelement = <h1>I Love JSX!</h1>; ReactDOM.render(myelement, document.getElementById('root')); |
در مثال زیر نیز از تابع ()createElement برای ذخیره کد های html درون یک متغیر جاوا اسکریپتی استفاده کرده ایم:
1 2 3 | const myelement = React.createElement('h1', {}, 'I do not use JSX!'); ReactDOM.render(myelement, document.getElementById('root')); |
در JSX میتوان عبارت ها را داخل {} قرار داد تا پردازش شوند.
عبارت ها میتوانند متغیر های جاوا اسکریپت، عبارات ریاضی و محاسباتی و هر عبارت معتبر دیگری در جاوا اسکریپت، باشند.
مثال:
1 | const myelement = <h1>React is {5 + 5} times better with JSX</h1>; |
خروجی:
1 | React is 10 times better with JSX |
اگر کد html شما بیشتر از یک خط است، باید از پرانتز استفاده کنید.
مثال:
1 2 3 4 5 6 7 | const myelement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> ); |
نکته: متغیر ها فقط میتوانند یک تگ یا المان htnl را در خود ذخیره کنند. بنابراین هنگامی که چندین المان html دارید، باید یک المان والد برای آن ها در نظر بگیرید. (مانند تگ div)
مثال:
1 2 3 4 5 6 | const myelement = ( <div> <h1>I am a Header.</h1> <h1>I am a Header too.</h1> </div> ); |
همچنین توجه داشته باشید که هر تگی که استفاده میکنید را ببندید:
1 | const myelement = <input type="text" />; |
جلسه آموزش JSX نیز به پایان رسید.
در جلسه بعد آموزش کامپوننت ها در React JS خواهیم پرداخت.