Estoy tratando de probar mi React para asegurarme de que pueda procesarse, pero por alguna razón no funcionará. Estoy usando npx create-react-app para crear mi aplicación. Por favor ayuda
JavaScript:
import React from "react" import ReactDOM from "react-dom" const app = () => { return ( <div> <h1>Hello World</h1> </div> ) } ReactDOM.render(app(), document.getElementById("root"))HTML:
<!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"> <script src="index.js"></script> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>En lugar de ReactDOM.render(app()... debería ser ReactDOM.render(<App> , porque desea representar un componente, no una función,
Además, como mencionó que está utilizando create-react-app , las importaciones predeterminadas son estas:
import React from 'react'; import ReactDOM from 'react-dom/client'; Lo que significa que necesita actualizar su importación de ReactDOM
Nota: cada componente debe comenzar con letra mayúscula, así que cambie const app a const App
Aquí hay un fragmento con los cambios:
import React from "react" import ReactDOM from "react-dom/client" const App = () => { return ( <div> <h1>Hello World</h1> </div> ) } ReactDOM.render(<App/>, document.getElementById("root"))ya respondido pero los comentarios deberían ayudar a entender
import React from "react" import ReactDOM from "react-dom" // component name should start with uppercase const App = () => { return ( <div> <h1>Hello World</h1> </div> ) } // render function takes a Reactelement as first parameter ReactDOM.render(<App/>, document.getElementById("root"))