跳至主要內容

React - 安装和项目结构解析

Kamimika...大约 1 分钟React安装代码解析笔记

使用 pnpm + vite 构建:

pnpm
pnpm create vite@latest [项目名]

代码逻辑

index.html

交代了React应用根元素位置

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

引入src/main.tsxroot根元素界面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

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

上次编辑于:
贡献者: wzh656
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.3.0