Recientemente descubrí React y estoy tratando de entender cómo funciona. pongo este codigo:
class App extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>Hello World</h1> </div> ); } } ReactDOM.render(<App />, document.getElementById("app"));Súper simple, pero mi página está en blanco en lugar de mostrar el elemento h1 que supuestamente representé aquí. ¿Alguien puede explicar por qué no funciona y qué me falta para que funcione?
También hay un elemento simple en el archivo HTML junto con todo el código de instrucciones de la página de documentos de React:
<div id="app"></div> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin ></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin ></script> <script src="index.js"></script>Fragmento de pila:
class App extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>Hello World</h1> </div> ); } } ReactDOM.render(<App />, document.getElementById("app")); <div id="app"></div> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin ></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin ></script>Sospecho que no tienes nada para manejar JSX. Tenga en cuenta que <App /> es una sintaxis de JavaScript no válida. Es una extensión de JavaScript llamada JSX . No tienes que usar JSX con React , pero la mayoría de la gente lo hace.
Si desea usar JSX, deberá usar Babel o similar para compilar (también conocido como "transpilar") el JSX en llamadas a React.createElement . Por lo general, lo hace como un paso de compilación para que lo que se implemente ya esté transpilado (y minimizado y empaquetado). Hay una forma en el navegador de hacerlo con Babel Standalone , pero (fuertemente) no se recomienda para producción. ( Esta pregunta meta muestra el uso independiente de Babel).