Renderizar ReactDOM en React

Presentaremos qué es reactDOM.render y lo usaremos para renderizar componentes React en aplicaciones React.

Use ReactDOM.render para renderizar un componente en React

Primero, discutiremos el término renderizar en React. El término renderizar se refiere a compartir código entre componentes de React usando un accesorio.

El valor de ese apoyo será una función. React tiene dos tipos de renders, llamados render y ReactDOM.render().

ReactDOM.render() controla el contenido de los nodos contenedores que pasamos. Podemos reemplazar el contenido de cualquier elemento DOM usando ReactDom.render(). Representa nuestros componentes en el DOM, mientras que el procesamiento del componente devuelve el elemento que forma el componente.

Veamos un ejemplo para entender cómo renderizar cualquier componente usando ReactDom.render().

Creemos una nueva aplicación React y usemos ReactDom.render() para renderizar un componente. Ejecutaremos el siguiente comando para crear una nueva aplicación en React.

# react
npx create-react-app my-app

Después de crear nuestra nueva aplicación en React, iremos a nuestro directorio de aplicaciones usando este comando.

# react
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# react
npm start

Ahora, vamos a crear un nuevo componente, renderedComponent.js, en nuestra aplicación, en el que devolveremos un elemento HTML.

# react
export default function RenderApp() {
  return <h1>I am Husnain</h1>;
}

Una vez que hayamos creado nuestro componente, iremos a App.js e importaremos ReactDOM y el componente que acabamos de crear RenderApp. Y devolver un div con un id app.

# react
import "./styles.css";
import ReactDOM from "react-dom";
import RenderApp from "./renderedComponent.js";

export default function App() {
  return <div id="app"></div>;
}

Ahora, usando ReactDom.render, renderizaremos el componente RenderApp.

# react
ReactDOM.render(<RenderApp />, document.getElementById("app"));

Producción:

En el ejemplo anterior, hemos renderizado con éxito un componente React usando ReactDom.render(). Con estos sencillos pasos, podemos renderizar fácilmente cualquier componente de React en otro componente.