React

ReactDOM.render

React 18以降では、ReactDOM.renderは非推奨となり、代わりにcreateRootを使用することが推奨されています。以下に新しい方法の例を示します。

まず、react-dom/clientからcreateRootをインポートします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

このコードでは、createRootを使用してルートを作成し、そのルートに対してrenderメソッドを呼び出しています。これにより、React 18の新しいレンダリングAPIを利用することができます¹²。

¹: React 18でのcreateRootの使用方法 ²: Reactの公式ドキュメント

ソース: Copilot との会話、 2024/9/4 (1) React18でReactDOM.renderを使ったらイベントが発火しない …. https://qiita.com/Shimo5296/items/df4740b66b3179705105. (2) ReactDOM – React. https://bing.com/search?q=React+ReactDOM.render+%e9%9d%9e%e6%8e%a8%e5%a5%a8+%e4%bb%a3%e6%9b%bf%e6%96%b9%e6%b3%95. (3) ReactDOM – React. https://ja.legacy.reactjs.org/docs/react-dom.html. (4) React18からはレンダリングにcreateRootを使おう - Zenn. https://zenn.dev/nawomat/articles/f8be31b66bfc19. (5) render – React 中文文档. https://zh-hans.react.dev/reference/react-dom/render.