M

MLOG

O'zbek

React'ga tez va yengil muqobil bo‘lgan Preact'ni o‘rganing. U unumdorligi muhim veb-ilovalar uchun juda mos keladi. Uning afzalliklari, qo'llanilishi va boshlash yo'llarini bilib oling.

Preact: Zamonaviy veb-ishlab chiqish uchun yengil vaznli React alternativi

Veb-ishlab chiqishning doimiy rivojlanayotgan landshaftida yuqori unumdorlikka ega va foydalanuvchiga qulay ilovalar yaratish uchun to'g'ri front-end kutubxonasi yoki freymvorkini tanlash juda muhim. React dominant kuchga aylangan bo'lsa-da, uning hajmi va murakkabligi ba'zan, ayniqsa, unumdorlik birinchi o'rinda turadigan loyihalarda to'siq bo'lishi mumkin. Aynan shu yerda Preact o'zini namoyon qiladi – bu React'ga o'xshash API'ga ega tezkor, yengil muqobil bo'lib, soddalashtirilgan ishlab chiqish tajribasini izlayotgan dasturchilar uchun jozibador yechim taklif etadi.

Preact nima?

Preact - bu foydalanuvchi interfeyslarini yaratish uchun virtual DOM taqdim etuvchi JavaScript kutubxonasi. U React uchun to'g'ridan-to'g'ri o'rinbosar bo'lishni maqsad qilgan bo'lib, React'ning asosiy funksionalligini ancha kichikroq hajmda taklif etadi. React hajmi taxminan 40KB (minifikatsiyalangan va gziplangan) bo'lsa, Preact atigi 3KB ni tashkil etadi, bu esa uni hajmi va unumdorligi muhim bo'lgan ilovalar uchun ideal tanlovga aylantiradi.

Preact'ni React'ning ixchamroq va tezroq qarindoshi deb o'ylang. U xuddi o'sha asosiy afzalliklarni – komponentlarga asoslangan arxitektura, virtual DOM'ni taqqoslash va JSX qo'llab-quvvatlashini – soddalik va samaradorlikka e'tibor qaratgan holda taqdim etadi. Bu uni, ayniqsa, resurs cheklovlari mavjud bo'lgan mobil ilovalar, bir sahifali ilovalar (SPA) va o'rnatilgan tizimlar uchun jozibador qiladi.

Preact'dan foydalanishning asosiy afzalliklari

Preact'ni qo'llash sohalari

Preact quyidagi stsenariylar uchun ayniqsa mos keladi:

Preact va React: Asosiy farqlar

Preact React uchun to'g'ridan-to'g'ri o'rinbosar bo'lishni maqsad qilgan bo'lsa-da, ikki kutubxona o'rtasida ba'zi asosiy farqlar mavjud:

Preact bilan ishlashni boshlash

Preact bilan ishlashni boshlash juda oson. Siz turli xil vositalar va yondashuvlardan foydalanishingiz mumkin, jumladan:

create-preact-app yordamida

Yangi Preact loyihasini boshlashning eng oson yo'li bu create-preact-app'dan foydalanishdir. Bu buyruqlar satri vositasi bo'lib, u ishlab chiqish serveri va tuzish jarayoni bilan asosiy Preact loyihasini sozlaydi.

npx create-preact-app my-preact-app

Ushbu buyruq `my-preact-app` nomli yangi katalog yaratadi va unda asosiy Preact loyiha tuzilmasi bo'ladi. Keyin siz katalogga o'tib, ishlab chiqish serverini ishga tushirishingiz mumkin:

cd my-preact-app
npm start

Qo'lda sozlash

Siz Preact loyihasini qo'lda ham sozlashingiz mumkin. Bu asosiy HTML faylini yaratish, Preact va kerakli bog'liqliklarni o'rnatish va Webpack yoki Parcel kabi vositalar yordamida tuzish jarayonini sozlashni o'z ichiga oladi.

Birinchi navbatda, `index.html` faylini yarating:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Preact App</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

Keyin Preact va htm'ni o'rnating:

npm install preact htm

Quyidagi tarkibga ega `index.js` faylini yarating:

import { h, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

function App() {
  return html`<div>Hello, Preact!</div>`;
}

render(html`<${App} />`, document.getElementById('app'));

Nihoyat, kodingizni to'plash uchun Webpack yoki Parcel yordamida tuzish jarayonini sozlang.

Misol: Preact'da oddiy hisoblagich komponenti

Bu Preact'dagi oddiy hisoblagich komponentiga misol:

import { h, useState } from 'preact';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Ushbu komponent hisoblagich holatini boshqarish uchun `useState` hook'idan foydalanadi. `increment` funksiyasi tugma bosilganda holatni yangilaydi. Bu React kodiga o'xshashligini ko'rsatadi.

Preact ekotizimi va hamjamiyati

Preact ekotizimi React'nikidan kichikroq bo'lsa-da, u hali ham turli xil foydali plaginlar va kutubxonalarni taklif etadi. Mana bir nechta diqqatga sazovor misollar:

Preact hamjamiyati faol va qo'llab-quvvatlaydi. Siz Preact GitHub repozitoriysi, Preact Slack kanali va turli onlayn forumlar va hamjamiyatlarda yordam va resurslarni topishingiz mumkin.

Preact'dan foydalanish bo'yicha eng yaxshi amaliyotlar

Preact'dan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

Xulosa

Preact tez, yengil va samarali front-end kutubxonasini izlayotgan dasturchilar uchun React'ga jozibador muqobil taklif etadi. Uning kichik hajmi, React bilan mosligi va soddalashtirilgan ishlab chiqish jarayoni uni mobil ilovalar, SPA'lar, o'rnatilgan tizimlar va unumdorlik muhim bo'lgan veb-saytlar uchun ajoyib tanlovga aylantiradi.

React kuchli va ko'p funksiyali kutubxona bo'lib qolayotgan bo'lsa-da, Preact unumdorlik va soddalikni birinchi o'ringa qo'yadigan dasturchilar uchun qimmatli variantni taqdim etadi. Har bir kutubxonaning kuchli va zaif tomonlarini tushunib, dasturchilar o'zlarining maxsus loyiha talablariga qaysi vosita eng mos kelishi haqida ongli qaror qabul qilishlari mumkin.

Murakkab veb-ilova yoki oddiy mobil ilova yaratayotgan bo'lsangiz ham, Preact'ni React'ga kuchli va yengil muqobil sifatida ko'rib chiqishga arziydi.

Qo'shimcha manbalar