JSX از عبارت JavaScript XML گرفته شد‌ه‌است. React از JSX براي تمپليت سازي ، به مكان كدهاي بي آلايش JavaScript به كار گيري مي نمايد ، استعمال از آن ضروري وجود ندارد البته مزيت هايي داراست كه بعضا از آنان‌را پيرو ي مقاله برايتان توضيح مي دهيم : طراحي اپليكيشن در مشهد JSX سريعتر ميباشد زيرا خلال كامپايل كردن كدها به JavaScript ، سئو كدها را نيز اعمال ميدهد. JSX دارنده ويژگي type-safe ميباشد ؛ يعني از ساخت‌و‌ساز اشتباه در اشكال اطلاعات خودداري مي نمايد و در زمان كامپايل كردن غلط ها را تشخصي مي‌دهد و طراحي تمپليت ها را هم آسانتر مي نمايد.

يك نمونه از Jsx و جاوا
اعتنا داشته باشيد كه در‌صورتي‌كه ما از Jsx به كار گيري نكنيم كدنويسي جاوا اسكريپت ما به صورت قابل توجهي زياد مي‌گردد. تحت عنوان مثال نمونه پايين را در حيث بگيريد.

فرض نمائيد در خروجي قصد داريم درصورتي كه كاربري با اسم Ali وجود داشت عبارت Hello Ali چاپ بشود و درصورتي كه كاربري با اين اسم وجود نداشت عبارت Hello To All چاپ خواهد شد. اين نرم افزار بي آلايش را ما مي تونيم با به كار گيري از Jsx به طور تحت بنويسيم:

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

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

let user = {
firstName: 'Ali'
};

let element = (

{myfunc(user)}

);

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 كاهش شايان توجه كدنويسي و معمولي كردن عمل براي گسترش دهنده است.

دلايل به كار گيري از React js
حالا، مهم‌ترين سوالي كه با آن عكس العمل كرده ايم اين ميباشد كه چرا ما بايستي از React js استعمال كنيم؟
پلتفرم هاي متن گشوده متعددي براي ساختن سهل و آسان نرم افزار هاي اينترنت به طور front-end مانند Angular وجود دارا‌هستند. اذن بدهيد به برخي مزاياي React نسب به تكنولوژي هاي رقابتي ديگر و بقيه قاب ورك ها نگاهي بيندازيم.

با اعتنا به اينكه در اپ نويسي Front-end روزمره تغييرات متعددي در جهان چهره ميدهد و اين خيلي مشقت بار ميباشد كه مجدد وقتي براي يادگيري يك قاب ورك تازه تخصيص دهيم مخصوصا وقتي كه آن كادر ورك نو در غايت منسوخ شود. به اين ترتيب چنانچه شما در‌پي شايسته ترين آيتم اي براي بعدي مي باشيد ولي دربين تعداد انبوهي از كادر ورك ها سردرگم گرديده ايد به شما سفارش مي‌كنم كه React را مسلما رسيدگي فرمائيد.