jsx در react

Share on facebook
Share on google
Share on twitter
Share on linkedin

آموزش  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'));

 

پیشنهاد پیرو برای شما :   تایپ فارسی درandroid studio

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

۲+۳=۵

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

 

 

مدیر پیرو

مدیر پیرو

نظرتان را بیان نمایید

عضویت در خبر نامه