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>