- Importing React via Script tag.
- Using Babel to transpile JSX into React.createElement
- Use webpack or rollup because Babel itself doesn't handle dependency resolution or module loading; it's primarily focused on transpiling your JavaScript code. --caveats--
- Had to import React whereve we are using JSX.
- Just webpack isn't enough webpack-cli is needed to run the script.
- Used html as a template to include on the build output and automatically import those bundle js.
- Interestingly these script tags are
deferred by default. - So the caveat has just been removed how, React >= 17 has added a new JSX transform. We use it by adding runtimt as "automatic" to our webpack config. [1]
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic"
}]
]
}