We all know that when writing JSX tags we need to use lowercase with native DOM elements such as <div/> and we need to capitalize our custom components like this<MyCustomComponent/>.
What we may not understand is what goes on in the background when Babel compiles our code. When it comes to JSX Babel needs to transform it into JavaScript so the browser can understand our code.
Case One - Lower Case JSX Tag
<div>...</div> gets turned into React.createElement('div',....); Babel essentially treats div as a string.
Case Two - Capitalized JSX Tag
<MyVariable>..</MyVariable> gets turned into React.createElement(MyVariable, ...) Note that MyVariable do not need to be a React component, it is a plain old JavaScript variable!
CodeSandBox Example on Dynamic Wrapper
Top comments (0)