آموزش ReactJS – فصل سوم: نحوه نگارش JSX

JSX قابلیت استفاده از XML را به جاوا اسکریپت اضافه می کند. گرچه استفاده از JSX به همراه ری اکت الزامی نیست، اما استفاده از آن کد ها را بسیار خوانا تر می کند و قابلیت های بسیاری را در اختیار برنامه نویسان قرار می دهد. در فصل سوم از آموزش های مبتدی تا پیشرفته ReactJS به شرح سینتکس JSX خواهیم پرداخت.

ReactJS - فصل سوم: نگارش JSX

ری اکت از JSX به جای جاوا اسکریپت برای قالب سازی استفاده می کند. گرچه استفاده از این قابلیت الزامی نیست اما استفاده از JSX مزیت های زیر را دارد:

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

استفاده از JSX

در بسیاری از مواقع JSX بسیار شبیه HTML معمولی است.

به کد های زیر توجه کنید که در واقع سینتکس JSX را نشان می دهد (این کد ها را در پوشه src و فایل App.jsx قرار دهید، اگر این فایل موجود نیست آن را بسازید):

import React from 'react';

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

برای اجرای کد ها بالا در فایل index.js در پوشه src کد ها زیر را کپی کنید:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('root'));

در مثال بالا در فایل index.js با دستور import، فایل App.jsx را وارد نموده ایم و سپس محتویات App که در آن فایل تعریف شده است را در المانی با آی دی root که ری اکت از قبل در صفحه قرار داده است چاپ می کنیم.

برای اجرای مثال بالا کافی است در محیط ترمینال به پوشه پروژه نقل مکان کنید و دستور npm start را تایپ کرده و اینتر بزنید. پس از اجرا در مرورگر متن Hello World!!! را مشاهده خواهید کرد.

گرچه JSX شبیه زبان HTML است اما برخی نکات را باید در هنگام استفاده از آن مد نظر قرار دهید.

المان های درون هم در JSX

به مثال زیر دقت کنید (محتویات فایل App.jsx):

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;

در مثال بالا همه المان های <p> و <h1> و <h2> درون یک <div> قرار گرفته اند که به آن کانتینر (Container) می گوییم.

اگر می خواهید از چند المان استفاده کنید باید حتما آن المان ها را درون یک کانتینر بگذارید وگرنه با ارور Failed to compile مواجه خواهید شد. درواقع ری اکت فقط یک گره (نود، Node) را برای هر بلاک کامپایل می کند.

استفاده از خاصیت های HTML یا همان Attributes

در JSX ما میتوانیم از خاصیت های دلخواه html استفاده کنیم (Custom Attributes) اما باید قبل از نام آنها از کلمه data- استفاده شود.

به مثال زیر توجه کنید ما در این مثال به المان <p> یک خاصیت به نام data-myattribute اضافه کرده ایم (محتویات فایل App.jsx):

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;

عبارات جاوا اسکریپت (JavaScript Expressions)

به همراه ری اکت، به جای JSX، می توانید از جاوا اسکریپت استفاده کنید. فقط کافی است کد ها را درون آکولاد {} بنویسید.

کد زیر عدد 2 را چاپ خواهد کرد (محتویات فایل App.jsx):

import React from 'react';

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

در JSX ما نمی توانیم از شروط if و else استفاده کنیم. اما می توانیم از عبارات شرطی استفاده کنیم.

در مثال زیر متغیر i برابر 1 است، پس در مرورگر کلمه True! چاپ خواهد شد:

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;

استایل دادن به المان ها در JSX

ری اکت پیشنهاد می کند که از روش استایل دادن درون متنی یا همان inline استفاده کنید. هنگامی که از روش inline استفاده می کنیم باید از سینتکس camelCase استفاده شود.

ری اکت همچنین بعد از اعداد در برخی از پارامتر ها به طور اتوماتیک حروف px را اضافه می کند.

مثال زیر اطلاعات استایل 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;

تعریف کلاس برای المان ها

برای تعریف کلاس باید از کلمه className استفاده کنید. مانند مثال زیر:

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
	  var chosenClass = "my-class-name"
      return (
         <div>
            <h1 style = {myStyle} className={chosenClass} >Header</h1>
         </div>
      );
   }
}
export default App;

همچنین به جای for="" در اچ تی ام ال، در JSX باید از htmlfor="" استفاده کرد.

ویدیوها و مطالب مشابه