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>