Compiling JSX

1. type="text/babel" and data-type="module":
   • type="text/babel" tells Babel to transpile this script, allowing us to use JSX and modern JavaScript features.
   • data-type="module" indicates that this script should be treated as a module after Babel transpilation. This enables us to use import statements.
   We use both instead of just type="module" because browsers don't natively understand JSX. Babel needs to transform our code first, then it can be treated as a module.
2. Importing React: We've changed from:
   copy

   import { createElement } from '/react.js'
   

   to:
   copy

   import * as React from '/react.js'
   

   This imports all exports from React as a namespace called React. It's beneficial because:
   • It provides access to all React APIs, not just createElement.
   • When using JSX, the transpiler will convert JSX elements to React.createElement calls, so we need the React namespace in scope.

• 📜 Babel documentation on browser usage
• 📜 React documentation on JSX
• 📜 MDN on JavaScript modules