Rendu ReactDOM dans React

Nous allons présenter ce qu’est reactDOM.render et l’utiliser pour rendre les composants React dans les applications React.

Utilisez ReactDOM.render pour rendre un composant dans React

Dans un premier temps, nous aborderons le terme render dans React. Le terme render fait référence au partage de code entre les composants React à l’aide d’un accessoire.

La valeur de cet accessoire sera une fonction. React a deux types de rendus, à savoir render et ReactDOM.render().

ReactDOM.render() contrôle le contenu des nœuds de conteneur que nous transmettons. Nous pouvons remplacer le contenu de n’importe quel élément DOM à l’aide de ReactDom.render(). Il restitue nos composants dans le DOM tandis que le rendu du composant renvoie l’élément qui compose le composant.

Prenons un exemple pour comprendre comment rendre n’importe quel composant en utilisant ReactDom.render().

Créons une nouvelle application React et utilisons ReactDom.render() pour rendre un composant. Nous allons exécuter la commande ci-dessous pour créer une nouvelle application dans React.

# react
npx create-react-app my-app

Après avoir créé notre nouvelle application dans React, nous irons dans notre répertoire d’application à l’aide de cette commande.

# react
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# react
npm start

Créons maintenant un nouveau composant, renderedComponent.js, dans notre application, dans lequel nous allons retourner un élément HTML.

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

Une fois que nous aurons créé notre composant, nous irons dans App.js et importerons ReactDOM et le composant que nous venons de créer RenderApp. Et retourner un div avec 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>;
}

Maintenant, en utilisant ReactDom.render, nous allons rendre le composant RenderApp.

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

Production :

Dans l’exemple ci-dessus, nous avons rendu avec succès un composant React en utilisant ReactDom.render(). En utilisant ces étapes simples, nous pouvons facilement rendre n’importe quel composant React dans un autre composant.