Functional Components — JS: React

You don't have to use classes to create React components.

In cases where the component doesn't have a state, it's much easier to use an alternative method:

See the Pen js_react_functional_components by Hexlet (@hexlet) on CodePen.

Components created as functions are functional components. They take an object with properties as their first argument. Their names start with a capital letter.

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.

In other words, most of the components in the project should be functional. Otherwise, they behave the same as class components.

Namespaces

Let us recall the example from the previous lesson. It involves the use of child components created for parent components:

<Card>
  <CardTitle>Title</CardTitle>
  <CardBody>
    <b>Body</b>
  </CardBody>
</Card>

Based on the above, the components <CardTitle> and <CardBody> must be implemented as functional components.

But that's not all. You can go further and implement this structure:

import Card from './Card.jsx';

<Card>
  <Card.Body>
    <Card.Title>Title</Card.Title>
  </Card.Body>
</Card>

JSX supports the namespace mechanism. That is not to say you can't live without it, but it is handy.

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.

Secondly, we set better semantics this way.

This mechanism works through static properties:

See the Pen js_react_functional_components_namespaces by Hexlet (@hexlet) on CodePen.

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.