React: HTML 要素を DOM にレンダリングする

2173 ワード
react devops javascript beginners テキストリンク
  • React では、ReactDOM として知られる React のレンダリング API を使用して、この JSX を HTML DOM に直接レンダリングできます.

    • ReactDOM とは?


  • ReactDOM は、次のような DOM に React 要素をレンダリングする簡単な方法を提供します: ReactDOM.render(componentToRender, targetNode) 、最初の引数は、レンダリングする React 要素またはコンポーネントであり、2 番目の引数は、レンダリングする DOM ノードです.コンポーネントへ.
  • ReactDOM.render() は JSX 要素ステートメントの後に呼び出す必要があることに注意してください.
  • ReactDOM.render() メソッドを使用して、このコンポーネントをページにレンダリングします.定義済みの JSX 要素を最初の引数として直接渡し、document.getElementById() を使用してレンダリング先の DOM ノードを選択できます.この特定の例では、すでに id='challenge-node' を使用できる div があります.

    • const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p> {/* we want to render this entire element JSX to the page */}
  </div>
);

ReactDOM.render(JSX, document.getElementById('challenge-node'))


 {/* Inspect <iframe #document <html> <body> it will have a id='challenge-node' where it currently doesn't have a text, so we're trying to inject this JSX component into the interior of this challenge-node */}
    Googleが開発してるらしい QUIC as a VPN (QBone)について (2020年更新)
    qlog/qvizでQUICの可視化