Estoy aprendiendo a reaccionar y no puedo mostrar mi componente.
Tengo un archivo html de bienvenida con el siguiente código:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org"><head> <meta charset="utf-8" /> <title>Hello React!</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div class="root"></div> <script type = "text/babel" src= "App.js"> </script> <script> import {Component} from "react"; class App extends Component { render() { return( <h1>Hello everyone nice to see it finally works!!!</h1>) } } ReactDOM.render(<App />, document.querySelector(".root"));</script> </body> </html>Esta es mi aplicación.js
import React, {Component} from 'react' class App extends React.Component{ constructor(props) { super(props); this.state = { name: '', appVersion: '' } } render(){ return( <h1>Hello everyone nice to see it finally works!!!</h1> ) } }Nota: Después de que mi App.js no funcionó, intenté usar el componente en línea del archivo html como puede ver. Pero incluso eso no ayuda. Espero que alguien pueda darme una pista.
Creo que no funciona usar scripts externos ( <script src="..."> ) junto con el in-browser-babel-transpiler (aunque no estoy seguro).
Funciona con cualquiera
El enfoque más común es configurar un proyecto node.js que incluya webpack, servidor, babel, etc., por ejemplo, con create-react-app .
Aquí no necesita (y no puede usar) la import .
React ya está importado al ámbito global mediante la etiqueta <script ...> . Para usar Component , puede usar React.Component :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org"> <head> <meta charset="utf-8" /> <title>Hello React!</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div class="root"></div> <script type="text/babel"> class App extends React.Component { render() { return( <h1>Hello everyone nice to see it finally works!!!</h1> ); } } ReactDOM.render(<App />, document.querySelector(".root")); </script> </body> </html> Importar <script src="app.js"> aparentemente solo funciona sin JSX dentro de app.js (es decir, sin babel-transpiler), debido a las restricciones de CORS :
// index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org"> <head> <meta charset="utf-8" /> <title>Hello React!</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div class="root"></div> <script src="app.js"></script> <script type="text/babel"> ReactDOM.render(<App />, document.querySelector(".root")); </script> </body> </html> // app.js class App extends React.Component { constructor( props ){ super(props); this.state = { name: 'some name', appVersion: '' }; } render(){ return [ React.createElement( 'h1', null, 'it works, but without JSX! ' ), React.createElement( 'p', null, 'Name: ' + this.state.name ), ]; } }