总的来说，如果不是引用了一些额外的配置，比如 craco、less 等，React 18 的升级还是比较简单，整体比较平滑。

升级依赖版本

react / react-dom 升级为 18.x

根组件引用

从 ReactDOM.render 改为 createRoot 模式：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);

root.render(<App />)

然后项目就可以跑起来了。

react-scripts 升级

react-scripts 升级为 5.0.1，也就是升级到 webpack 5.0。

代理中间件引入改为：

const { createProxyMiddleware } = require('http-proxy-middleware');

除了以上改动，其他都可以很好的运行起来。

next.js 升级

将 next.js 版本升至 13.x 即可，都不需要改“根组件引用”部分的代码，升级后即可使用。