一切都是模块 module。
React 是完全基于模块化的开发思路。整个项目是由多个小模块，通过 ESModule 语法组装在一起形成。在 vite 构建工具支持的环境中，每一个项目文件都会被看做是一个模块参与到项目的组成中去。
例如，我们可以使用 import 语法在 JS 模块中引入 css 文件与图片
1import Logo from '/assets/images/logo.png'2import './index.css'
这样，index.css 文件就会被解析成为 app.tsx 的一部分影响元素样式。我们也可以在当前模块中使用 Logo 模块
1<a href="https://vite.dev" target="_blank">2<img src={Logo} className="logo" alt="Vite logo" />3</a>
所有的模块最终会组合成为一个大的模块 App.tsx，通过 createRoot 插入到真实 DOM 中去，从而渲染出来内容。
在 index.html 中，我们会提前编写好一个项目根节点
10<!doctype html>20<html lang="en">30<head>40<meta charset="UTF-8" />50<link rel="icon" type="image/svg+xml" href="/vite.svg" />60<meta name="viewport" content="width=device-width, initial-scale=1.0" />70<title>Vite + React + TS</title>80</head>90<body>10<div id="root"></div>11<script type="module" src="/src/main.tsx"></script>12</body>13</html>
然后在 src 的入口文件 main.tsx 中，将组合好的内容渲染到 root 节点中
10import { StrictMode } from 'react'20import { createRoot } from 'react-dom/client'30import './index.css'40import App from './App.tsx'5060createRoot(document.getElementById('root')!).render(70<StrictMode>80<App />90</StrictMode>,10)
在 React 中，创建一个组件非常简单，只需要在函数中返回一段 JSX 即可。JSX 的基础知识我们会专门花一个章节来学习。它是一种与 html 非常相似的语法糖，原生的 JavaScript 并不支持这种语法，构建工具会负责专门解析这种语法，从而让其在构建工具的环境之下得以支持。
1export default function Hello() {2return (3<div>hello world</div>4)5}
这就是一个自定义组件。注意：在 React 中，自定义组件的函数名必须要大写。
创建组件还有许多知识点需要学习，我们会在后续的章节中详细分析。
这样声明之后，我们就可以在别的组件模块中引入该组件，并将其当做元素标签来使用。
10import Hello from './hello'2030function App() {40...5060return (70<div>80<Hello />90...10</div>11)12}
我们可以看到，React 组件的学习，与 JSX 语法息息相关，因此，我们需要专门花一个章节来学习它。