• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

166
Vistas
Use JSX when using react loaded by <script> tag on html page

Is this possible to use JSX attributes, without bundler? (just using a HTML which is loading react in tag)

index.html file:

<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>

index.js file:

class App extends React.Component {
  render() {
    return <div>Content</div>;
  }
}

const e = React.createElement;
const domContainer = document.querySelector("#root");
ReactDOM.render(e(App), domContainer);
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You need a transpiler, not a bundler. You can run one client-side, but shouldn't because it introduces performance problems (and can make it harder to debug your code).

This is covered in the documentation:

The quickest way to try JSX in your project is to add this <script> tag to your page:

 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Now you can use JSX in any <script> tag by adding type="text/babel" attribute to it. Here is an example HTML file with JSX that you can download and play with.

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new <script> tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your <script> tags automatically.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda