В React, названия компонентов должны начинаться с заглавной буквы, чтобы отличать их от обычных HTML-элементов и переменных.

Пространство имен - это концепция, которая позволяет организовывать код в отдельные модули или компоненты для удобного управления и изоляции функциональности. Пространства имен позволяют избежать конфликтов имен между различными компонентами или модулями в приложении.

Пространства имен в React помогают разделить код на логические блоки, упрощают его понимание и поддержку, а также способствуют повторному использованию компонентов и модулей.

Представим компоненты <CardTitle> и <CardBody>, которые должны быть реализованы как функциональные:

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

Но это еще не всё, можно пойти дальше и реализовать такую структуру:

import Card from "./Card.jsx"
 
;<Card>
  <Card.Body>
    <Card.Title>Title</Card.Title>
  </Card.Body>
</Card>

JSX поддерживает механизм пространств имён. Не сказать, что без него нельзя жить, но он довольно удобен. Во-первых, достаточно импортировать только компонент верхнего уровня, а остальное доступно уже через него, что довольно логично, если смотреть на JSX как на JS-код. Во-вторых, так лучше задаётся семантика.

Назад