JSX - React bilan interfeys qurish

JSX - JavaScript ning kengaytmasi. U HTML ga o'xshaydi, lekin aslida oddiy JavaScript ifodasiga aylanadi.

Ifodalar #

JSX

import { renderToStaticMarkup } from "react-dom/server";
import { chiroyli } from "./dom-muhit.mjs";

const ism = "Malika";
const ballar = [88, 92, 79];
const talaba = { guruh: "A1", yosh: 20 };

const element = (
    <div>
        <p>{ism}</p>
        <p>{ballar.length} ta ball</p>
        <p>{ballar.reduce((a, b) => a + b, 0) / ballar.length}</p>
        <p>{talaba.guruh}</p>
        <p>{ism.toUpperCase()}</p>
    </div>
);

console.log(chiroyli(renderToStaticMarkup(element)));

Natija

<div>
<p>Malika</p>
<p>3 ta ball</p>
<p>86.33333333333333</p>
<p>A1</p>
<p>MALIKA</p>
</div>

Jingalak qavs ichiga istalgan JavaScript ifodasi yoziladi: o'zgaruvchi, amal, funksiya chaqiruvi, xossa.

Ifoda - ha, buyruq - yo'q

Jingalak qavsga ifoda (qiymat qaytaradigan narsa) yoziladi. Buyruq yozib bo'lmaydi:

JSX

<p>{if (ball > 60) "o'tdi"}</p>        // xato
<p>{for (const x of royxat) x}</p>     // xato

Sabab: JSX oxir-oqibat funksiya chaqiruviga aylanadi, funksiya argumenti esa ifoda bo'lishi kerak.

Shart kerak bo'lsa, uchlik operator yoki && ishlatiladi - ular ifoda:

JSX

<p>{ball > 60 ? "o'tdi" : "o'tmadi"}</p>

Murakkabroq mantiq bo'lsa, uni JSX dan tashqariga chiqaring va oddiy if bilan yozing.

Nima chizilmaydi #

JSX

import { renderToStaticMarkup } from "react-dom/server";

const element = (
    <div>
        <p>{null}</p>
        <p>{undefined}</p>
        <p>{false}</p>
        <p>{0}</p>
        <p>{""}</p>
        <p>{[1, 2, 3]}</p>
    </div>
);

console.log(renderToStaticMarkup(element));

Natija

<div><p></p><p></p><p></p><p>0</p><p></p><p>123</p></div>

null, undefined, false va bo'sh satr - hech narsa chizmaydi.

0 esa chiziladi! Bu juda ko'p xatoga sabab bo'ladi:

Nol va && tuzog'i

Bu naqsh keng tarqalgan:

JSX

{royxat.length && <p>Ro'yxat bo'sh emas</p>}

royxat bo'sh bo'lsa, royxat.length 0 bo'ladi. 0 && ... 0 ni qaytaradi - va React 0 ni ekranga chizadi.

Natijada sahifada kutilmaganda yolg'iz 0 paydo bo'ladi.

To'g'ri shakllar:

JSX

{royxat.length > 0 && <p>Ro'yxat bo'sh emas</p>}
{royxat.length ? <p>Ro'yxat bo'sh emas</p> : null}

Qoida: && ning chap tomoni doim mantiqiy bo'lsin, son emas.

Atributlar #

JSX

import { renderToStaticMarkup } from "react-dom/server";
import { chiroyli } from "./dom-muhit.mjs";

const element = (
    <form>
        <label htmlFor="ism">Ism</label>
        <input id="ism" type="text" defaultValue="Malika" />
        <div className="qator" tabIndex={0}>
            <span data-holat="tayyor">Tayyor</span>
        </div>
    </form>
);

console.log(chiroyli(renderToStaticMarkup(element)));

Natija

