React Native与Node.js为核心的开发极速营（4天特训）

核心教学理念：

• 对于 Java 后端： 这是一个“解构与重组”的过程。我们将 Spring Boot 里的 Controller/Service/Dao 映射到 Node.js，将 Android XML 映射到 JSX，用“类型安全”作为安全绳（TypeScript + Prisma）。

• 对于 0 基础： 这是一个“搭积木”的过程。不讲深奥的计算机原理，只讲“输入 -> 黑盒 -> 输出”的直观反馈。

Day 0: 环境自检 (必须提前完成)

1. 环境安装清单:

   • Node.js (LTS 版本): 必装。

   • VS Code: 推荐安装插件 ESLint, Prettier, Simple React Snippets, Error Lens。

   • Git: 基础安装。

   • 手机端 App: 安装 Expo Go (iOS/Android)，保证手机和电脑在同一 WiFi 下。

   • Postman/Apifox: 用于接口测试。

   • npm/yarn 镜像源配置：这是国内开发的第一大坑。

     • Action: 强制学员配置 .npmrc 或使用 nrm 切换淘宝源/腾讯源，避免上课下载依赖卡死。

   • Java vs JS 语法速查表 (Cheat Sheet)：

     • 提前发放一张对比表：List<String> vs string[], Map vs Object, System.out.println vs console.log。

   • ESLint/Prettier 配置文件：

     • Senior Tip: 直接下发一份配置好的 .prettierrc 和 .eslintrc，强调“代码风格统一是团队协作的第一步”。

2. 账号注册:

   • GitHub 账号。

   • Supbase账号（或者云服务部署的一台PostgreSQL服务器）。

3. 数据库工具选型：

   • 使用 PostgreSQL 作为数据库。

   • ORM 框架： 推荐使用 Prisma。

     • 理由： Prisma 的 schema 定义 (schema.prisma) 类似于 Java 的 Entity 定义，它是类型安全的，能自动生成 TypeScript 类型，对 Java 开发者极其友好，且比写原生 SQL 更适合教学。

4. 作业机制（闭环）：

   • 布置： 直播结束前 15 分钟布置。

   • 辅导： 这一周内，建立班级群，助教或讲师每天在群里答疑。

   • 检查（Code Review）： 下一次上课的前 30 分钟，挑选 2-3 份作业进行点评（一份优秀代码，一份典型错误代码）。

Day 1: 视觉重塑 —— 从“像素点”到“组件化”

目标：打破 Java 开发者“写 UI 很痛苦”的魔咒，建立“一切皆组件”的思维。

09:00 - 10:30 | 全栈大图景与 React 本质

• 架构解剖： 展示 JS 线程与 Native 线程如何通信。

• 声明式 UI (Declarative)：

  • 对比: Java Swing/Android 是“拿到按钮对象 -> 调用 setText” (命令式)。

  • React: “状态是 text -> UI 自动变成 text 的样子” (声明式)。公式：UI = f(State)。

• JSX 本质：它不是 HTML，它是 JavaScript 的语法糖。

10:30 - 12:00 | Flexbox 布局：打破 Android/CSS 固有思维

• 可视化教学：使用 Flexbox Froggy 类似的互动游戏演示。

• Flexbox 的“反直觉”预警。

  • Java/Android 的 gravity 和 Flexbox 的 justify/align 经常搞混。

  • 建议： 专门画一张图：主轴 (Main Axis) 和 交叉轴 (Cross Axis)。告诉他们：Flexbox 不分上下左右，只分主轴交叉轴。

• 核心痛点解决：

  • Java 开发者: 习惯了 Match_Parent / Wrap_Content。

  • React Native: 默认 flexDirection: column (与 Web 相反，更像手机流式布局)。

  • 技巧: 记住“盒子模型”和 flex: 1 (撑满剩余空间) 的万能用法。

14:00 - 16:00 | 组件化思维实战 (Atomic Design 简化版)

• Props (参数)：类比 Java 构造函数的参数。父组件传数据给子组件。

• 实战案例：拆解一个“电商商品卡片”。

  • ProductCard (容器) -> ProductImage (展示) + ProductInfo (文本) + AddToCartButton (交互)。

• 样式分离：为什么不推荐 Inline Style？讲解 StyleSheet.create 的性能优化作用（ID 映射）。

16:00 - 17:00 | 0 基础特别辅导 / Java 开发者进阶

• 分流教学：

  • 0 基础: 继续练习 CSS 属性（圆角、阴影、边距）。

  • Java: 讲解 TypeScript 接口 (interface Props) 如何约束 UI，体验强类型的爽快感。

Day 2: 交互之魂 —— 状态机与生命周期

目标：掌握 React 的核心难点——Hooks，理解“数据驱动视图”。

09:00 - 11:00 | Hooks：函数式编程的魔力

• useState 深度解析：

  • Java 视角: 为什么不能 this.count = 1？讲解不可变性 (Immutability)。对比 Java 的 Setter。

  • 闭包陷阱: 简单提及，警告不要在循环中使用 Hook。

• useEffect (副作用)：

  • 心智模型: 不要把它当成生命周期，要把它当成“数据同步器”。当 [dependency] 变了，执行同步逻辑。

