Компонент деген эмне?

Фронтенд өнүктүрүүдө компонент — бул колдонуучу интерфейсинин көзкарандысыз, кайра колдонулучу блогу. Ал өзүнүн түзүлүшүн (HTML), стилин (CSS) жана жүрүм-турумун (JavaScript) капсулдайт. Компоненттер татаал интерфейстерди кичинекей жана башкарылуучу бөлүктөргө бөлүүгө жардам берет, бул коддун окумдуулугун жакшыртат, тейлөө жана тестирлөөнү жеңилдетет.

Негизги өзгөчөлүктөрү:

• Капсулдаштыруу: Логика, markup жана стиль компоненттин ичинде байланышкан.
• Кайталап колдонуу: Компонентти колдонуу ар кандай бөлүктөрдө же башка долбоорлордо мүмкүн.
• Өзүнчөлик: Бир компоненттеги өзгөртүүлөр башка компоненттерге минималдуу таасир этет.
• Абалы жана props: Компоненттер ички абалга (өзгөрүлүүчү маалыматтар) ээ болушу мүмкүн жана сырттан props аркылуу маалымат алат.

React мисалында компоненттин түзүлүшү:

// Button.js компонент
import React from 'react';
import './Button.css'; // Стилдерди импорттоо

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

export default Button;

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

// Компонентти колдонуу
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Тугмача басылды!');
  };

  return (
    <div>
      <h1>Менин тиркемем</h1>
      <Button label="Мени бас" onClick={handleClick} />
    </div>
  );
}

export default App;

Компоненттер концепциясы заманбап JavaScript фреймворкторунда жана китепканаларында, мисалы, React, Vue жана Angular, негизги орунду ээлейт.