[{"slug":"web-components-and-react-components-usage-differences","frontmatter":{"content":"\n**Web Components**\n\n- Custom Component Name must be hyphenated e.g. `my-component`\n- The tag name is case insensitive as it is part of the HTML\n- `` tag that allows component [composition](https://reactjs.org/docs/composition-vs-inheritance.html). Svelte too has the concept of [slots](https://svelte.dev/tutorial/slots).\n- API ⇒ `customElements.define('my-component', ComponentClass)`\n\n**React Components**\n\n- Custom Component Name always starts with a capital letter.\n- It is case sensitive, that is possible because JSX is actually XML(which is case sensitive).\n- Can't have hyphens in the name because it is supposed to be a function that can't have a hyphen in its name.","data":{"category":"React, WebComponents","creationTs":1629719220000,"date":"August 23, 2021 1:47 PM","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","title":"Web Components and React Components - Usage Differences"},"isEmpty":false,"excerpt":"","category":["React","WebComponents"],"creationTs":1629719220000,"date":"August 23, 2021","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","title":"Web Components and React Components - Usage Differences","updated":"September 9, 2021"},"content":"

Web Components

Custom Component Name must be hyphenated e.g. my-component
The tag name is case insensitive as it is part of the HTML
<slot> tag that allows component composition. Svelte too has the concept of slots.
API ⇒ customElements.define('my-component', ComponentClass)

React Components

Custom Component Name always starts with a capital letter.
It is case sensitive, that is possible because JSX is actually XML(which is case sensitive).
Can't have hyphens in the name because it is supposed to be a function that can't have a hyphen in its name.

\n"}]

Category: WebComponents