JSX در ReactJS – آموزش ReactJS

JSX در ReactJS

React از JSX به جای جاوا اسکریپت معمولی استفاده می کند. استفاده از آن الزامی نیست، اما جوانب مثبت زیر را دارد.

• JSX سریعتر است زیرا در هنگام کامپایل کد به جاوا اسکریپت کدها را بهینه سازی می کند.
• type-safe است و بیشتر خطاهای موقع کامپایل را می توان پیدا و رفع کرد.
• اگر با HTML آشنا باشید، ساده تر و سریعتر می توانید قالب مورد نظرتان را بنویسید.

استفاده از JSX

JSX بسیار شبیه به HTML معمولی است. ما در بخش آماده سازی محیط ReactJS از آن استفاده کردیم. به محتوای فایل App.js که یک div را باز میگرداند توجه کنید.

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

با اینکه JSX شبیه به HTML است اما هنگام استفاده از آن باید به چند نکته توجه داشته باشید.

عناصر تو در تو

اگر بخواهیم عناصر بیشتری را باز گردانیم، باید آن ها را در داخل یک عنصر دیگر (Container) قرار دهیم. برای نمونه در مثال زیر ما عناصر h1، h2 و p را در داخل یک عنصر div قرار داده و باز میگردانیم.

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

خروجی:

صفات (Attributes)

ما می توانیم صفات سفارشی خود را به صفات و خاصیت های HTML اضافه کنیم. برای اضافه کردن صفت سفارشی جدید باید از پیشوند data استفاده کنیم. برای نمونه در مثال زیر ما صفت data-myattribute را به عنصر p اضافه کرده ایم.

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

عبارات جاوا اسکریپت

در JSX می توانیم از عبارات جاوا اسکریپت نیز استفاده کنیم. برای اینکار باید عبارت را بین دو {} بنویسم. برای نمونه در مثال زیر دو عدد ۱ با هم جمع شده و نتیجه در خروجی چاپ می شود.

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

خروجی:

توجه داشته باشید که در داخل {} نمی توانید از if else استفاده کنید. به جای آن می توان از ? : استفاده کرد. در مثال زیر مقدار متغیر i بررسی می شود و اگر برابر با ۱ باشد، مقدار true و در غیر این صورت مقدار false چاپ می شود.

import React from 'react';
class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

خروجی:

استایل دادن

React توصیه می کند که از استایل inline استفاده کنیم. زمانی که از استایل دهی inline استفاده می کنیم، باید از سینتکس camelCase استفاده شود. در مثال زیر استایل تعریف شده در متغیر MyStyle به عنصر h1 اضافه می شود.

import React from 'react';
class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

خروجی:

کامنت گذاری

برای کامنت گذاری در بخش های فرزند باید از {} استفاده کنیم. مثال زیر نحوه کامنت گذاری در JSX را نشان می دهد:

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

قوانین نامگذاری

تگ های HTML همیشه به صورت lowercase نوشته می شوند. اما اجزای React به صورت Uppercase نامگذاری می شوند.

نوشته JSX در ReactJS – آموزش ReactJS اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.