Using Components in React

Each connected component has its own JSX tag. For example, we have a component Product, which means it has the following tag:

<Product />

The component tag name must be capitalized so that React can distinguish between calling the component and using an HTML tag.

So, let's use the Product component inside the App component by writing the corresponding tag:

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

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

export default App;

As a result, after rendering, you will get the following:

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

Make a User component that will output user data. Let this component just output some text for now. Use this component in the App component.