0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>You don't have to use classes to create React components.</p>
1
<p>You don't have to use classes to create React components.</p>
2
<p>In cases where the component doesn't have a state, it's much easier to use an alternative method:</p>
2
<p>In cases where the component doesn't have a state, it's much easier to use an alternative method:</p>
3
<p>See the Pen<a>js_react_functional_components</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.</p>
3
<p>See the Pen<a>js_react_functional_components</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.</p>
4
<p>Components created as functions are<strong>functional components</strong>. They take an object with properties as their first argument. Their names start with a capital letter.</p>
4
<p>Components created as functions are<strong>functional components</strong>. They take an object with properties as their first argument. Their names start with a capital letter.</p>
5
<p>You'll no doubt be asking where to use them. The answer is simple. We always use it if a component doesn't store any state.</p>
5
<p>You'll no doubt be asking where to use them. The answer is simple. We always use it if a component doesn't store any state.</p>
6
<p>In other words, most of the components in the project should be functional. Otherwise, they behave the same as class components.</p>
6
<p>In other words, most of the components in the project should be functional. Otherwise, they behave the same as class components.</p>
7
<h2>Namespaces</h2>
7
<h2>Namespaces</h2>
8
<p>Let us recall the example from the previous lesson. It involves the use of child components created for parent components:</p>
8
<p>Let us recall the example from the previous lesson. It involves the use of child components created for parent components:</p>
9
<p>Based on the above, the components <CardTitle> and <CardBody> must be implemented as functional components.</p>
9
<p>Based on the above, the components <CardTitle> and <CardBody> must be implemented as functional components.</p>
10
<p>But that's not all. You can go further and implement this structure:</p>
10
<p>But that's not all. You can go further and implement this structure:</p>
11
<p>JSX supports the namespace mechanism. That is not to say you can't live without it, but it is handy.</p>
11
<p>JSX supports the namespace mechanism. That is not to say you can't live without it, but it is handy.</p>
12
<p>Firstly, you only need to import the top-level component. The rest is available through it, which makes sense if you look at JSX as JS code.</p>
12
<p>Firstly, you only need to import the top-level component. The rest is available through it, which makes sense if you look at JSX as JS code.</p>
13
<p>Secondly, we set better semantics this way.</p>
13
<p>Secondly, we set better semantics this way.</p>
14
<p>This mechanism works through static properties:</p>
14
<p>This mechanism works through static properties:</p>
15
<p>See the Pen<a>js_react_functional_components_namespaces</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.</p>
15
<p>See the Pen<a>js_react_functional_components_namespaces</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.</p>
16
<p>This layout method allows you to build components without putting them all in the same file. The structure can be anything, and imports can cover the rest.</p>
16
<p>This layout method allows you to build components without putting them all in the same file. The structure can be anything, and imports can cover the rest.</p>