- はじめに JSXについて学んだところで、Reactの要素のレンダリングに進みましょう。要素のレンダリングとは、画面に表示するプロセスのことです。GeekとGalが楽しく魅力的な方法で、この重要な概念を説明してくれます！
Reactで要素のレンダリングについて学ぶ準備はできてる？
もちろん！まず何を知る必要があるの？
いいね！まず知っておくべきことは、React要素をレンダリングするには、それを配置するDOMコンテナが必要だってこと！
- 要素のレンダリング
たとえば、IDが"root"の
<div>
要素を持つHTMLファイルがあるとしよう。これがReact要素をレンダリングするためのコンテナになるよ：
<div id="root"></div>
わかった、コンテナができた。では、その中にReact要素をどのようにレンダリングするの？
ReactDOM.render()
という関数を使うの。この関数には2つの引数を渡すのよ：レンダリングしたいReact要素と、それを配置するDOMコンテナ。こんな例があるよ：
const element = <h1>Hello, world!</h1>;
const container = document.getElementById('root');
ReactDOM.render(element, container);
なるほど！つまり、JSXでReact要素を作成し、DOMコンテナを取得して、
ReactDOM.render()
を使ってコンテナに要素をレンダリングするんだね！
そのとおり！バッチリ理解できてるね！😄
- 要素の面白いレンダリング例
要素をレンダリングする面白い例はある？
もちろん！ユーザーの名前に応じて変わる面白いメッセージをレンダリングしてみよう！
const name = 'Alice';
const message = `ねえ${name}、なんで科学者は原子を信用しないのか知ってる？それは、原子がすべてを作り出すからさ！`;
const element = <h1>{message}</h1>;
const container = document.getElementById('root');
ReactDOM.render(element, container);
ハハ、素晴らしいね！ユーモアと一緒に学ぶのが大好きだよ！
楽しんでくれてうれしいわ！練習を続けて、すぐにレンダリングの達人になれるはず！😄
- おわりに
Reactで要素をレンダリングするには、JSXでReact要素を作成し、DOMコンテナを選択して、
ReactDOM.render()関数を使って画面に要素を表示します。React要素をレンダリングして素晴らしいアプリを作成する楽しさを味わってください！😃