¿Es posible usar atributos JSX , sin paquete ? (solo usando un HTML que está cargando reaccionar en la etiqueta)
archivo index.html:
<html lang="en"> <body> <div id="root"></div> <script src="react.development.js" crossorigin></script> <script src="react-dom.development.js" crossorigin></script> <script src="index.js"></script> </body> </html>
archivo index.js:
class App extends React.Component { render() { return <div>Content</div>; } } const e = React.createElement; const domContainer = document.querySelector("#root"); ReactDOM.render(e(App), domContainer);
Necesita un transpilador , no un empaquetador. Puede ejecutar un lado del cliente, pero no debería porque presenta problemas de rendimiento (y puede dificultar la depuración de su código).
Esto está cubierto en la documentación :
La forma más rápida de probar JSX en su proyecto es agregar esta etiqueta
<script>
a su página:<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Ahora puede usar JSX en cualquier etiqueta
<script>
al agregarle el atributotype="text/babel"
. Aquí hay un archivo HTML de ejemplo con JSX que puede descargar y jugar.Este enfoque está bien para aprender y crear demostraciones simples. Sin embargo, hace que su sitio web sea lento y no es adecuado para la producción. Cuando esté listo para seguir adelante, elimine esta nueva etiqueta
<script>
y los atributostype="text/babel"
que ha agregado. En su lugar, en la siguiente sección configurará un preprocesador JSX para convertir todas sus etiquetas<script>
automáticamente.