ارتباط jsx با جاوا و ری اکت (react js)

جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان برنامه نویسی است که برای ایجاد المنت های پویا در صفحات وب و وب اپلیکیشن ها استفاده می شود.همه مرورگر های مدرن امروزه از این زبان پشتیبانی می کنند. تقریبا تمام صفحات وب دارای بسیاری از ویژگی های ایجاد شده توسط این زبان مانند اعتبارسنجی فرم ، انیمیشن های پیشرفته ، پنجره های پاپ اپ و غیره هستند. از جاوا اسکریپت برای ایجاد وب اپلییکیشن ها و صفحات سمت کاربر استفاده می شود.

جاوا اسکریپت به سرعت همه جا را به تسخیر درآورده است. طبق گزارش‌های سالانه‌ی stackoverflow، برای پنجمین سال متوالی جاوا اسکریپت پر استفاده‌ترین زبان در دنیا است. و همه‌ی شواهد نشاندهنده‌ی این موضوع است که در سال‌های آینده هم این روال ادامه خواهد یافت.

اما ری اکت چیست؟

ری اکت کتابخانه برای ساخت رابط کاربری است که توسط فیسبوک و جامعه کاربری آن توسعه پیدا می کند.

برای مثال در معماری MVC از ری اکت معمولا در قسمت V یا View استفاده می شود.

از قابلیت های react می توان به موارد زیر اشاره کرد:

سینتکس JSX:استفاده از این سنتکس الزامی نیست ولی استفاده از آن در جهت استفاده هر چه ساده تر html و xhtml در جاوااسکریپت استفاده از آن پیشنهاد می شود.
کامپوننت ها: اگر در ری اکت به همه چیز را کامپوننت در نظر بگیرید قطعا در آینده می توانید بهتر از کد خود نگهداری کنید.
پترن Flux و جریان یک طرفه داده( Unidirectional data flow ):جریان یک طرفه داده به این معنی که تمام داده های در برنامه یک life-cycle را دنبال می کنند که این موضوع logic برنامه شما را قابل فهم تر می کند.

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

استفاده از DOM مجازی به عنوان یک object باعث بهبود کارایی برنامه نسبت به استفاده از DOM معمولی می شود.
می توان در سمت client-side و server-side و همچنین با سایر فریمورک ها استفاده کرد.
کامپوننت و data pattern باعث بهبود خوانایی می شود; همچنین باعث کمک به نگهداری از برنامه های بزرگ می شود.

JSX چیست؟

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 <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 این کار رو انجام بدید. کدهای شما چیزی مشابه با کدهای جاوا اسکریپپتی زیر می شود:

&quotuse strict&quot

var _react = _interopRequireDefault(require(&quotreact&quot));

var _reactDom = _interopRequireDefault(require(&quotreact-dom&quot));

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

var myfunc = function myfunc(user) {
if (user) {
return _react.default.createElement(&quoth1&quot, null, &quotHello, &quot, user.firstName);
}

return _react.default.createElement(&quoth1&quot, null, &quotHello, To All&quot);
};

var user = {
firstName: 'Ali'
};

var element = _react.default.createElement(&quotdiv&quot, null, _react.default.createElement(&quoth1&quot, null, myfunc(user)));

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

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

دلایل استفاده از React js

درحال حاضر، مهمترین سوالی که با آن برخورد کرده ایم این است که چرا ما باید از React js استفاده کنیم؟
پلتفرم های متن باز زیادی برای ساختن آسان برنامه های وب به صورت front-end مانند Angular وجود دارند. اجازه بدهید به برخی مزایای React نسب به تکنولوژی های رقابتی دیگر و سایر فریم ورک ها نگاهی بیندازیم.

با توجه به اینکه در برنامه نویسی Front-end روزانه تغییرات زیادی در دنیا رخ می دهد و این خیلی دشوار است که دوباره زمانی برای یادگیری یک فریم ورک جدید اختصاص دهیم مخصوصا زمانی که آن فریم ورک جدید در نهایت منسوخ خواهد شد. بنابراین اگر شما به دنبال بهترین گزینه ای برای آینده هستید اما در بین تعداد انبوهی از فریم ورک ها سردرگم شده اید به شما پیشنهاد میکنم که React را حتما بررسی کنید.

سادگی React js
React js از سادگی زیادی برخوردار است که شما می توانید آن را به درستی درک کنید. رویکرد مبتنی بر کامپوننت چرخه عمر برنامه را تضمین می کند و استفاده از چارچوب جاوا اسکریپت باعث شده است یادگیری React بسیار آسان شود تا به راحتی بتوان برنامه های وب و موبایل حرفه ای طراحی کرده و از آن پشتیبانی کرد.

ری اکت از یک زبان خاصی بنام JSX استفاده می کند که اجازه می دهد HTML و جاوا اسکریپت را با همدیگر ادغام کنید. استفاده از این روش خیلی هم ضرورت ندارد و برنامه نویس می تواند از جاوا اسکریپت ساده هم استفاده کند اما JSX کارها را خیلی آسانتر خواهد کرد.

یادگیری آسان
هرکسی که دانش پایه ای از برنامه نویسی را داشته باشد می تواند به راحتی React را یاد بگیرد درحالیکه Angular و Ember که به عنوان “زبان خاص دامنه” به آنها اشاره شده است به این معنی است که یادگیری آنها سخت است. در کل برای یادگیری React js شما فقط به دانش پایه ای از CSS و HTML نیاز دارید.

رویکر بومی
React می تواند برای طراحی برنامه های موبایل مورد استفاده قرار گیرد (React Native). React یک طرفدار قوی از قابلیت استفاده مجدد است به این معنا است که از قابلیت استفاده مجدد کدهای وسیعی پشتیبانی می کند بنابراین در یک زمان مشخص ما می توانیم هم برنامه اندروید و هم برنامه IOS و وب را تولید کنیم.

اتصال داده
React از اتصال داده یک طرفه و معماری برنامه بنام Flux استفاده می کند تا جریان داده را به سوی کامپوننت ها از طریق یک نقطه کنترل توزیع کننده، کنترل کند و این باعث میشود برنامه های بزرگی که در React تولید شده اند به صورت خود مختار به آسانی خطایابی کامپوننت ها را انجام دهند.

جمع بندی

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

منبع مقاله ری اکت: https://amanjacademy.com/react/online/