JSX

JSX یک المنت است که تعریف می شود و می توان هر مقدار دلخواهی را درون آن قرار داد  مانند اعداد ، رشته ، HTML  ، شی ، آرایه و …

در واقع شما با jsx می توانید یک متغیر تعریف کنید و آن متغیر را به یک المنت html تبدیل کنید و در مواقع لزوم از آن استفاده کنید .

var navBar = <nav>I am a nav bar</nav>;

ذخیره شدن المنتهای HTML در JSX

var Pistons2004 = {
  center:        <li>Ben Wallace</li>,
  powerForward:  <li>Rasheed Wallace</li>,
  smallForward:  <li>Tayshaun Prince</li>,
  shootingGuard: <li>Richard Hamilton</li>,
  pointGuard:    <li>Chauncey Billups</li>
};

المنتهای jsx می نوانند دارای ویژگی باشند همانند html

و همانند html هم مقدار دهی می شوند .

<a href="http://www.yahoo.com">Welcome to the Yahoo</a>; 
var title = <h1 id="title">Introduction to React.js: Part I</h1>;

همچنین می توانند تو در تو باشند و برای خوانایی بیشتر از فاصله ها یا رفتن به خط بعد استفاده کرد.

<a href="https://www.google.net"> <h1> Click me I am Goooogle </h1> </a>

ولی توجه کنید برای رفتن به خط بعد حتما باید کد ما در پرانتز قرار بگیرد:

var theGoogle = (
   <a href="https://www.google.net">
     <h1>
       Click me I am Gooooooooooogle
     </h1>
   </a>
 );

نکته مهم : شما فقط می توانید یک المنت پایه داشته باشید :

var paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

در حالی که مثال زیر خطا می دهد :(به دلیل اینکه  تگهای p دارای ریشه نمی باشند )

var paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

برای رفع خطا بهتر است المتهایمان را درون یک <div> بگزاریم.(هر متغیر فقط می تواند یک تگ ریشه داشته باشد)

var blog = ( <div> <img src="pics/192940u73.jpg" /> 
<h1> Welcome to Dan's Blog! </h1> 
<article> Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out. </article> </div> );

رندر کردن reactJS

حالا که به ساختار آن اشنا شدید بهتر است نحوه استفاده از react رایاد بگیرید .

var React = require('react'); 
var ReactDOM = require('react-dom'); 
// Copy code here: 
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

خروجی : Hello world

نگران نباشید الان به طور کامل براتون این مورد را شرح می دهیم:

در خط اول و دوم کتابخانه reactJS را فراخوانی کردیم.

ReactDOM چیست ؟

یک کتابخانه جاوا اسکریپت است که ویژگی های ری اکت را در خود جا داده است . البته در ادامه با این مفهوم به طور کامل آشنا می شویم ولی الان برمیگردیم به فایلمان همان گونه که می بینید تکه کد زیر خروجی مناسب می دهد :

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

ReactDOM.render تابعی است که نوع jsx را خروجی می دهد به المنت دوم تابع در واقع این تابع دو آرگومان ورودی دارد :

ارگومان اول متغیر jsx را دریافت و در المنت دوم چاپ می کند .

توجه : شما می بایست در فایل html خود المنتی با ایدی app داشته باشید

  <main id=”app”></main>

بارگزاری متغیر reactJs

var React = require('react');
var ReactDOM = require('react-dom');

// Write code here:
var myList=(<ul>
    <li>info@piero.ir</li>
    <li>www.piero.ir </li>
    </ul>
    );
ReactDOM.render(myList,document.getElementById("app"));

خروچی :

• info@piero.ir
• www.piero.ir

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

نکته پایانی:

چون از المنت استفاده می کنیم درصورتی که یک کد دوبار نوشته شود دفعه دوم هیچ کاری انجام نمیدهد :

var hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:

ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:

ReactDOM.render(hello, document.getElementById('app'));