11、使用 Vite 创建 React 应用及相关开发要点

使用 Vite 创建 React 应用及相关开发要点

1. 项目结构与 Tailwind CSS

在使用 Vite 创建的 React 应用中， /src 目录下有一个重要的 HTML 文件 index.html 。这个基础文件包含一个 id 为 root 的 div 元素，React 会将整个应用加载到这个 div 中。大部分应用代码会在 /src 目录下编写，代表整个应用的 App.jsx 文件也位于此，它会在 index.html 文件中 id 为 root 的 div 元素里渲染。

React 提供了多种样式应用方式，如经典的 CSS 样式表、SASS、JavaScript 样式对象，还可以选择 styled-components 等现代高效的解决方案。此外，主流的 UI/CSS 框架都有对应的 React 版本，如 Material UI、Bootstrap 和 Semantic UI。本文将使用 Tailwind CSS，它是一种实用优先的框架，将 CSS 转换为可直接在标记中使用的类，能实现复杂设计。

1.1 Tailwind CSS 类示例

App.jsx 文件中有一个带有以下类的 div 元素：