React - 安装和项目结构解析

使用 pnpm + vite 构建：

pnpm

pnpm create vite@latest [项目名]

npm

npm create vite@latest [项目名]

yarn

yarn create vite@latest [项目名]

代码逻辑

index.html

交代了 React 应用根元素位置

<div id="root"></div>

引入src/main.tsx对 root 根元素 和 界面 css 样式 的处理

<script type="module" src="/src/main.tsx"></script>

src/main.tsx

引用

import React from "react"; //引入React 用于 使用严格模式
import ReactDOM from "react-dom/client"; //引入ReactDom用于 创建根元素(createRoot)
import App from "./App.tsx"; //引入整个 应用(App)根组件
import "./index.css"; //应用**css样式**

根据 root 元素创建 react 根元素并渲染

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

提示

在 Typescript 中，感叹号!为非空断言，保证其返回类型不为null

src/App.tsx

整个 App 根组件

src/index.css

index.html页面的 css 样式

public

存储公共资源，打包后位于根目录