Nima bu komponent?

Frontend rivojlanishda komponent mustaqil va qayta ishlatiladigan foydalanuvchi interfeysining blokidir. U o'zining tuzilishi (HTML), uslubi (CSS) va xulq-atvori (JavaScript) ni inkapsulyatsiya qiladi. Komponentlar murakkab interfeyslarni kichik va boshqariladigan qismlarga bo'lishga yordam beradi, bu esa kodning o'qilishini yaxshilaydi, qo'llab-quvvatlash va test qilishni osonlashtiradi.

Asosiy xususiyatlar:

• Inkapsulyatsiya: Mantiq, markup va uslublar komponent ichida bog'langan.
• Qayta ishlatish: Komponent turli joylarda yoki hatto boshqa loyihalarda ishlatilishi mumkin.
• Mustaqillik: Bir komponentdagi o'zgarishlar boshqalarga minimal ta'sir qiladi.
• Holat va props: Komponentlar ichki holatga (o'zgarishi mumkin bo'lgan ma'lumotlar) ega bo'lishi mumkin va tashqaridan props (xususiyatlar) orqali ma'lumot oladi.

React misolida komponent tuzilishi:

// Button.js komponenti
import React from 'react';
import './Button.css'; // Uslublar importi

function Button(props) {
  return (
    <button className="button-style" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

export default Button;

/* Button.css uslublari */
.button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

// Komponentdan foydalanish
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Button bosildi!');
  };

  return (
    <div>
      <h1>Mening ilovam</h1>
      <Button label="Meni bosing" onClick={handleClick} />
    </div>
  );
}

export default App;

Komponentlar kontseptsiyasi zamonaviy JavaScript freymvorklari va kutubxonalarida, masalan, React, Vue va Angular, markaziy o'rin tutadi.