JSX در ری اکت

امید کیانی 186 بازدید 1398/06/17
JSX در ری اکت

در جلسات قبل با JSX و نقش آن در کتابخانه ی ری اکت آشنا شدیم.در این آموزش کمی عمیق تر به مفهوم jsx در ری اکت می پردازیم.

تمام کامپوننت های react دارای یک function به نام render هستند که این function خروجی html ما را مشخص می کند.

 JavaScript Extension)JSX) یک بسط(extension) برای react است که به ما اجازه می دهد که کدهای javascript خود را شبیه به کدهای html بنویسیم.به عبارت دیگر jsx،سینتکسی شبیه به html دارد که توسط react استفاده شده است و آن ECMAScript را شبیه به کدهای html بسط می دهد.

این سینتکس توسط پیش پردازنده هایی همچون Babel کامپایل می شود که برای تبدیل سینتکس html و parse کردن آن به استاندارهای javascript  کار می رود. 

در مثال زیر به کامپایل شدن یک فایل jsx توسط کامپایلر babel می پردازیم:

JSX File

<div>Hello Laraman</div> 

Corresponding Output

React.createElement("div", null, "Hello Laraman");  

در خط بالا یک react element ایجاد شده است که حاوی سه پارامتر است.

اولین پارامتر نام element ما است که در اینجا نمایانگر تگ div است،دومین پارامتر attribute ی است که به element مورد نظرمان اختصاص می دهیم و سومین پارامتر محتوا یا عبارتی است که درون element ما که همان تگ div است قرار می دهیم.

برای استفاده ی بیش از یک element درون jsx شما نیاز دارید تا آنها را درون یک element بیرونی قرار دهید،اصطلاحا (wrap with one container element).

App.JSX

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1>Laraman</h1>  
            <h2>Training Institutes</h2>  
            <p>This website contains the best CS tutorials.</p>  
         </div>  
      );  
   }  
}  
export default App;  

:Output

 

JSX Attributes 

jsx از attribute ها همانند html استفاده می کند با این تفاوت که نام attribute های ما از قرارداد camelCase پیروی می کند.

برای نمونه کلمه class به className تبدیل می شود زیرا کلمه class یک کلمه کلیدی است که در javascript از پیش تعریف شده است،همچنین ما می توانیم attribute های سفارشی شده ی خودمان را نیز به element مورد نظر اضافه کنیم.

برای ایجاد یک attributeسفارشی نیاز داریم تا از data-prefix استفاده کنیم.در مثال زیر ما از یک attribute سفارشی شده با نام data-demoAttribute درون تگ <p> استفاده می کنیم.

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
             <h1>Laraman</h1>  
             <h2>Training Institutes</h2>  
             <p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>  
         </div>  
      );  
   }  
}  
export default App; 

 

در jsx ما می توانیم مقادیری را به attribute هایمان اختصاص دهیم که برای آن ۲ راه پیش رو داریم.

۱-به عنوان String: ما می توانیم مقادیری را به عنوان string به attribute خود اختصاص دهیم که برای انجام این کار باید مقدار مورد نظر را درون "..." قرار دهیم.

var element = <h2 className = "firstAttribute">Hello Laraman</h2>;  

به عنوان مثال:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 className = "hello" >Laraman</h1>  
            <p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>  
         </div>  
      );  
   }  
}  
export default App;  

خروجی:

Laraman
This website contains the best CS tutorials.

۲-به عنوان عبارت:همچنین می توانیم مقادیری را به عنوان عبارت با استفاده از {} اختصاص دهیم.

var element = <h2 className = {varName}>Hello Laraman</h2>;  

 به عنوان مثال:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 className = "hello" >{25+20}</h1>  
         </div>  
      );  
   }  
}  
export default App; 

 خروجی:

45

 

JSX Comments 

jsx به شما اجازه می دهد که درون کدهای خود از comment استفاده کنید،comment ها در jsx با */ شروع و با /* خاتمه و در نهایت درون {} قرار می گیرند.

به مثال زیر توجه کنید:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 className = "hello" >Hello Laraman</h1>  
        {/* This is a comment in JSX */}   
         </div>  
      );  
   }  
}  
export default App;  

 

JSX Styling

 برای استایل دادن به element ها در react از روش های مختلفی می توانیم استفاده کنیم اما react بر استایل دادن بهelementها به صورت Inline تاکیید دارد.به همین منظور شما می توانید از قرارداد camelCase استفاده کنید.

به مثال زیر توجه کنید:

class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         fontFamily: 'Courier',  
         color: '#003300'  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>www.laraman.ir</h1>  
         </div>  
      );  
   }  
}  
export default App;  

خروجی:

نکته:توجه کنید که ما نمی توانیم درون jsx از if ... else استفاده کنیم،به جای آن شما می توانید اصطلاحا از عبارت سه قلو استفاده کنید.

مثال:

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

خروجی:

False!

 

اکنون ما با ماهیت و نحوه ی عملکرد JSX در React آشنا شدیم. 

 

دیگر مقالات
امید کیانی 316 بازدید 1398/07/17
حمید تیموری 2032 بازدید 1397/07/09
حمید تیموری 726 بازدید 1397/07/27
امید کیانی 253 بازدید 1398/07/14
حمید تیموری 890 بازدید 1398/03/02


نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید