React bilan tanishuv

React - foydalanuvchi interfeysini qurish uchun kutubxona. Uning asosiy g'oyasi: interfeys komponentlardan yig'iladi, va har bir komponent "hozirgi holatda men qanday ko'rinishim kerak" degan savolga javob beradi.

Bu darslik siz JavaScript ni bilasiz deb hisoblaydi. Agar hali o'rganmagan bo'lsangiz, avval JavaScript asoslari darsligidan boshlang.

Muammo: DOM ni qo'lda yangilash #

Faraz qiling, sahifada hisoblagich bor. Toza JavaScript da u shunday yoziladi:

let soni = 0;
const tugma = document.querySelector("#tugma");
const matn = document.querySelector("#matn");

tugma.addEventListener("click", () => {
    soni = soni + 1;
    matn.textContent = `Bosildi: ${soni}`;
});

Ikki narsani alohida yuritish kerak: holat (soni) va uni ekranda ko'rsatish (matn.textContent).

Kichik sahifada bu muammo emas. Lekin o'nlab element bir xil ma'lumotga bog'liq bo'lsa, ularning har birini qo'lda yangilash kerak - va bittasini unutish oson.

React ning javobi #

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

function Hisoblagich({ soni }) {
    return <button>Bosildi: {soni}</button>;
}

console.log(renderToStaticMarkup(<Hisoblagich soni={0} />));
console.log(renderToStaticMarkup(<Hisoblagich soni={7} />));

<button>Bosildi: 0</button>
<button>Bosildi: 7</button>

Komponent - bu oddiy funksiya. U ma'lumot oladi va interfeys qanday ko'rinishi kerakligini qaytaradi.

E'tibor bering: textContent ham, querySelector ham yo'q. Siz nima ko'rinishi kerakligini aytasiz, React esa DOM ni qanday o'zgartirishni o'zi hal qiladi.

JSX #

Yuqoridagi kodda g'alati narsa bor: JavaScript ichida HTML.

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

const ism = "Malika";
const ball = 88;

const element = (
    <div className="kart">
        <h3>{ism}</h3>
        <p>Ball: {ball}</p>
        <p>{ball >= 60 ? "o'tdi" : "o'tmadi"}</p>
    </div>
);

console.log(renderToStaticMarkup(element));

<div class="kart"><h3>Malika</h3><p>Ball: 88</p><p>o&#x27;tdi</p></div>

Bu JSX - JavaScript ning kengaytmasi. Jingalak qavs ichida istalgan JavaScript ifodasi yozilishi mumkin.

Ikki narsaga e'tibor bering:

1. class emas, className yozilgan.
2. Apostrof ' bo'lib chiqdi - React hamma matnni avtomatik ekranlaydi.

Ikkalasini ham keyingi bo'limlarda batafsil ko'ramiz.

Nomi qayerdan kelgan #

Uni kim yaratgan #

Vaqt chizig'i #

const [soni, ozgartir] = useState(0);

Virtual DOM #

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

function Royxat({ shaharlar }) {
    return (
        <ul>
            {shaharlar.map((shahar) => (
                <li key={shahar}>{shahar}</li>
            ))}
        </ul>
    );
}

const oldin = ["Namangan", "Andijon"];
const keyin = ["Namangan", "Andijon", "Buxoro"];

console.log(renderToStaticMarkup(<Royxat shaharlar={oldin} />));
console.log(renderToStaticMarkup(<Royxat shaharlar={keyin} />));

<ul><li>Namangan</li><li>Andijon</li></ul>
<ul><li>Namangan</li><li>Andijon</li><li>Buxoro</li></ul>

Ro'yxat o'zgarganda React butun <ul> ni qaytadan yasamaydi. U farqni topadi va faqat bitta yangi <li> qo'shadi.

React qayerda ishlatiladi #

React - kutubxona, freymvork emas. U faqat interfeys bilan shug'ullanadi: marshrutlash, ma'lumot olish va boshqa narsalar uchun alohida vositalar qo'shiladi.

Bu erkinlik ham, qiyinchilik ham: tanlash sizning zimmangizda.

Komponentlar birlashadi #

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

function Nishon({ matn }) {
    return <b>{matn}</b>;
}

function TalabaQatori({ ism, ball }) {
    return (
        <li>
            {ism} <Nishon matn={ball >= 90 ? "alo" : "yaxshi"} />
        </li>
    );
}

function Guruh({ talabalar }) {
    return (
        <ul>
            {talabalar.map((t) => (
                <TalabaQatori key={t.ism} ism={t.ism} ball={t.ball} />
            ))}
        </ul>
    );
}

const guruh = [
    { ism: "Malika", ball: 88 },
    { ism: "Husanboy", ball: 92 },
];

console.log(renderToStaticMarkup(<Guruh talabalar={guruh} />));

<ul><li>Malika <b>yaxshi</b></li><li>Husanboy <b>alo</b></li></ul>

Uchta kichik komponent bir-birining ichiga joylashdi. Aynan shu React ning asosiy kuchi: murakkab interfeys kichik, tushunarli bo'laklardan yig'iladi.

Har bir komponentni alohida o'qish, sinash va qayta ishlatish mumkin.

Xulosa #

• React interfeysni komponentlardan yig'adi; komponent - oddiy funksiya.
• Yondashuv tavsifiy: siz natijani tasvirlaysiz, DOM ni React o'zgartiradi.
• JSX - JavaScript ichidagi belgilash tili; jingalak qavsda istalgan ifoda yoziladi.
• React matnni avtomatik ekranlaydi - XSS dan odatiy himoya.
• Uni Jordan Uolk yaratgan; 2011-yilda Facebook lentasida ishlatilgan, 2013-yilda ochiq kodga chiqarilgan.
• Boshida JSX tufayli keskin tanqid qilingan; bugun bu yondashuv me'yorga aylangan.
• 2019-yilgi ilgaklar sinfli komponentlarni almashtirdi - eski qo'llanmalarga ehtiyot bo'ling.
• Virtual DOM tezlik uchun emas, soddalik uchun.

Keyingi bo'limda muhitni sozlab, birinchi loyihani yaratamiz.