- دوره آموزش ReactJS: آشنایی با ReactJS و چاپ Hello World
- دوره آموزش ReactJS: شروع با JSX
- دوره آموزش ReactJS: مفهوم Component ها و Prop ها
در ReactJS مانند قبل از ساختار صفحات HTML ساده استفاده نمیکنیم، هر چند هر نرم افزار تحت وب و سایتی باید با تگ ها ساخته شود ولی در ReactJS ساختار خاصی برای تولید این تگها داریم.
همانطور که در قسمت قبل دیدیم، با ReactDom و متد render از تگ h1 برای چاپ پیام Hello World استفاده کردیم.
JSX به ما کمک میکند کدهای HTML را تبدیل به کدهای جاوا اسکریپت کرده تا این کدها در نهایت نرم افزار ما را نمایش دهند.
JSX شباهت بسیاری به HTML دارد ولی در عوض امکانات خاصی دارد که در HTML موجود نیست. یک نمونه JSX را در پایین ببینید:
import React from 'react';
import ReactDOM from 'react-dom';
const jsx_source= (
<div>
<h1>hitos</h1>
<p>This P Tag for Learning ReactJS</p>
</div>
);
ReactDOM.render(jsx_source, document.getElementById('main'));
در سطر چهارم یک متغیر از نوع const و با نام jsx_source ایجاد کردیم که درون پرانتز سورس JSX را در آن وارد کردیم.
در سطر آخر با متد render و متغیر jsx_source و انتخاب تگ با شناسه main خروجی مورد نظر خود را به شکل زیر ایجاد کردیم:
نکته: در بالاترین سطح تگها در JSX تنها امکان قرار دادن یک تگ وجود دارد. بنابراین کد زیر اشتباه است و برنامه شما اجرا نخواهد شد:
const jsx_source= (
<h1>hitos</h1>
<p>This P Tag for Learning ReactJS</p>
);
در سورس زیر یک متغیر به نام name ایجاد کردیم که رشته hitos را در آن جای دادیم:
import React from 'react';
import ReactDOM from 'react-dom';
const name = 'hitos';
const jsx_source= (
<div>
<h1>{ name } website </h1>
</div>
);
ReactDOM.render(jsx_source, document.getElementById('main'));
همانطور که میبینید متغیر name را درون بدنه سورس jsx بین دو آکولاد باز و بسته قرار دادیم. نتیجه خروجی کد فوق چاپ عبارت hitos website درون یک تگ h1 است.
نکته: برای دادن کلاس، شناسه یا هر خصوصیت دیگری به تگها به سادگی میتوانید از علامت نقل قول استفاده کنید:
const jsx_source= (
<div>
<h1 class="class_name">hitos.ir</h1>
</div>
);
در سورس زیر یک عملیات ریاضی را درون آکولاد، باز و بسته قرار میدهیم:
import React from 'react';
import ReactDOM from 'react-dom';
const jsx_source= (
<div>
<h1> 1 + 1 = { 1 + 1 }</h1>
</div>
);
ReactDOM.render(jsx_source, document.getElementById('main'));
نتیجه اجرای دستورات فوق را در پایین ببینید:
1 + 1 = 2
در پایین اطلاعات را با استفاده از یک تابع چاپ میکنیم:
import React from 'react';
import ReactDOM from 'react-dom';
const sayHello = (name) =>{
return <h1>Hello {name}</h1>
}
ReactDOM.render(sayHello('hitos!'), document.getElementById('main'));
اولین ورودی متد render تابع sayHello میباشد. اگر با ساختار تابع sayHello آشنا نیستید نیاز دارید که از دوره ECMAScript6 سایت هیتوس به این آدرس استفاده کنید.