ユーザーインターフェース（UI）のレンダリング

React の仕組みを理解するには、まずブラウザがコードをどのように解釈してユーザーインターフェース（UI）を作成（またはレンダリング）するかを基本的に理解する必要があります。

ユーザーがウェブページにアクセスすると、サーバーはブラウザに次のような HTML ファイルを返します。

ブラウザは HTML を読み取り、ドキュメントオブジェクトモデル（DOM）を構築します。

DOM とは何ですか？

DOM は、HTML 要素のオブジェクト表現です。コードとユーザーインターフェースの橋渡し役となり、親子関係を持つツリーのような構造をしています。

DOM メソッドと JavaScript を使用して、ユーザーイベントをリッスンし、DOM を操作することで、ユーザーインターフェースの特定の要素を選択、追加、更新、削除できます。DOM 操作により、特定の要素をターゲットにするだけでなく、スタイルやコンテンツを変更することもできます。

次のセクションでは、JavaScript と DOM メソッドの使い方を学びます。

追加リソース

• DOM の概要
• Google Chrome で DOM を表示する方法
• Firefox で DOM を表示する方法