jsx در react

آموزش  jsx در react

پیشنهاد می کنیم حتما قسمت اول آموزش ری اکت را از اینجا  به طور کامل مطالعه نمایید.

 jsx یک سری قوانین و مقررات نوشتن کدهای html درون react می باشد که این امر باعث سهولت و جلوگیری از خطاهای احتمالی می شود.

 کلاسها در jsx در react

در html ما برای تعریف css از class استفاده می کنیم ولی در jsx از className استفاده می کنیم .

<h1 className="big">Hey</h1>

دلیل این موضوع این می باشد وقتی ما از jsx استفاده می کنیم ، جاواسکریپت کدهای ما را تبدیل می کند و چون کلمه class در جاوا اسکریپت از پیش رزرو شده است نمی توان از این کلمه استفاده نمود .

var React = require('react');
var ReactDOM = require('react-dom'); 
// Write code here: 
var myDiv=(<div className="big">I AM A BIG DIV</div>); 
ReactDOM.render(myDiv,document.getElementById('app'));

اجزای خود بسته شونده  self-closing tag

همانگونه که می دانید در html تگها با استفاده از اسلش (/) بسته می شوند همانند <div> </div> ولی بعضی از تگها مانند تصویر تگ بسته شونده ندارند و خودشان بسته می شوند مانند <input></img></br/> اینگونه المنت ها در jsx بدون اسلش استفاده می شود .

HTML <br /> JSX <br>

استفاده از یک والد jsx در react

شما در jsx فقط می توانید یک والد داشته باشد و اگر کدتان شبیه زیر باشد اشتباه است :

const jsx_source= (
	<h1>piero</h1>
	<p>This P Tag for Learning ReactJS</p>
);

به منظور اصلاح کد بالا دو تگ h1 و p را درون یک div قرار می دهیم.

عملیاتها درون رشته

عملیاتها درن {} قرار می دهیم

import React from 'react';
import ReactDOM from 'react-dom';

const jsx_source= (
	<div>
		<h1> ۲ + ۳ = { ۲ + ۳ }</h1>
	</div>
);

ReactDOM.render(jsx_source, document.getElementById('main'));

نتیجه اجرای دستورات فوق را در پایین ببینید:

۲+۳=۵

همراه ما باشید در موارد و نکات جدید در ری اکت