React по-разному обрабатывает имена компонентов в зависимости от того, как они написаны. Когда ты рендеришь компоненты с помощью синтаксиса JSX, имена компонентов должны начинаться с заглавной буквы. React использует это соглашение, чтобы отличить пользовательские компоненты от встроенных HTML-элементов.
<div>, <span>) обрабатываются как встроенные HTML или SVG теги<MyComponent>) распознаются как пользовательские React-компонентыclass MyComponent extends Component {
render() {
return <div>Content</div>
}
}
export default MyComponent
Требование заглавной буквы действует независимо от того, как назван файл. Ты можешь определить или экспортировать компонент со строчной буквы в исходном файле, но когда ты импортируешь его в другой файл, в строке импорта нужно использовать заглавную букву.
Пример:
// Файл: myComponent.js
class myComponent extends Component {
render() { return <div /> }
}
export default myComponent
// В другом файле - нужно использовать заглавную букву
import MyComponent from './myComponent'
// Теперь используй его с заглавной буквой
<MyComponent />
Это соглашение об именовании критически важно для того, чтобы JSX-парсер React правильно распознавал и создавал экземпляры твоих пользовательских компонентов. Соблюдение этого стандарта предотвращает ошибки во время выполнения и обеспечивает единообразие во всех React-приложениях.
React использует заглавные буквы, чтобы различать пользовательские компоненты и нативные HTML элементы во время парсинга JSX.
Новый — ещё не проверен сообществом
Вы