</> Softromeda Edu

2-bo‘lim

Muhitni sozlash va birinchi loyiha

Vite bilan loyiha yaratish, papka tuzilishi, createRoot va StrictMode, ishlab chiqish serveri hamda bu darslikdagi misollar qanday tekshirilgani.

🕑 10 daqiqa o‘qish 📄 730 so‘z 👁 0 marta ko‘rilgan
Ushbu bo‘lim mundarijasi
  1. Vite bilan loyiha
  2. Papka tuzilishi
  3. React qayerga ulanadi
  4. Birinchi komponent
  5. Bu darslikdagi misollar qanday tekshirilgan
  6. chiroyli yordamchisi
  7. Foydali vositalar
  8. Ishlab chiqarish uchun yig'ish
  9. Xulosa

React - kutubxona, shuning uchun uni ishlatish uchun ikki narsa kerak: Node.js va yig'uvchi vosita.

Node.js ni o'rnatishni Node.js darsligining 2-bo'limida ko'rgansiz. Agar hali o'rnatmagan bo'lsangiz, avval shuni qiling.

Vite bilan loyiha #

Terminal
npm create vite@latest mening-ilovam
cd mening-ilovam
npm install
npm run dev

Birinchi buyruq bir necha savol beradi - React va JavaScript ni tanlang.

npm run dev esa ishlab chiqish serverini ko'taradi va manzilni chiqaradi:

Natija
  VITE v7.1.0  ready in 312 ms

  ➜  Local:   http://localhost:5173/
Nega Vite kerak

Brauzer JSX ni tushunmaydi. <div>Salom</div> - bu JavaScript emas, shuning uchun uni avval oddiy JavaScript ga o'girish kerak.

Vite shuni qiladi va yana bir nechta ishni:

  1. JSX ni o'giradi;
  2. node_modules dagi modullarni brauzer tushunadigan qilib yig'adi;
  3. Faylni saqlaganingizda sahifani darhol yangilaydi - sahifa qayta yuklanmaydi, faqat o'zgargan komponent almashadi;
  4. Ishlab chiqarish uchun kichik, siqilgan fayllar yasaydi.

Ilgari bu ish webpack va babel bilan qilinardi va sozlash og'ir edi. Vite deyarli sozlamasiz ishlaydi.

Papka tuzilishi #

Vite yaratgan loyiha mening-ilovam/ index.html kirish nuqtasi src/main.jsx React shu yerda ulanadi src/App.jsx asosiy komponent public/ rasm va statik fayllar vite.config.js sozlamalar

React qayerga ulanadi #

index.html juda qisqa:

HTML
<!doctype html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <title>Mening ilovam</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Butun sahifada bitta bo'sh <div> bor. Qolgan hamma narsani React yasaydi.

JSX
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

Uch qadam: root elementini topish, unga React ildizini ulash va <App /> ni chizish.

StrictMode komponentni ikki marta chaqiradi

StrictMode - ishlab chiqishda xatolarni erta topish uchun.

U bitta g'alati narsa qiladi: komponentlarni ikki marta chizadi. Shuning uchun console.log ikki marta chiqadi va yangi boshlovchilar buni xato deb o'ylaydi.

Bu ataylab: agar komponentingiz ikki marta chaqirilganda boshqacha natija bersa, demak unda yon ta'sir bor va u kelajakda muammo keltiradi.

Ikki muhim nuqta: bu faqat ishlab chiqishda sodir bo'ladi, ishlab chiqarishda emas. Va uni o'chirish o'rniga, sababini tuzatish kerak.

Birinchi komponent #

JSX
function App() {
    return (
        <main>
            <h1>Salom, React!</h1>
            <p>Birinchi ilovam ishlayapti.</p>
        </main>
    );
}

export default App;

Faylni saqlang - brauzer o'zi yangilanadi.

Bu darslikdagi misollar qanday tekshirilgan #

Bu darslikdagi har bir misol haqiqatan ishga tushirilgan va ko'rsatilgan natija - dasturning o'zi bergan chiqish.

Buning uchun ikki vosita ishlatiladi.

Birinchisi - react-dom/server. U komponentni HTML satriga aylantiradi:

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

function Salom({ ism }) {
    return <p>Salom, {ism}!</p>;
}

console.log(renderToStaticMarkup(<Salom ism="Malika" />));
Natija
<p>Salom, Malika!</p>

Ikkinchisi - kichik yordamchi. U haqiqiy DOM yaratadi, shunda bosish va yozish kabi hodisalarni ham ko'rsatish mumkin:

JSX
import { JSDOM } from "jsdom";

const dom = new JSDOM('<!doctype html><div id="ildiz"></div>');
globalThis.window = dom.window;
globalThis.document = dom.window.document;
Object.defineProperty(globalThis, "navigator", {
    value: dom.window.navigator,
    configurable: true,
});
globalThis.IS_REACT_ACT_ENVIRONMENT = true;

const { createRoot } = await import("react-dom/client");
const { act } = await import("react");

const joy = document.getElementById("ildiz");
const ildiz = createRoot(joy);

export async function chiz(element) {
    await act(async () => {
        ildiz.render(element);
    });
}

export async function bos(selektor) {
    const el = document.querySelector(selektor);
    await act(async () => {
        el.dispatchEvent(
            new dom.window.MouseEvent("click", { bubbles: true }),
        );
    });
}

export async function yoz(selektor, qiymat) {
    const el = document.querySelector(selektor);
    const oNatija = Object.getOwnPropertyDescriptor(
        dom.window.HTMLInputElement.prototype, "value").set;
    await act(async () => {
        oNatija.call(el, qiymat);
        el.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
    });
}

