More than 1 year has passed since last update.

初めてのreact3

Posted at 2022-11-07

要素のレンダリング

jsxでReact要素を作成していくことは前回見た。
その要素を如何にしてdomにレンダリングしていくのか、、、

htmlファイルにdiv要素を作る。
index.html

<div id="root"></div>

属性idをrootとする。
この中にreact要素を詰め込んでいく。

まずはreactにdom要素を読み込ませて、それをレンダリングしていく。
index.js

const root = ReactDOM.createRoot( 
  document.getElementById('root') 
); 
const element = <h1>Hello, world</h1>; 
root.render(element);

ReactDOM.createRoot()でdom要素を取ってきてrootという変数に入れる。
その変数にroot.render()でjsxで書いたelementという要素をレンダリングしていく。

react要素はイミュータブル、不変である。