Компонент чист?

Компонент дар рушди фронтенд — ин блоки мустақил ва такроршавандаи интерфейси корбар мебошад. Он сохтор (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, марказӣ мебошад.