JSX در ReactJS – آموزش ReactJS

یکشنبه ۵ اسفند ۱۳۹۷
بازدید ۱,۵۰۵ نفر
آرتین
(10 امتیاز از 2 رای)
Loading...

تصویر reactjs-jsx_6090 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;

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;

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;

خروجی:

تصویر reactjs-jsx_6090_1 JSX در ReactJS - آموزش ReactJS

صفات (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;

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 می توانیم از عبارات جاوا اسکریپت نیز استفاده کنیم. برای اینکار باید عبارت را بین دو {} بنویسم. برای نمونه در مثال زیر دو عدد 1 با هم جمع شده و نتیجه در خروجی چاپ می شود.

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

import React from 'react';

class App extends React.Component {

render() {

return (

<div>

</div>

);

}

export default App;

خروجی:

تصویر reactjs-jsx_6090_2 JSX در ReactJS - آموزش ReactJS

توجه داشته باشید که در داخل {} نمی توانید از if else استفاده کنید. به جای آن می توان از ? : استفاده کرد. در مثال زیر مقدار متغیر i بررسی می شود و اگر برابر با 1 باشد، مقدار 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;

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;

خروجی:

تصویر reactjs-jsx_6090_3 JSX در ReactJS - آموزش ReactJS

استایل دادن

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;

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;

خروجی:

تصویر reactjs-jsx_6090_4 JSX در ReactJS - آموزش ReactJS

کامنت گذاری

برای کامنت گذاری در بخش های فرزند باید از {} استفاده کنیم. مثال زیر نحوه کامنت گذاری در 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;