React での ReactDOM レンダリング

reactDOM.render とは何かを紹介し、それを使用して React アプリケーションで React コンポーネントをレンダリングします。

React で ReactDOM.render を使用してコンポーネントをレンダリングする

まず、React のレンダリングという用語について説明します。レンダリングという用語は、プロップを使用して React コンポーネント間でコードを共有することを指します。

そのプロップの値は関数になります。React には、render と ReactDOM.render() の 2 種類のレンダリングがあります。

ReactDOM.render() は、渡すコンテナノードのコンテンツを制御します。ReactDom.render() を使用して、任意の DOM 要素のコンテンツを置き換えることができます。コンポーネントを DOM にレンダリングし、コンポーネントのレンダリングはコンポーネントを構成する要素を返します。

ReactDom.render() を使用してコンポーネントをレンダリングする方法を理解するための例を見てみましょう。

新しい React アプリケーションを作成し、ReactDom.render() を使用してコンポーネントをレンダリングしてみましょう。以下のコマンドを実行して、React で新しいアプリを作成します。

# react
npx create-react-app my-app

React で新しいアプリケーションを作成した後、このコマンドを使用してアプリケーションディレクトリに移動します。

# react
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# react
npm start

それでは、アプリケーションに新しいコンポーネント renderedComponent.js を作成してみましょう。このコンポーネントで HTML 要素を返します。

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

コンポーネントを作成したら、App.js に移動し、ReactDOM と作成したコンポーネント RenderApp をインポートします。そして、ID が app の div を返します。

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

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

ここで、ReactDom.render を使用して、コンポーネント RenderApp をレンダリングします。

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

出力：

上記の例では、ReactDom.render() を使用して React コンポーネントを正常にレンダリングしました。これらの簡単な手順を使用して、React コンポーネントを別のコンポーネントに簡単にレンダリングできます。