第 40 周的第 4 周 – 第一个使用 React、TypeScript 和 Python 的全栈应用

Source: Dev.to

本周目标

本周的目标是向全栈开发迈出下一步真实的步伐。

到目前为止，一切要么只存在于静态页面，要么完全在前端。本周我想要：

• 使用 Python 构建我的 第一个后端 API
• 将 React + TypeScript 前端连接到该 API
• 让前端和后端相互通信
• 学习使用 GitHub Codespaces 和终端的基础

我构建的内容

我做了一个小型的 学习日志（Learning Log） 应用，前后端明确分离。

后端

• Python + FastAPI
• 提供以下端点：
  • 创建日志条目
  • 列出日志条目
  • 切换 “收藏” 标记
• 通过 Swagger 自动生成 API 文档

前端

• React + TypeScript
• 从后端 API 获取数据
• 显示日志条目
• 支持创建新条目并标记为收藏

这是本次挑战中第一个满足以下条件的项目：

• 前端依赖后端，
• 数据通过 HTTP 传输，
• 若 URL、端口或环境配置错误，系统会出错。

我的收获

本周充满了我之前忘记或从未真正学过的基础知识：

• 终端 基础：文件夹导航、激活虚拟环境、运行服务器
• GitHub Codespaces 基础：云端的真实 Linux 机器，关闭后进程会停止，端口必须显式暴露
• FastAPI 工作原理：定义请求和响应模型，自动生成 Swagger 文档
• 前端如何通过 fetch、JSON、环境变量与后端通信
• 为什么前端应用需要可配置的 API 基础 URL

总体而言，现代开发更多是关于 整体系统的理解，而不是单纯的语法。

困难 / 惊讶 / 困惑之处

有不少问题 😅 —— 这正是本周意义所在。

• 起初把 requirements.txt 中的条目当作终端命令来使用
• 多次忘记激活 Python 虚拟环境
• uvicorn: command not found 让我深刻体会到环境的真实工作方式
• 理解 代码运行位置 与 浏览器运行位置 之间的差异花了不少时间
• Codespaces 中的转发端口概念起初很新且不直观
• 不清楚前端应调用的 哪个 URL（以及为什么 localhost 在这里不可用）
• 修改 .env 后忘记重启前端导致大量抓头

最难的不是编码，而是 思维模型：

• 哪些代码在哪里运行，
• 什么在相互通信，
• 当某些东西改变时需要重启哪些部分。

下周计划

在第 5 周，我想在此架构上继续构建：

• 前端继续使用 React + TypeScript
• 后端继续使用 Python
• 添加第一个 “智能” 行为 —— 例如处理文本、分析、摘要或丰富日志条目

这将是我迈向 AI 相关功能 的第一步，基于本周奠定的基础。

第 4 周比之前的几周更慢、更令人沮丧，但也更具教育意义 —— 这大概是个好兆头。