React - 安装和项目结构解析
...大约 1 分钟
使用 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
存储公共资源,打包后位于根目录
Powered by Waline v3.3.0