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

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