Разработчики могут использовать 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. Именование в верхнем регистре также является хорошей практикой для отличия пользовательских элементов от встроенных.