<form>
<label for="ism">Ism</label>
<input id="ism" type="text" value="Malika"/>
<div class="qator" tabindex="0">
<span data-holat="tayyor">Tayyor</span>
</div>
</form>

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`tabindex`	`tabIndex`
`onclick`	`onClick`
`data-*`	`data-*` (o'zgarmaydi)

Nega class emas, className

class - JavaScript ning kalit so'zi (sinf e'lon qilish uchun). JSX esa JavaScript ga aylanadi, shuning uchun obyekt xossasi sifatida class nomini ishlatish muammo tug'dirardi.

Xuddi shu sabab for uchun ham: u sikl kalit so'zi.

Qolgan atributlar camelCase ga o'tkaziladi, chunki ular DOM xossalarining nomlariga mos keladi: DOM da ham tabIndex, readOnly, maxLength deb yoziladi.

Yagona istisno - data- va aria- atributlari: ular HTML dagidek qoladi.

Yagona ildiz #

JSX

import { renderToStaticMarkup } from "react-dom/server";
import { chiroyli } from "./dom-muhit.mjs";

function Ikkita() {
    return (
        <>
            <h3>Sarlavha</h3>
            <p>Matn</p>
        </>
    );
}

function OrabOlingan() {
    return (
        <div>
            <h3>Sarlavha</h3>
            <p>Matn</p>
        </div>
    );
}

console.log(chiroyli(renderToStaticMarkup(<Ikkita />)));
console.log("---");
console.log(chiroyli(renderToStaticMarkup(<OrabOlingan />)));

Natija

<h3>Sarlavha</h3>
<p>Matn</p>
---
<div>
<h3>Sarlavha</h3>
<p>Matn</p>
</div>

Komponent bitta element qaytarishi kerak. Ikkita yonma-yon element qaytarmoqchi bo'lsangiz, ularni o'rash kerak.

<>...</> - Fragment. U o'rab turadi, lekin DOM ga hech qanday element qo'shmaydi.

Fragment qachon kerak

Ortiqcha <div> zararsiz tuyuladi, lekin u ikki joyda muammo keltiradi:

CSS Grid va Flexbox - ular bevosita bolalar bilan ishlaydi. Oradagi <div> tuzilmani buzadi.
Jadval - <tr> ichida <div> bo'lishi mumkin emas.

Fragment ikki shaklda yoziladi: qisqa <>...</> va to'liq <Fragment>...</Fragment>. To'liq shakl key kerak bo'lganda ishlatiladi - buni 5-bo'limda ko'ramiz.

Izohlar #

JSX

import { renderToStaticMarkup } from "react-dom/server";

const element = (
    <div>
        {/* Bu izoh chizilmaydi */}
        <p>Ko'rinadigan matn</p>
    </div>
);

console.log(renderToStaticMarkup(element));

Natija

<div><p>Ko&#x27;rinadigan matn</p></div>

JSX ichida izoh {/* ... */} shaklida yoziladi - jingalak qavs ichidagi oddiy JavaScript izohi.

Ichki uslublar #

JSX

import { renderToStaticMarkup } from "react-dom/server";

const uslub = {
    backgroundColor: "teal",
    fontSize: 16,
    paddingTop: "4px",
};

console.log(renderToStaticMarkup(<div style={uslub}>Matn</div>));

Natija

<div style="background-color:teal;font-size:16px;padding-top:4px">Matn</div>

style obyekt qabul qiladi, satr emas. Xossalar camelCase da yoziladi.

E'tibor bering: fontSize: 16 avtomatik 16px bo'ldi. React sonlarga o'lchov birligini o'zi qo'shadi - lekin zIndex yoki lineHeight kabi birliksiz xossalarga qo'shmaydi.

Ichki uslublarni kam ishlating

style qulay, lekin cheklovlari bor: unda :hover, @media yoki animatsiya yozib bo'lmaydi.

Amalda uslublar odatda CSS faylida yoki CSS Modules da saqlanadi, style esa faqat dinamik qiymatlar uchun ishlatiladi - masalan, foizga qarab o'zgaradigan kenglik:

JSX

<div style={{ width: `${foiz}%` }} />

Diqqat: ikki jingalak qavs - tashqarisi JSX ifodasi, ichkarisi obyekt.

