ReactDOM Rendern in React

Wir werden vorstellen, was reactDOM.render ist, und es verwenden, um React-Komponenten in React-Anwendungen zu rendern.

Verwenden Sie ReactDOM.render, um eine Komponente in React zu rendern

Zuerst werden wir den Begriff Rendern in React besprechen. Der Begriff Rendern bezieht sich auf das Teilen von Code zwischen React-Komponenten mithilfe eines Props.

Der Wert dieser Stütze wird eine Funktion sein. React hat zwei Arten von Renderings, nämlich render und ReactDOM.render().

ReactDOM.render() steuert den Inhalt der Containerknoten, die wir übergeben. Wir können den Inhalt jedes DOM-Elements mit ReactDom.render() ersetzen. Es rendert unsere Komponenten in das DOM, während das Rendern der Komponente das Element zurückgibt, aus dem die Komponente besteht.

Lassen Sie uns ein Beispiel haben, um zu verstehen, wie eine Komponente mit ReactDom.render() gerendert wird.

Lassen Sie uns eine neue React-Anwendung erstellen und ReactDom.render() verwenden, um eine Komponente zu rendern. Wir führen den folgenden Befehl aus, um eine neue App in React zu erstellen.

# react
npx create-react-app my-app

Nachdem wir unsere neue Anwendung in React erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# react
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# react
npm start

Lassen Sie uns nun eine neue Komponente, renderedComponent.js, in unserer Anwendung erstellen, in der wir ein HTML-Element zurückgeben.

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

Sobald wir unsere Komponente erstellt haben, gehen wir zu App.js und importieren ReactDOM und die gerade erstellte Komponente RenderApp. Und geben Sie ein div mit einer ID app zurück.

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

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

Nun rendern wir mit ReactDom.render die Komponente RenderApp.

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

Ausgabe:

Im obigen Beispiel haben wir erfolgreich eine React-Komponente mit ReactDom.render() gerendert. Mit diesen einfachen Schritten können wir jede React-Komponente problemlos in einer anderen Komponente rendern.