Introduction to React Components

Let's look at any website. It consists of a set of independent blocks: header, sidebars, footer, content. We can say that these blocks are components in the sense implied in React.

If you look at the same header, you can highlight a block with a logo, a block of contacts, a block with a menu, and so on. That is, components can consist of other subcomponents.

The same thing happens in React - a site is built from a set of components, which in turn can contain other components.

In React, each component is a separate module. Usually, development starts with the main component App, which contains the others.

Let's practice creating new components.

Let's say for example we need a component that displays product data. To do this, we need to create a file Product.js in the working folder and add the following code to it:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

As you can see, our component currently returns a paragraph with text. In the following lessons, we will adjust this text so that the product data is returned, formatted in the layout we need. But for now, for the sake of warming up, we will leave just a paragraph with a blank text.

Let's now output our created component in the App component. Let's say our App now have the following code:

import React from 'react';

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

export default App;

First, we need to import the product component we created:

import React from 'react';
import Product from './Product'; // import the product function App() {
	return <div>
		text
	</div>;
}

export default App;

After such import, the App component can be used inside the Product component.