An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
How Babel transforms JSX to JS
When writing JSX you can either start your tag in lowercase <div>
or in uppercase <Component>
. Below we will discuss each case separately
Lowercase tags
Babel transforms <div>..
into React.createElement('div',...)
. Essentially treating the tag name div
as a string.
Capitalized tags
Babel transforms <Component>...
into React.createElement(Component,...)
. Notice the lack of quotation around Component
this means it will get treated as a variable.
What can the variable hold?
The first argument to React.createElement
can only hold strings or functions that return something that's renderable. Typically it simply holds a React component, which is a function that returns JSX.
Conclusion
Now we know <Component>..
doesn't have to reference a React component. It can also reference a simple string or any function that returns renderable content.
Original Link: https://dev.to/a89529294/how-babel-transforms-jsx-to-js-5hg2
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To