We want to hear from you!Take our 2020 Community Survey!

JSX ga kirish

Quyidagi o’zgaruvchi bayonotiga e’tibor bering:

const element = <h1>Salom Dunyo!</h1>;

Bu ajoyib yozish uslubi na string na HTML ga o’xshaydi.

Bu JSX deb ataladi, ya’ni JavaScript yozish uslubi kengaytmasi. Biz UI ni qanday ko’rinishga ega bo’lishini tasvirlash uchun shuni React bilan qo’llagan holda ishlatishni maslahat beramiz. JSX sizga boshqa qolip tillarini eslatishi mumkin, lekin u JavaScript ning to’liq kuchi bilan keladi.

JSX React “elementlari” ni hosil qiladi. Biz ularni DOM ga chizishni keyingi bo’limda ko’rib chiqamiz. Quyida, siz boshlashingiz uchun kerak bo’ladigan JSX ning asoslari bilan tanishib chiqishingiz mumkin.

Nega JSX?

React chizish mantig’i boshqa UI matig’lari ( hodisalar bilan qanday ishlanadi, vaqt o’tishi bilan holat qanday o’zgaradi, va ma’lumotlar namoyish qilish uchun qanday tayyorlanadi) bilan tabiiy ravishda boshg’liqligini qo’llab quvvatlaydi

Belgilash va mantiq fayllarini alohida fayllarga qo’yib, sun’iy ravishda texnologiyalarni ajratish o’rniga, React tashvishlarni erkin bog’langan va har ikkalasini (mantiq va belgilash) o’z ichiga olgan “komponentlar” orqali ajratadi.

React da JSX ni ishtatish zarur emas, lekin ko’pchilik JavaScript da UI bilan ishlash uchun vizual yordam sifatida ma’qul ko’radi.

Endi buni chetga surgan holda, qani boshladik!

JSX Ichida Ifoda Biriktirish

Quyidagi misolda, biz name degan o’zgaruvchi hosil qilamiz va uni JSX ichida jingalak qavsga o’ragan holda ishlatamiz:

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX dagi jingalak qavslar ichida istalgan to’g’ri JavaScript ifodasini qo’yishingiz mumkin. Masalan, 2 + 2, user.firstName, yoki formatName(user), bu hammasi to’g’ri JavaScript ifodalari.

Quyidagi misolda, biz formatName(user) JavaScript funksiyasi natijasini <h1> elementiga biriktiramiz.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

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

CodePen da sinab koʻrish

Biz JSX ni o’qish osonroq bo’lishi uchun bir nechta qatorlarga ajratib qo’ydik. Bunday qilish aslida shart emas, agar ajratadigan bo’lsangiz, avtomat ravishda nuqta-vergul qo’yish tuzog’ini oldini olish uchun, uni qavs ichiga joylashingizni ham maslahat beramiz.

JSX O’zi Ham Ifoda

Kompilyatsiyadan keyin, JSX ifodani o’zi ham oddiy JavaScript funksiya chaqiruvlari hisoblanadi va JavaScript obyektlariga aylanadi.

Bu degani, siz JSX ni if bayonotlarida va for tsikllarida, o’zgaruvchilarga berishda, argument sifatida qabul qilishda va funksiyalardan qaytarishda ishlatishingiz mumkin

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}

JSX Atributlarni Ishlatish

Matnni atribut sifatida belgilash uchun qo’shtirnoq ishlatishingiz mumkin:

const element = <div tabIndex="0"></div>;

Atributga JavaScript ifodasini biriktirish uchun jingalak qavsdan foydalansangiz ham bo’ladi:

const element = <img src={user.avatarUrl}></img>;

JavaScript ifodasini atributga biriktirganda, jingalak qavs atrofida qo’shtirnoq ishlatmang. Siz yo qo’shtirnoq (matn uchun) yo jingalak qavslar (ifodalar uchun) ishlatishingiz kerak, ikkalasini birdaniga emas.

Ogohlantiruv:

JSX HTML dan ko’ra JavaScriptga yaqinroq bo’lgani uchun, React DOM xususiyat nomlashda HTML atribut nomlarini o’rniga xususiyatlarni tuyasimonYozuv shaklida nomlash odatini ishlatadi.

Masalan, class JSX da classNamega o’zgaradi, va tabindex esa tabIndexga o’zgaradi.

JSX Bilan Bolalarni Belgilash

Agar teg ichi bo’sh bo’lsa, tezda /> bilan yopishingiz mumkin, huddi XML ga o’xshab:

const element = <img src={user.avatarUrl} />;

JSX teglari bolalarini o’z ichiga olgan bo’lishi mumkin:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX In’ektsiya Hujumlarni Oldini Oladi

JSX da foydalanuvchi kiritmalarini biriktirish xavsiz:

const title = response.potentiallyMaliciousInput;
// Bu havfsiz:
const element = <h1>{title}</h1>;

React DOM JSX ga biriktirilgan har qanday qiymatlarni chizishdan oldin to’g’rilab qo’yadi. Natijada ilovangizda ochiqchasiga yozilmagan hech qanday narsaga in’eksiya qilolmasligingizni ta’minlaydi. Hamma narsa chizishdan avval matnga o’giriladi. Bu saytlar-aro-skriptlash (XSS) hujumlarni oldini olishga yordam beradi.

JSX Obyektni Tashkil Qiladi

Babel JSX ni React.createElement() funksiya chaqiruvlariga kompilyatsiya qiladi.

Bu ikki misol bir xil natijaga ega:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() sizga xatosiz kod yozishga yordam bergan holda, bir nechta tekshiruvlarni amalga oshiradi, lekin oxir oqibat mana shunga o’xshagan obyekt yaratadi:

// Eslatma: bu tarkib soddalashtirilgan
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Bu obyektlar “React elementlari” hisoblanadi. Tasavvur qilish uchun siz bularni ekranda ko’rmoqchi bo’lgan narsalarni ma’lumotlari deb faraz qilsangiz bo’ladi. React bu obyektlarni o’qiydi va DOM ni qurish va uni yangilab turish uchun ishlatadi.

Biz React elementlarini DOM da chizishni keyingi bo’limda yoritamiz.

Maslahat:

Siz yoqtirgan redaktoringizda ES6 va JSX kod to’g’ri yoritilishi uchun Babel bilan sozlashingizni maslahat beramiz.

Is this page useful?Edit this page