代码世界的地图

这些文件主要负责“让程序做事”——处理逻辑、状态、事件、接口调用。.tsx 只是多了“能写界面标签”的能力，不代表它比 .ts 更高级。

• 你会在哪看到src/、app/、components/、api/ 这类业务目录里最常见。
• 新手最容易误解一看到这里报错就以为“代码全坏了”。其实很多时候只是某个变量没传对、某个判断条件写错了。
• 看到它先怎么判断如果问题是“按钮没反应、数据没显示、逻辑跑偏”，优先看这类文件，而不是先去找样式。

它们负责“页面看起来怎样”——颜色、间距、字体、布局、动画。页面丑、挤、错位，通常先怀疑这里。

• 你会在哪看到styles/、app/globals.css，或者跟组件放在一起的局部样式文件。
• 新手最容易误解把所有视觉问题都归因于组件代码。很多时候逻辑是对的，只是样式把元素藏起来了、挤歪了、透明了。
• 看到它先怎么判断如果问题是“内容在，但显示不对”，先看样式；如果是“数据压根没来”，再去看代码逻辑。

HTML 负责页面的骨架：哪里有标题、哪里有按钮、哪里有表单。它定义“页面有什么”，不负责“它好不好看”。

• 你会在哪看到静态网页项目最常见；在 React / Next.js 项目里，它的结构职责常常被 .tsx 组件接过去。
• 新手最容易误解以为任何网页项目都有一堆 .html 文件。其实很多现代项目已经不用单独写大量 HTML 了。
• 看到它先怎么判断如果是传统静态页，少了某个区块先看这里；如果是 React 项目，更多要去找组件文件。

JSON 不是“程序在干活”，而是在告诉程序“应该按什么规则干活”或者“这里有一份结构化数据”。

• 你会在哪看到package.json、tsconfig.json、配置文件、假数据文件都很常见。
• 新手最容易误解把它当成普通文档随便改格式。JSON 对逗号、引号、括号很敏感，少一个字符都可能直接报错。
• 看到它先怎么判断如果问题是“项目配置不生效、命令跑不起来、某些参数不对”，优先查这类文件。

Python 文件说明这个项目里有另一套运行环境，常见于自动化脚本、数据处理、后端服务，不一定直接负责网页界面。

• 你会在哪看到自动化工具、数据脚本、机器人、后端接口项目里很常见。
• 新手最容易误解以为只要看到 Python 就和当前网页无关。其实很多网页背后的数据清洗、定时任务、接口服务都可能是 Python 写的。
• 看到它先怎么判断如果问题发生在脚本执行、定时任务、数据导入导出，不要只盯着前端页面，也要回头查 Python 文件。

这里通常放账号、密码、API Key、数据库地址等敏感信息。程序启动时会读它，但它绝对不该被公开上传。

• 你会在哪看到项目根目录最常见，有时还会分成 .env.local、.env.production 这类不同环境的版本。
• 新手最容易误解只把它当“一个普通文本文件”。实际上这里的每一行都可能决定项目能不能连上数据库、能不能调用外部 API。
• 看到它先怎么判断如果问题是“权限不对、密钥无效、连接不上服务”，优先检查这里，同时确认它有没有被错误提交到公开仓库。