• useEffect 的“依赖数组”陷阱。

  • 这是 React 最难理解的点。Java 开发会试图用它模拟 componentDidMount。

  • 警示： 明确告诉他们，不要撒谎！如果 useEffect 里用到了 count，依赖数组里必须写 [count]。ESLint 会帮你检查，绝对不要 disable 那个 ESLint 警告。

11:00 - 12:30 | 导航系统的“栈”思维 (React Navigation)

• 路由栈：类比浏览器的 History 或 Android 的 Task Stack。

• 参数传递：route.params vs 全局状态。何时该传参，何时该用 Store。

14:00 - 16:00 | 复杂交互与调试技巧 (Senior 必讲)

• 调试神技：

  • console.log 是初级。

  • React DevTools：查看组件层级。

  • Network Debugging：如何在 App 这种黑盒环境抓包？

• 列表性能：FlatList 的 keyExtractor 为什么重要？（对比 Java HashMap 的 Key，涉及 Diff 算法效率）。

Day 3: 全栈闭环 —— 异步编程与 API 设计

目标：Java 开发者最舒适的环节，但需要纠正“同步阻塞”的习惯。

09:00 - 10:30 | Node.js 与 异步陷阱

• Event Loop (事件循环)：

  • 关键点: 解释为什么 JS 是单线程却能处理高并发。

  • Java 对比: Java 是多线程阻塞模型，Node 是单线程非阻塞模型。

• I/O 密集型 vs CPU 密集型

  • 在 Java 里，线程是昂贵的资源，我们在搞线程池调优。但在 Node 里，我们把等待数据库、等待网络的时间全部‘外包’出去了。对于移动端这种高频、短连接、数据搬运的场景，Node.js 的吞吐量是惊人的。

• Async/Await：彻底告别回调地狱 (Callback Hell)。

  • 作业: 把一个嵌套的 fetch(...).then(...) 改写为 await fetch(...)。

10:30 - 12:30 | 数据库层：Prisma (Java 开发者的福音)

• Schema First：先定义 schema.prisma，就像写 Java Entity。

• End-to-End Type Safety (端到端类型安全)

  • 演示： 在后端修改了 schema.prisma 的一个字段名，立刻展示前端代码报错。

  • 冲击点： “在 Java + Android 的开发中，后端改了接口，安卓端如果不沟通通常不知道，直到运行报错。但在我们这套全栈架构里，后端改名，前端编译时就红线报错。这就是 TypeScript 全栈的降维打击。”

• 类型生成：演示 npx prisma generate 如何自动生成 TS 类型。前端调用后端接口时，居然有代码补全！这是全栈最震撼的时刻。

14:00 - 16:00 | 前后端联调与异常处理

• 网络层封装：不要裸写 fetch。封装一个 request.ts，统一处理 Token 注入、401 踢出登录、全局 Loading。

• 调试全链路（这是一个全栈工程师最值钱的技能，比写代码更重要）。

  • 当点击按钮没反应时，教他们标准排查路径：

    1. 看前端 Network (请求发出去没？)

    2. 看后端 Terminal (请求收到了没？SQL 打印了没？)

    3. 看数据库 (数据进去了没？)

• 乐观更新 (Optimistic UI)：

  • 体验升级: 点赞时，先变红，再发请求。失败了再变回去。这是 Native 体验的关键。

Day 4: 架构视野与产品化

目标：从 Demo 到 Product，关注性能、打包与发布。

09:00 - 10:30 | 走进原生 (Native Modules)

• 脱离 Web 限制：展示如何调用陀螺仪、生物识别 (FaceID)，调用震动 (Haptics)、获取地理位置 (Location)、调用相机。

• 演示： 给 App 增加“上传头像”功能，调用原生图片选择器。

10:30 - 12:00 | 性能优化 (Senior 深度)

• 渲染控制：React.memo, useCallback (避免不必要的重绘)。

• 图片优化：移动端内存杀手。讲解 Image 的缓存策略。

14:00 - 15:30 | 职业发展与架构选型 (咨询师视角)

• 原理剖析： JS 线程、UI 线程、Bridge (及新架构 JSI/Fabric 简介)。

• 对比分析：

  • WebView: 讲清楚 DOM 渲染瓶颈。

  • Hybrid (Capacitor): 讲清楚它适合“存量迁移”。

  • RN: 讲清楚它适合“原生体验”。

  • 对于 Java 开发： 对比 JVM 跨平台和 RN 跨平台的异同。

• 技术选型矩阵：

  • Flutter vs React Native：RN 胜在动态更新 (Code Push) 和 JS 生态；Flutter 胜在 UI 一致性。

  • 原生 vs 跨端：什么时候必须切回原生？(高性能图形处理、复杂蓝牙协议)。

• 给 Java 开发者的建议：如何利用后端优势做 BFF (Backend for Frontend) 层，成为真正的全栈架构师。

15:30 - 17:00 | Code Review (CR) 演练

• 不要只评判“代码好坏”，要评判“思维模式”

• 红黑榜：

  • 红榜: 组件拆分合理，变量命名语义化，使用了 TS 类型。

  • 黑榜: any 满天飞，逻辑全部写在 UI 层，硬编码字符串。