Web Components and React Components - Usage Differences


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.
... Loading comments