Soy nuevo en reaccionar, hice un componente simple y rendericé algunos datos en este componente, pero no veo ningún resultado en el navegador y recibo este error en la consola "react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render no es una función".
índice.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // import App from './App'; // import reportWebVitals from './reportWebVitals'; import 'bootstrap/dist/css/bootstrap.css'; import Counter from './components/counter'; ReactDOM.render(<Counter />, document.getElementById("root")); // registerServiceWorker();contador.jsx
import React, {Component} from 'react'; class Counter extends Component { state = { count : 1, } render() { return ( <div> <span>{this.formatCount()}</span> </div> ); } formatCount() { const {count} = this.state; return count === 0 ? 'Zero' : count; } } export default Counter;Necesita crear una raíz y luego renderizar con ella:
const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Counter />);Faltan pocas cosas en su componente de clase Counter, vea a continuación:
class Counter extends Component { // You need to call the Component constructor so the class Counter inherit // the React Component properties and methods constructor(props) { super(props); // You need to add the state to 'this' so you can reference it later this.state = { count: 1 }; } // Create the function before you call it, that is why I move // it at the top of the render formatCount() { const {count} = this.state; return count === 0 ? 'Zero' : count; } render() { return ( <div> <span>{this.formatCount()}</span> </div>); } } // This is fine as long as you have a div with id of root ReactDOM.render(<Counter />, document.getElementById("root"));Espero que ayude
Prueba esto:
import React from 'react' import ReactDOM from 'react-dom/client' import 'bootstrap/dist/css/bootstrap.css'; import Counter from './components/counter'; const root = ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <Counter /> </React.StrictMode>);React.StrictMode es una herramienta para resaltar problemas potenciales en una aplicación, StrictMode no muestra ninguna interfaz de usuario visible. Activa controles y advertencias adicionales para sus descendientes. consulte https://reactjs.org/docs/strict-mode.html para obtener más información.