JSX nimaga aylanadi #

JSX

import { renderToStaticMarkup } from "react-dom/server";
import { createElement } from "react";

const jsxBilan = <p className="salom">Matn</p>;

const qolda = createElement("p", { className: "salom" }, "Matn");

console.log(renderToStaticMarkup(jsxBilan));
console.log(renderToStaticMarkup(qolda));
console.log("Turi:", typeof jsxBilan);
console.log("Xossalar:", Object.keys(jsxBilan).includes("props"));

Natija

<p class="salom">Matn</p>
<p class="salom">Matn</p>
Turi: object
Xossalar: true

Ikkala shakl bir xil natija beradi, chunki JSX aynan shunga o'giriladi.

JSX element - bu oddiy obyekt: turi, xossalari va bolalari bor. Hech qanday sehr yo'q.

JSX majburiy emas

Yuqoridagi createElement shakli ishlaydi - demak React ni JSX siz ham ishlatish mumkin.

Amalda buni deyarli hech kim qilmaydi: uch qavatli interfeys createElement bilan o'qib bo'lmaydigan bo'lib qoladi.

Lekin bu bilim foydali: JSX - alohida til emas, faqat qisqa yozuv. Xato xabarlarida createElement ni ko'rsangiz, ajablanmaysiz.

Shartli chizish #

JSX

import { renderToStaticMarkup } from "react-dom/server";

function Holat({ ball, kirgan }) {
    if (!kirgan) {
        return <p>Avval tizimga kiring</p>;
    }

    return (
        <div>
            {ball >= 90 && <span>Ajoyib natija</span>}
            <p>{ball >= 60 ? "O'tdingiz" : "O'tmadingiz"}</p>
        </div>
    );
}

console.log(renderToStaticMarkup(<Holat kirgan={false} ball={0} />));
console.log(renderToStaticMarkup(<Holat kirgan ball={95} />));
console.log(renderToStaticMarkup(<Holat kirgan ball={45} />));

Natija

<p>Avval tizimga kiring</p>
<div><span>Ajoyib natija</span><p>O&#x27;tdingiz</p></div>
<div><p>O&#x27;tmadingiz</p></div>

Uch usul ko'rindi:

Erta qaytish - if bilan, komponent boshida.
&& - shart rost bo'lsagina chizish.
Uchlik operator - ikki variantdan birini tanlash.

kirgan atributi qiymatsiz yozilgan: JSX da kirgan - kirgan={true} ning qisqa shakli.

Amaliy topshiriq

Jingalak qavs ichida amal va funksiya chaqiruvini yozing.
if ni JSX ichiga yozib, xatoni ko'ring.
null, false va 0 ni chizib, farqni ko'ring.
royxat.length && ... tuzog'ini takrorlang.
className va htmlFor ni ishlating.
Ikki elementni Fragment bilan qaytaring.
JSX ichida izoh yozing.
style ga obyekt berib, dinamik kenglik yasang.
createElement bilan bir xil natijani oling.
Uch xil shartli chizishni bitta komponentda ishlating.

Xulosa #

Jingalak qavsga ifoda yoziladi, buyruq emas.
null, undefined, false va "" chizilmaydi; 0 esa chiziladi.
&& ning chap tomoni mantiqiy bo'lsin - aks holda ekranda 0 paydo bo'ladi.
class emas className, for emas htmlFor; qolgani camelCase.
Komponent bitta element qaytaradi; ortiqcha <div> o'rniga Fragment <>...</>.
style obyekt oladi; sonlarga px avtomatik qo'shiladi.
JSX oddiy obyektga aylanadi - u alohida til emas, qisqa yozuv.

Keyingi bo'limda komponentlar va props ni o'rganamiz.

Ifodalar #

Nima chizilmaydi #

Atributlar #

Yagona ildiz #

Izohlar #

Ichki uslublar #

JSX nimaga aylanadi #

Shartli chizish #

Xulosa #

Xatolik topdingizmi?