React教程执行报错：react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render不是函数

错误原因是你当前使用的是React 18+版本，但代码里用的是React 17及更早版本的ReactDOM.render API——React 18已经移除了这个方法，改用createRoot来替代，所以浏览器会报错说该方法不存在。

解决方案一：适配React 18写法 #

修改index.js的导入和渲染逻辑，替换为React 18的API：

import React, { Component } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)

解决方案二：降级到React 17版本 #

如果你想完全匹配教程的代码写法，可以执行以下命令降级React和ReactDOM到17版本：

npm install react@17 react-dom@17

降级后原代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Maxim