Կոմպոնենտների օգտագործումը 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>