jsx چیست

<div onclick="myFunc"> </div>

سلام دوستان امروز میخواهم با هم یکمی بیشتر در مورد jsx صحبت کنیم این که چی هست این زبان  و چه کاربردی دارد

من به شخصه کارهایی که در طول روز در حال یادگیری هستم رو این جا مینویسم پس انتظار رسمی نوشتن از من نداشته باشید چون میخواهم تجربه های یادگیری ام را در این جا با شما به اشتراک بگذارم

jsx چیست ؟ در react.js با اصطلاحی آشنا شدم به اسم jsx یه نگاهی به مثال پایین میندازیم و ادامه میدیم

const element = <h1>Hello, world!</h1>;

عبارت بالا یک jsx هستش ، شاید میگین jsx که همون html ، منم به شما حق میدم ولی همون html اما فرق داره حتما دیگه!!

این طوری میتونم به شما بگم که در React ما یه قسمت داریم به اسم jsx که این قسمت کد های html در متغیری جاوا اسکریپ قرار میگیرند و قبل از اجرا شدن react این کد های html به کد های جاوا اسکریپت کامپایل ( Render ) می شوند.

در jsx  یک سری قوانین هستش که باید رعایت شوند در غیر این صورت کدمان کار نمی کند

به طور مثال اگر ما مثال بالا را در نظر بگیریم این جا فقط ما یک خط کد html نوشتیم اما اگر بخواهیم چند خط کد html بنویسم به صورت زیر عمل می کنیم

var myList = (
<h1> salam Doostan   </h1>
<p> this is paragraph </p>
)

برای کامپایل کردن کد های jsx از دستور زیر استفاده می شود

ReactDOM.render(jsx-expression , select element)

کد بالا متد render دو تا پارامتر دریافت می کند

پارامتر اول اون متغیری که شاید jsx ما هستش رو قرار میدهیم

پارامتر دوم المنتی که انتخاب کردیم تا کد react در انجا اعمال شود را انتخاب می کنیم .

درسته که اکثر قوانین دستوری  jsx شبیه زبان html هستش و تقریبا همون html اما یک سری تفاوت هایی هم با هم دارند به طور مثال یکی از شایع ترین تفاوت های html با jsx در این است که ما وقتی میخواهیم برای امنت html یک class تعریف کنیم از خصوصه class استفاده می کنیم مانند قطعه کد زیر :

<div class="footer"> </div>

اما در تعریف کلاس در jsx به جای نوشتن class از خصوصه className استفاده می کنیم

<h1 className="big">Hey</h1>

دلیلش هم واضع است چون در جاوا اسکریپ کلمه class یک کلمه رزور شده است و نمیتوان از آن استفاده کرد اما با کامپایل شدن className به class تبدیل می شود.

یکی دیگر از پیچیدگی های jsx استفاده از تگ های Selef End هستش :

به طول مثال ما در html دو مدل تگ داریم :

مدل اول : تگ های دربرگیرنده یا container که این نوع تگ ها به تگ های

ReactDOM.render(
  <h1>2 + 3</h1>,
  document.getElementById('app')
);

ReactDOM.render(
  <h1>{2 + 3}</h1>,
  document.getElementById('app')
);

var name = "MehDi"

ReactDom.render(<h1>{name}</h1> , document.getElementById('app'))

var gooseImg = <img src = {goose} />  

<div onclick="myFunc"> </div>

<div onClick="myFunc"> </div>

قانون دیگری که در JSX وجود دارد این است که شما نمیتوانید از if در میان کد های  jsx استفاده کنید !!

اما نگران نباشید شاید از خودتون بپرسید مگه میشه از دستورات شرطی نشه استفاده کرد !! پاسخ من به شما اینه نه نمیشه اما یک راه هست و استفاده از دستور if در بیرون از کد jsx به کد زیر توجه کنید :

if (user.age >= drinkingAge) {
  var message = (
    <h1>
      Hey, check out this alcoholic beverage!
    </h1>
  );
} else {
  var message = (
    <h1>
      Hey, check out these earrings I got at Claire's!
    </h1>
  );
}

ReactDOM.render(
  message, 
  document.getElementById('app')
);

استفاده از متد .map

متد .map در jsx چی هستش ؟

این متد یه جور حلقه هستش و برای loop استفاده میشه به این صورت که ابتدا شما یک آرایه دارید به صورت زیر

var people = ['mehdi', 'hadi', 'milad'];

در بالا ما یک آرایه ای تعریف کردیم و حالا میخواهیم این آرایه رو به اصطلاح for each کنیم و از مقادیرش استفاده کنیم

در JSX شما باید از متد .map استفاده کنید به این صورت که این متد فقط به آرایه ها و متغییر های لیستی کار می کند

var peopleLIs = people.map(function(person , i){
  // return statement congration Nowruz :
return <li key={ 'person_'+ i } > {person}   عزیز پیشاپیش عیدتون مبارک     </li>
});

کد بالا نشان می دهد که آرایه people از متد map برای پیمایش مقادیرش استفاده کرده و در داخل متد map دو تا پارامتر مشاهده می کنیم پارامتر اول یک مقدار از people است که در هر بار پیمایش مقدارش تغییر می کند و پارامتر دوم که i می باشد نشان دهنده تعداد چرخش است و در خط return هم ما از key استفاده کرده ایم این attribute مانند id می باشد و برای React معنی دارد و هیچگونه جنبه ظاهری به برنامه اضافه نمی کند. اگر دقت داشته باشید در مقدار key ما از i مقدار دهی کردیم که باعث عدد گذاری می باشد.

خروجی به صورت زیر می باشد :

// hadi عزیز پیشاپیش عیدتون مبارک

// milad عزیز پیشاپیش عیدتون مبارک

// mehdi عزیز پیشاپیش عیدتون مبارک

پست های مرتبط :

React قسمت اول React قسمت دوم – استفاده کامپوننت در کامپوننت در React pwa چیست و چگونه باید پیاده سازی شود ؟ prototype در جاوا اسکریپت چیست ؟