Почему компоненты React должны начинаться с заглавных букв в JSX?

Разработчики могут использовать React для создания компонентов пользовательского интерфейса с помощью JSX, расширения синтаксиса JS, позволяющего использовать HTML-подобные элементы. В этой статье объясняется, почему компоненты React должны начинаться с заглавной буквы.

JSX — это синтаксис JavaScript, напоминающий HTML. Он транспилируется в обычный код JS, который создает элементы HTML, например, посмотрите на этот код JSX:

<div>Hello JS World!</div>

Переведено из:

React.createElement("div", null, "Hello JS World!")

Чтобы создать элементы в виртуальном DOM React, JSX вызывает React.createElement. Первый аргумент — это тип элемента, здесь «div».

JSX имеет аналогичный способ создания специальных компонентов React, например. CostomComponent:

<CustomComponent />

Транспилируется в:

React.createElement(CustomComponent, null)

Функцию React.createElement можно использовать для создания пользовательского элемента с первым аргументом «CostomComponent».

Компоненты React в JSX должны начинаться с прописной буквы, чтобы правильно транспилироваться в вызовы React.createElement, создавая экземпляр класса компонентов React, отличный от элементов HTML, начинающихся с строчной буквы.

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