React و JSX

[تعداد: 0    میانگین: 0/5]

React و JSX

با اینکه اجباری نیست ولی شما می توانید از سینتکس یا نحو زبان JSX در برنامه React خودتان استفاده کنید.JSX مخفف JavaScript XML می باشد.بزرگترین مزیت استفاده از JSX این است که به شما اجازه می دهد فایل های HTML را در فایل های JavaScript وارد (include) کنید و بدین ترتیب تعریف عناصر React را آسان تر می کند.

موارد مهمی که در مورد JSX وجود دارند عبارتند از :

  1. تگ هایی که با حروف کوچک شروع می شوند، به عنوان عناصر معمولی HTML رندر می شوند
  2. تگ هایی که با حروف بزرگ شروع می شوند، به عنوان کمپوننت های React رندر می شوند
  3. هر کدی که بین آکولاد {…} نوشته شود، به عنوان JavaScript رندر می شود.

اگر می خواهید در مورد نحوه استفاده از React به همراه JSX اطلاعات بیشتری کسب کنید می توانید به این صفحه مراجعه کنید، و برای مستندات پیش فرض JSX می توانید اینجا را ببینید.

 

ایجاد عناصر React

همانطور که در ابتدا گفته شد React یه معماری Component-Based دارد که به توسعه دهندگان اجازه می دهد کمپوننت هایی با قابلیت استفاده چندباره برای حل مسائل مختلف ایجاد کنند. یک Component در React از یک یا چند Element درست می شود که کوچکترین واحد برنامه های React هستند.

در پایین شما می توانید یک المنت یا عنصر ساده React را که کار ساده اضافه کردن دکمه Click Me به صفحه وب را انجام می دهد،مشاهده کنید.در HTML، یک نگهدارنده <div> با آی دی myDiv ایجاد می کنیم که توسط React پر خواهد شد.ما عنصر React خود را داخل تگ <script> و درست قبل از </body> ایجاد می کنیم.دقت کنید که اگر می خواهید از روش JSX استفاده کنید باید خصیصه type="text/babel" را هم اضافه کنید تا Babel آن را تشخیص داده و کامپایل کند.

<body>
 <div id="myDiv"></div>
 
 <script type="text/babel">
   ReactDOM.render(
     <button>Click me</button>,
     document.getElementById('myDiv')
   );
 </script>
</body>

ما عنصر React خود را با متد ReactDOM.render() رندر کردیم که ۲ پارامتر ضروری دارد، عنصر React یعنی (<button>Click me</button>) و نگهدارنده آن یعنی (document.getElementById('myDiv')) . برای اطلاعات بیشتر در مورد اینکه المنت های React چگونه کار می کنند می توانید به این مقاله سر بزنید.

درباره نویسنده: حامد فیروزپور

علاقه مند به وردپرس هستم در زمینه کار با سرورهای لینوکسی و همچنین بهینه سازی وب سایت ها فعالیت می کنم.

مطالب زیر را حتما بخوانید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *