Estoy tratando de usar JSX en React pero ReactDOM.createRoot().render() no renderizará nada:
import React from 'react' import ReactDOM from 'react-dom' ReactDOM.createRoot(root).render(<h1>Hello world</h1>)Pero cuando uso ReactDOM.render funciona:
import React from 'react' import ReactDOM from 'react-dom' ReactDOM.render(<h1>Hello world</h1>, root)No es que tenga un problema con esto, pero estoy más interesado en por qué es así.
Nota: estoy usando React v17.0.2 y root se refiere a <div id="root"></div> .
ReactDOM.createRoot no se agregó hasta la v18. Si busca en la consola de devtools, debería ver este error:
TypeError: ReactDOM.createRoot no es una función
Aquí hay un ejemplo de v17 que muestra el error:
const root = document.getElementById("root"); ReactDOM.createRoot(root).render(<h1>Hello world</h1>); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> Y un ejemplo v18 que funciona usando createRoot :
const root = document.getElementById("root"); ReactDOM.createRoot(root).render(<h1>Hello world</h1>); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script> Para v17, use ReactDOM.render . (O actualice a v18 y use createRoot ).