Jsx در ری اکت چیست ؟

Jsx چیست

خود Jsx یک Expression هست و در همه حالات تبدیل به کدهای جاوا می شود و میتوان در همه جا از آن استفاده کرد حتی در شرطها. تصویر زیر رو دقت کنید به فهم شما در مورد اینکه Jsx چیست کمک زیادی می کنه.

همونطوری که در تصویر بالا هم می بینید کدهای  Jsx در نهایت تبدیل به کدهای جاوا میشه.

اما حالا اجازه بدید به زبان خیلی ساده تر و قابل فهم تر و به دور از استفاده از کلمات و عبارات کلیشه ای براتون توضیح بدم که Jsx چیست

قطعه کد زیر رو در نظر بگیرید

const Hello =<h1> Hello world </h1>;

در کد بالا ما یک قطعه کد بسیار ساده Html داریم که در یک متغیر ثابت به نام Hello قرار گرفته است. حالا ما میتونیم از این متغیر Hello در هر جایی استفاده کنیم و عبارت مورد نظر رو هر جایی نمایش بدیم. استفاده از Jsx کار ما رو خیلی خیلی ساده می کنه و عملا چیزی بیشتر از همون کدهای Html نیازی نیست بلد باشیم.

یک مثال از Jsx و جاوا

ببینید اگر ما از Jsx استفاده نکنیم کدنویسی جاوا اسکریپت ما خیلی خیلی زیاد میشه. به عنوان نمونه مثال زیر رو در نظر بگیرید.

فرض کنید در خروجی می خواهیم اگر کاربری با نام Ali وجود داشت عبارت Hello Ali چاپ بشه و اگر کاربری با این نام وجود نداشت عبارت Hello To All چاپ بشه. این برنامه ساده رو ما میتونیم با استفاده از Jsx به صورت زیر بنویسیم

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

let myfunc = (user) => {
    if (user) {
        return <h1>Hello, {user.firstName}</h1>;
    }
    return <h1>Hello, To All</h1>;
}

let user = {
    firstName: 'Ali'
};

let element = (
    <div>
        <h1>
            {myfunc(user)}
        </h1>
    </div>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

خب در قطعه کد بالا ابتدا یک تابع به نام myfunc تعریف کردیم و درون اون مشخص کردیم که اگر user وجود داشت عبارت زیر رو چاپ کنه

Hello Ali

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

Hello To All

در ادامه یک متغیر به نام user تعریف کردیم که شامل firstname هست. همچنین یک متغیر هم به نام element داریم که درون اون تابع رو صدا می زنیم. در حال حاضر با توجه به اینکه user به نام Ali وجود دارد پس در خروجی Hello Ali چاپ می شود.

اما شما فرض کنید که برای نوشتن چنین برنامه ای از کدهای Jsx استفاده نکنید و میخواهید فقط از طریق JavaScript این کار رو انجام بدید. کدهای شما چیزی مشابه با کدهای جاوااسکریپپتی زیر می شود

"use strict";

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var myfunc = function myfunc(user) {
  if (user) {
    return _react.default.createElement("h1", null, "Hello, ", user.firstName);
  }

  return _react.default.createElement("h1", null, "Hello, To All");
};

var user = {
  firstName: 'Ali'
};

var element = _react.default.createElement("div", null, _react.default.createElement("h1", null, myfunc(user)));

_reactDom.default.render(element, document.getElementById('root'));

همانوطر که می بینید میزان کدنویسی شما حداقل 2 برابر افزایش پیدا می کنه و خوانایی برنامه هم بسیار کاهش پیدا می کنه. پس یکی از مزایای اصلی استفاده از Jsx کاهش شدید کدنویسی و ساده کردن کار برای توسعه دهنده می باشد.

برای اینکه بدونید کدهای Jsx در خروجی تبدیل به چه کدهایی از جاوااسکریپت می شود میتونید به سایت babeljs.io مراجعه کنید. در این سایت و در بخش Try it out میتونید کدهای Jsx خودتون رو بدید تا برای شما کدهای جاوااسکریپت معادل رو ایجاد کنه.

کاربردهای Jsx

از Jsx میتوان برای نوشتن چند خط کد Html زیر هم استفاده کرد. دقت کنید که هر بلاک باید داخل یک المان html یا یک تگ باز و بسته باشد.

const nameList = (
        <div id = "names">
           <h1>Hi Ali</h1>
           <h2>Hi Hasan</h1> 
        </div>
    );

ضمنا برای نام گذاری هر گونه استفاده از ویژگی یا Attribute در Jsx باید از قانون camelCase استفاده کنید. یعنی شروع نام گذاری با حروف کوچک ولی کلمه  دوم با حروف بزرگ.

//صحیح
    <a  href = {handleClick} >Click Me</a>
//غلط
    <a  href = {handleclick} >Click Me</a>

در توضیحات بالا به صورت ساده پاسخ سوال شما Jsx چیست رو دادم. البته موارد بیشتری در مورد Jsx وجود دارد که توصیه می کنم با جستجو در گوگل مطالعه بفرمایید