Ի՞նչ է Component-ը React-ում

Component-ը React-ում վերօգտագործվող UI բլոկ է, որը վարում է իր սեփական կառուցվածքը, վիճակը և գործառույթները։ React-ը կառուցված է component-ների շուրջ։

Կարող ես մտածել դրանց մասին որպես JavaScript ֆունկցիաներ, որոնք վերադարձնում են JSX (այսինքն՝ HTML-ի նման կոդ)։

---

Component-ների տեսակները

React-ում գոյություն ունեն երկու հիմնական տեսակ՝

• Function Components — ժամանակակից և առավել տարածված տարբերակ
• Class Components — ավելի հին տարբերակ, որը այժմ քիչ է օգտագործվում

---

Function Component օրինակ

  
function Welcome(props) {
  return <h1>Բարև, {props.name}!</h1>;
}
  

Այս կոմպոնենտը ընդունում է `props` և վերադարձնում է JSX։

---

Class Component օրինակ

  
class Welcome extends React.Component {
  render() {
    return <h1>Բարև, {this.props.name}!</h1>;
  }
}
  

Չնայած սա դեռ աշխատում է, այսօր հիմնականում օգտագործվում են function component-ները՝ React Hooks-ով։

---

Component-ների անվանման կանոններ

• Component-ները միշտ պետք է սկսվեն մեծատառով (`MyComponent`)
• Կարող են գտնվել առանձին ֆայլերում՝ հեշտ վերօգտագործման համար
• JSX-ում component-ները օգտագործվում են որպես HTML tag-եր՝ `<Welcome />`

---

Component-ների օգուտները

• Վերօգտագործելիություն
• Կոդի բաժանում՝ ըստ պատասխանատվության
• Հեշտ թեստավորում և փոփոխում

---

Props՝ տվյալների փոխանցում component-ներին

  
function Welcome(props) {
  return <h1>Բարև, {props.name}!</h1>;
}

<Welcome name="Արամ" />
  

`props`-երը թույլ են տալիս component-ներին դինամիկ կերպով տվյալներ փոխանցել։

---

Component-ը որպես UI միավոր

React component-ը կարող է ունենալ իրեն հատուկ վիճակ, իրադարձությունների մշակիչներ և ներքին կառուցվածք։ Հաջորդ հոդվածում հենց այս մասին կխոսենք՝ **state և event handling**։

---

Հաջորդ մասում կխոսենք component-ի ներսում պահվող տվյալների՝ `state`-ի մասին և ինչպես են օգտագործվում event-ները։