在 public 目录里面有个 index.html,这是 react 应用需要的网页文档。
文档的 body 元素里面,你会发现有一个 id 是 root 的 div 元素,我们一会儿可以用这个元素作为 react 应用的根,也就是创建一个 react 应用,把它放在这个 id 值是 root 的 div 元素里。
使用 create-react-app 创建的 react 项目,入口文件是 src 目录下面的 index.js 或者 index.tsx ,在 src 目录的下面新建一个 index.tsx,因为我们的项目使用了 typescript ,所以这里使用的扩展会是 .tsx。
先在文件顶部,导入 ReactDOM,来自 react-dom 这个包里的 client。然后可以创建一个 React root ,使用这个 root 可以在页面上显示 React 界面。
声明一个 root,要创建 React root ,可以使用 ReactDOM 上面的 createRoot 这个方法,我们要给这个方法提供一个 HTML 元素,这个元素就是 React 应用的根,也就是在这个 HTML 元素里的东西会由 react 负责管理。
这里可以用一下浏览器提供的 document 对象里的 getElementById 方法,得到网页文档里的 id 值是 root 的元素。因为我们的项目里用了 typescript,这里需要设置一下 getElementById 方法返回的这个东西的类型,后面可以加上一个 as HTMLElement,让它作为一个 HTML 元素。这里提到的网页文档就是 public 目录下在的那个 index.html。
下面可以用一下这个 root 上面的 render 方法显示应用的界面。先简单的显示一个大标题,标题的内容是宁皓网。
在终端,项目所在目录的下面,执行一下 npm run start,运行一下项目的开发服务,现在浏览器上显示的就是我们的应用界面,上面会有一个大标题,内容是宁皓网。
右键点击这个标题内容,选择检查,你会发现这个标题内容是用一组 h1 元素包装的,这个标题元素会在 id 值为 root 的这个 div 元素里。
文档里的这些注释可以删除掉,打开 index.html,把这些注释内容全部删除掉。