Me gustaría poder usar JSX (con reaccionar) dentro de la consola de Chrome en cualquier página web para crear y probar rápidamente los componentes de reacción de jsx en cualquier página web.
Esto es útil para mí porque tengo ideas de extensiones de interfaz de usuario de Chrome que quiero probar rápidamente en cualquier página web en lugar de configurar un entorno repetitivo cada vez que quiero probar algo.
¿Estoy buscando una manera de hacer que JSX funcione directamente dentro de la consola de Chrome?
De las formas en que lo intenté (pero no funcionó):
// appending babel, react, reactdom scripts (This code to run on chrome console) var script_babel = document.createElement('script'); script_babel.type = 'text/javascript'; script_babel.src = 'https://unpkg.com/@babel/standalone/babel.min.js'; document.head.appendChild(script_babel); var script_react = document.createElement('script'); script_react.crossorigin = true; script_react.src = 'https://unpkg.com/react@18/umd/react.development.js'; document.head.appendChild(script_react); var script_reactdom = document.createElement('script'); script_reactdom.type = 'text/javascript'; script_reactdom.crossorigin = true; script_reactdom.src = 'https://unpkg.com/react-dom@18/umd/react-dom.development.js'; document.head.appendChild(script_reactdom); // testing if jsx works on chrome console const test = <div>Hello World</div> // gives an error: Uncaught SyntaxError: Unexpected token '<'Podría usar el compilador de babel y copiar y pegar transpilado a la consola de Chrome, pero de esta manera perderé mucho tiempo si hay una manera de hacer que jsx funcione directamente en la consola de Chrome.
JSX debe transpilarse a Javascript normal antes de que un navegador pueda ejecutarlo. Si desea que la consola de DevTools ejecute su entrada a través de un transpilador antes de ejecutarla, deberá hacer algo como crear una extensión que modifique DevTools (lo que podría ser imposible), o crear su propia extensión que presente una consola diferente y que realiza la transpilación.
Puede usar React en otras páginas web inyectando la biblioteca React en la página en tiempo de ejecución y luego invocar métodos React desde la consola para montar una aplicación, pero la aplicación debe implementarse sin JSX .