React 速習チュートリアル

React 19 へのアップグレード

既存の React アプリケーションをバージョン 19 へアップグレードするために必要な手順は、わずか 2 ステップです。
すでに最新バージョンの React を使用している場合は、このセクションをスキップしてください。

1. React 19 のインストール

最新バージョンをインストールするには、プロジェクトフォルダ内でターミナルから以下のコマンドを実行します。

npm i react@latest react-dom@latest

2. 新しい Root API の使用

React 19 のコンカレント機能(Concurrent Features)を活用するためには、クライアントレンダリングに新しい Root API を使用する必要があります。

2.1 コードの書き換え例

以下のように、これまでの ReactDOM.render から新しい createRoot API へ移行します。

移行前(Before):

// 以前の書き方
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>こんにちは React!</h1>,
  document.getElementById('root')
);

移行後(After):

// 新しい書き方
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<h1>こんにちは React!</h1>);

新しい Root API を使用しなくてもアプリケーションは動作しますが、その場合は ReactDOM.render を使い続けることになり、アプリケーションの挙動は React 17 相当に制限されます。最新のパフォーマンス最適化を享受するためには、必ずこの書き換えを行ってください。