я хочу прочитать React jsx не используя Web Pack. Вариант описанный в на сайте babel
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin="anonymous"></script> </head> <body> <div id="root"></div> <script data-plugins="transform-es2015-modules-umd" type="text/babel"> class Hello extends React.Component { render() { return <h1>Hello {this.props.text}</h1>; } } ReactDOM.render( <Hello text="World" />, document.getElementById('root') ); </script> </body> </html>
тоже не очень нравится.
Я получил объект babel -я У него есть функция transform
const mountPoint = document.createElement('span') let React = obj['React'] let ReactDOM = obj['ReactDOM'] let Hello = obj['babel'].transform(` class Hello extends React.Component { render() { return <h1>Hello {this.props.text}</h1>; } } ReactDOM.render( <Hello text="World" />,mountPoint); `,obj['babel']['availablePresets']['react']);
Объект преобразуется правильно
Но как мне уже преобразованный код использовать, что бы монтировать компонент в MountPoint ?
И есть ли более простые варианты использования jsx на стороне клиента без WebPack и других сборщиков кода ?