I would like to be able to use JSX (with react) within chrome console on any webpage in order to quickly create and test jsx react components on any webpage.
This is helpful for me because I have chrome UI extensions ideas that I want to test quickly on any webpage instead of setting up boilerplate environment every time I want to test something.
I'm looking for a way to make JSX work directly inside chrome console?
On of the ways I tried (but not working):
// 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 '<'
I could use babel compiler and copy-and-paste transpiled to chrome console, but this way will waste a lot of time if there's a way to make jsx work directly on chrome console.
JSX must be transpiled into regular Javascript before a browser can run it. If you want the DevTools console to run your input through a transpiler before executing it, you'll need to do something like create an extension that modifies the DevTools (which might be impossible), or create your own extension that presents a different console and which performs transpilation.
You can use React on other webpages by injecting the React library into the page at runtime, and then invoke React methods from the console to mount an app, but the app must be implemented without JSX.