// Asinxron yangilanishlarni kutish. act() ichida kutamiz - shunda
// React hamma kutilayotgan o'zgarishni qo'llab ulguradi.
export async function kut(ms = 60) {
    await act(async () => {
        await new Promise((yechim) => setTimeout(yechim, ms));
    });
}

export const html = () => joy.innerHTML;
export const matn = (s) => document.querySelector(s).textContent;
export const chiroyli = (xom) => xom.replaceAll("><", ">\n<");

Uni shunday ishlatamiz:

JSX
import { chiz, matn, html } from "./dom-muhit.mjs";

function Kartochka({ ism }) {
    return <div><h3>{ism}</h3></div>;
}

await chiz(<Kartochka ism="Nodira" />);

console.log(matn("h3"));
console.log(html());
Natija
Nodira
<div><h3>Nodira</h3></div>
Bu yordamchi nima uchun kerak

Kitobda "tugmani bossangiz, son ortadi" deb yozish oson. Lekin o'quvchi buni ko'rmaydi - unga ishonishi kerak bo'ladi.

Bu darslikda boshqacha: tugma haqiqatan bosiladi va natija ko'rsatiladi. Agar men xato yozsam, misol tekshiruvdan o'tmaydi.

jsdom - brauzerni Node ichida taqlid qiladigan kutubxona. act() esa React ga "hamma yangilanishni tugat, keyin natijani ko'raman" deb aytadi.

Xuddi shu ikki vosita haqiqiy testlarda ham ishlatiladi - buni 19-bo'limda ko'ramiz. Ya'ni bu o'yinchoq emas, balki professional usulning soddalashtirilgan shakli.

chiroyli yordamchisi #

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

function Royxat() {
    return (
        <ul>
            <li>Namangan</li>
            <li>Andijon</li>
        </ul>
    );
}

const xom = renderToStaticMarkup(<Royxat />);

console.log("bitta qatorda:");
console.log(xom);
console.log("bo'lingan:");
console.log(chiroyli(xom));
Natija
bitta qatorda:
<ul><li>Namangan</li><li>Andijon</li></ul>
bo'lingan:
<ul>
<li>Namangan</li>
<li>Andijon</li>
</ul>

chiroyli - atigi bitta qator: teglar orasiga qator uzilishi qo'yadi. Uzun HTML ni o'qish osonlashadi.

Darslikda natija uzun bo'lganda shu ishlatiladi.

Foydali vositalar #

VositaNima uchun
React DevToolsBrauzerda komponentlar daraxtini ko'rish
ESLintXatolarni erta topish
PrettierKod formatini yagona qilish

React DevTools - brauzer kengaytmasi. U o'rnatilgandan keyin ishlab chiqish vositalarida ikki yangi bo'lim paydo bo'ladi: komponentlar daraxti va ularning joriy props hamda holati.

Nosozlik izlashda u console.log dan ancha tezroq.

Ishlab chiqarish uchun yig'ish #

Terminal
npm run build
npm run preview

build dist/ papkasida tayyor fayllarni yasaydi: siqilgan JavaScript, CSS va index.html.

O'sha papkani istalgan statik hostingga qo'yish mumkin - server kerak emas, chunki React brauzerda ishlaydi.

Ishlab chiqarish yig'masi ancha kichik

npm run dev da fayllar katta va o'qishli bo'ladi - bu ataylab, nosozlik izlash uchun.

npm run build esa boshqacha: nomlar qisqartiriladi, izohlar olib tashlanadi, ishlatilmagan kod yo'q qilinadi va hammasi siqiladi.

Shuning uchun ishlab chiqish paytidagi fayl hajmiga qarab xulosa qilmang - haqiqiy hajmni faqat build dan keyin ko'rasiz.

Amaliy topshiriq
  1. npm create vite@latest bilan loyiha yarating.
  2. npm run dev ni ishga tushirib, brauzerda oching.
  3. App.jsx ni o'zgartirib, sahifa o'zi yangilanishini ko'ring.
  4. index.html ni ochib, ichida nima borligini ko'ring.
  5. main.jsx dagi createRoot qatorini o'qing.
  6. StrictMode ichiga console.log qo'yib, ikki marta chiqishini ko'ring.
  7. StrictMode ni vaqtincha olib tashlab, farqni ko'ring.
  8. React DevTools kengaytmasini o'rnating.
  9. npm run build bilan yig'ib, dist/ papkasini ko'ring.
  10. npm run preview bilan yig'ilgan ilovani oching.

Xulosa #

  • React uchun Node.js va yig'uvchi vosita kerak; eng qulayi - Vite.
  • Brauzer JSX ni tushunmaydi - uni avval oddiy JavaScript ga o'girish kerak.
  • index.html da bitta bo'sh <div id="root"> bor; qolganini React yasaydi.
  • StrictMode ishlab chiqishda komponentni ikki marta chaqiradi - bu xato emas, ogohlantirish.
  • Bu darslikdagi misollar react-dom/server va jsdom bilan haqiqatan ishga tushirilgan.
  • npm run build siqilgan, kichik fayllar yasaydi.

Keyingi bo'limda JSX ni batafsil o'rganamiz.

Xatolik topdingizmi?

Imlo xatosi, ishlamaydigan kod yoki noto‘g‘ri ma‘lumotni ko‘rsangiz - bizga xabar bering. Har bir xabar administrator tomonidan ko‘rib chiqiladi.