Reactjs Component Names Must Begin With Capital Letters

ReactJS component names must begin with capital letters?

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

See HTML tags vs React Components.

• <component /> compiles to React.createElement('component') (html tag)
• <Component /> compiles to React.createElement(Component)
• <obj.component /> compiles to React.createElement(obj.component)

React component name must start with capital letter when using hooks

but presentational components name should start with a lowercase letter

They aren't, User-Defined Components Must Be Capitalized

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

Why do components in react need to be capitalized?

From some react release notes

the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

Make sure to start component names with a capital letter

It appears this package cannot be used in react-native (component packages typically don't unless they specify compatibility with RN), and you should consider switching to something like react-native-vector-icons.

Why should js function's name starts with a capital letter

Here, you have tried to use FormattedDate as a component. Not as an ordinary function.

All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated as a built-in element like a <div> or a <span>. This is because of the way JSX works.

You can find more information here

is there any way to use lowercase letter for a component in ReactJS?

Here's some part of the docs...maybe from here you can get a better idea.

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

https://reactjs.org/docs/jsx-in-depth.html

---

Related Topics