Introduction to Component-Based Way in React

Let's say we have a website. On this website we can highlight some blocks: header, content, sidebar, footer, and so on. Each block can be divided into smaller subblocks. For example, in the header you can usually highlight the logo, menu, contact block, and so on.

In React, each such block is called a component. Each component can contain smaller components, which in turn contain even smaller ones, and so on.

Each component in React corresponds to an ES6 module located in the src folder. The file name with the module is written with a capital letter and must correspond to the function located in the code of this module.

For example, a file named App.js should contain the function App inside it:

import React from 'react';

function App() {
	// component code
}

export default App;

One of the components must be the main one - the one to which the other components are added. In React, by default, this component will be the App component. Other components will be connected to this component. We will discuss how this is done later in the tutorial.