Actualmente estoy estudiando React y he configurado un ejemplo simple de "Hola, mundo":
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script> </body> </html> POR CIERTO. Deliberadamente no utilicé una cadena de herramientas como create-react-app para comprender los conceptos básicos.
El siguiente fragmento de código es en realidad algo que un navegador web no entiende, porque no es JavaScript estándar.
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));Es JSX (extensión de sintaxis de JavaScript), por lo que debe compilarse. Por ejemplo con Babel. Sé que incluí en el encabezado del archivo html el compilador de Babel. Pero para mí no está claro cuándo y cómo se lleva a cabo el proceso de compilación real.
¿Hay una devolución de llamada en el paquete de Babel que se llama antes de la representación real y compila el archivo en el que estaba a través de la etiqueta <script src=""> incluida?
El script de Babel realiza lo siguiente:
DOMContentLoadedsrc<script> para evaluar el código recién transformado.