Soy nuevo en reaccionar y solo estoy probando un renderizado simple en este momento. No recibo errores en el navegador, pero no aparece nada en mi pantalla que aparezca en mi archivo de reacción de javascript.
html
<html> <head> <script type="text/babel" src="reactfile.js"> testing</script> </head> <link rel="stylesheet" href="/styles.css"> <body id="root"> <p>react test</p> </body> </html>reaccionar archivo javascript
import React from 'react'; import ReactDOM from 'react-dom'; class Helloworld extends React.Component { render() { return ( <div> <p>Hello world!</p> </div> ); } } ReactDOM.render(<Helloworld />, document.getElementById('root'));Lo que le dices reaccionar con esta línea es que pondrás un código HTML dentro del elemento con id root :
ReactDOM.render(<Helloworld />, document.getElementById('root')); Sin embargo, en su código HTML, no existe tal elemento. Para que funcione, simplemente agregue este elemento (con la root de identificación) a su página, así:
<body id="app"> <div id="root"></div> </body>Luego, cada código que producirá su código React se colocará en este elemento.
Haga div con id "raíz" y agregue la etiqueta de script debajo de él. JavaScript no puede acceder al div raíz antes de analizarlo, lo que significa que JavaScript no puede encontrar el elemento que no aparece en el árbol DOM. Por lo tanto, debe colocar el código de secuencia de comandos al final de la línea en la etiqueta del cuerpo.
<body id="app"> <p>react test</p> <div id="root></div> <script type="text/babel" src="reactfile.js"></script> </body>