Intenté varias formas de usar Google, revisé el sitio oficial pero no funcionó. El código solo funciona si lo hago así en el archivo HTML de node.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"> </div> <script> function Hello() { return React.createElement('h1', null, "Hello world") } ReactDOM.render(Hello(), document.getElementById('root')); </script> </body> </html>y quiero que funcione si hago este cambio en el código
<script> function Hello() { return <h1>Hello World</h1> } ReactDOM.render(<Hello />, document.getElementById('root')); </script>también, ¿cómo transfiero datos de mi base de datos MongoDB o una matriz en app.js para reaccionar useState?
mi archivo app.js:
const express = require('express') const app = express() app.get('/', (req,res) => { res.sendFile(__dirname + '/index.html') }) app.listen(3000)Node.js es completamente irrelevante allí. Estás lidiando con un código completamente del lado del cliente.
La sintaxis JSX no es parte de JavaScript. No puedes usarlo en JavaScript simple. Tienes que ejecutarlo a través de un transpiler para convertirlo a JavaScript.
Ha cargado un transpiler (Babel) pero no lo está utilizando.
Mire la documentación de React :
Ahora puede usar JSX en cualquier etiqueta
<script>al agregarle el atributotype="text/babel".
No agregaste ese atributo.
Tenga en cuenta que la transpilación en el navegador es lenta y relativamente difícil de depurar. Recomiendo encarecidamente utilizar un entorno de desarrollo local .
En primer lugar: no puede usar el lado del cliente de Node.js.
Si desea utilizar React en un sitio web HTML que ya ha creado: reactjs.org/docs/add-react-to-a-website
Si desea crear una nueva aplicación React, siga esta guía: reactjs.org/docs/create-a-new-react-app
Para hacer una nueva aplicación React...
Mis instrucciones rápidas de tldr:
npm i reactnpx create-react-app name-of-projectcd name-of-projectnpm start Con todo, realmente recomiendo que pruebes el Curso de reacción gratuito de CodeCademy
Cuando lo usé, me ayudó a aprender React a un buen nivel.
¿Cómo transfiero datos de mi base de datos MongoDB o una matriz en app.js para reaccionar useState?
Va a escribir una ruta API en su servidor Node.js, que devolvería los datos de mongodb o matriz. Luego, llamará a esa API desde la aplicación React.js utilizando la API de fetch o algo así. Finalmente, usará useState para almacenar y representar los datos en su aplicación React.
Quiero que funcione si hago este cambio en el código.
<script> function Hello() { return <h1>Hello World</h1> } ReactDOM.render(<Hello />, document.getElementById('root')); </script> Bien, el código anterior es código JSX . Este no es el código JavaScript/HTML/CSS que los navegadores pueden entender. Debe convertir este código JSX en código JavaScript/HTML/CSS que los navegadores puedan entender. Si usa para crear el proyecto de reacción con create-react-app , hará esa conversión por usted. Más información sobre create-react-app . Serás bueno para ir.
Una vez que esté allí, publique una pregunta separada sobre cómo hacer una llamada API desde reaccionar al servidor Node.js.