კომპონენტების გამოყენება React-ში

ყველა დაკავშირებულ კომპონენტს შეესაბამება მისი JSX თეგი. მაგალითად, ჩვენ გვაქვს კომპონენტი Product, რაც ნიშნავს, რომ მას შეესაბამება შემდეგი თეგი:

jsx<Product />

კომპონენტის თეგის სახელი აუცილებლად უნდა დაიწეროს დიდი ასოთი, რათა React-მა შეძლოს კომპონენტის გამოძახების გარჩევა HTML თეგის გამოყენებისგან.

მოდით, კომპონენტის App შიგნით გამოვიყენოთ კომპონენტი Product, დავწეროთ მისი შესაბამისი თეგი:

jsximport React from 'react';
import Product from './Product';

function App() {
  return <div>
    <Product />
  </div>;
}

export default App;

შედეგად, რენდერინგის შემდეგ მივიღებთ შემდეგს:

html<div>
  <p>
    product
  </p>
</div>