React移动端适配与开发实战 · 课程目录

移动端开发概述趋势

移动端趋势 · RN vs Flutter · PWA · 适配挑战

React基础回顾核心

JSX · 组件化 · Props/State · Hooks入门

移动端项目初始化搭建

CRA/Vite · 目录结构 · 配置文件详解

视口与像素基础

物理/逻辑像素 · DPR · viewport · meta标签

REM适配方案实用

REM原理 · 动态计算 · lib-flexible · 手写工具

VW/VH适配方案现代

视口单位 · VW原理 · 对比REM · postcss插件

媒体查询与响应式布局

CSS媒体查询 · 断点策略 · 移动优先 · 栅格系统

Flexbox弹性布局必备

容器/项目属性 · 主轴交叉轴 · 居中/等分/圣杯

Grid网格布局进阶

Grid基础 · 轨道区域 · 移动端应用 · 配合Flex

移动端事件处理交互

Touch事件 · 手势识别 · 点击穿透 · 解决方案

移动端滚动优化性能

-webkit-overflow-scrolling · 下拉刷新/上拉加载

移动端图片处理资源

WebP/AVIF · srcset · 懒加载 · 压缩CDN

移动端字体与文本排版

系统字体栈 · 自定义字体 · 文本溢出 · 行高居中

移动端表单与输入交互

表单重置 · 聚焦失焦 · 键盘弹出 · 验证反馈

移动端动画与过渡动效

CSS过渡动画 · requestAnimationFrame · React Spring

移动端路由与导航路由

React Router v6 · 嵌套路由 · 懒加载 · Tab导航

移动端状态管理数据

Context · Redux Toolkit · Zustand · 持久化

移动端网络请求通信

Axios封装 · 拦截器 · 错误处理 · 网络监听

移动端数据存储持久

localStorage · IndexedDB · AsyncStorage · 安全

移动端调试与测试工具

Chrome模拟 · 真机调试 · React DevTools · 测试

移动端性能优化提速

虚拟列表 · 代码分割 · 预加载 · 减少重排重绘

移动端安全防护

HTTPS · XSS/CSRF · 数据加密 · 安全输入

移动端推送通知推送

Web Push API · Service Worker · 权限管理

移动端离线支持离线

SW缓存策略 · 离线页面 · PWA清单 · 主屏幕

移动端国际化(i18n) 多语言

react-i18next · 语言切换 · 日期格式化 · RTL

移动端主题与暗黑模式主题

CSS变量 · prefers-color-scheme · 持久化 · 过渡

移动端组件库使用生态

AntD Mobile · Vant · NutUI · 按需加载 · 定制

项目实战（一）基建

需求分析 · 技术选型 · UI还原 · 路由 · 通用组件

项目实战（二）逻辑

业务实现 · 状态管理 · API对接 · 表单列表 · 交互

项目实战（三）交付

性能优化 · 打包构建 · 真机测试 · 发布上线 · CI