feat: 前三日技术扫盲审查

2026-09-18 12:16:12 +08:00
parent 3284e63e89
commit 9b7ab80fc1
8 changed files with 35 additions and 418 deletions
@@ -1,6 +1,6 @@
 # Day_1：环境配置与第一个 React Native 应用
-> 今天只做一件事：让 React Native 开发环境真正跑起来。
+> 今天只做一件事：让 React Native 开发环境跑起来。
 预计用时：30～45 分钟。
@@ -1,8 +1,7 @@
 # Day_2：命令行基础——不用鼠标操作文件
-> 今天暂时不写界面，先掌握 React Native 项目同样离不开的命令行基础。
+> 今天暂时不写界面，先掌握任何项目都离不开的基础：
->
+> **命令行（Command Line）**。
 > 我们来学习一个程序员每天都会接触的工具：**命令行（Command Line）**。
 预计用时：30～45 分钟
@@ -21,9 +20,7 @@
 - Windows 与 macOS 的命令行有什么区别
 - 为什么很多开发命令必须在“正确的目录”中执行
-今天不要求背命令。
+今天需要理解的是：
 真正需要建立的是：
 > **“我现在在哪里？我要去哪里？我要操作哪个文件？”**
@@ -40,9 +37,7 @@
 可以直接在 VS Code 中点击：
 ```text
-终端
+终端 → 新建终端
 →
 新建终端
 ```
 通常会打开：
@@ -54,7 +49,24 @@ PowerShell
 你可能看到：
 ```text
-PS C:\Users\Arthur>
+PS C:\Users\Arthur\...\your_project>
 ```
 也可以使用 Windows 自带的：
 ```text
 cmd 或 Powershell
 ```
 通过：
 ```text
 Win + R
 ```
 打开“运行”，然后搜索：
 ```text
 cmd 或 Powershell
 ```
 ---
@@ -64,9 +76,7 @@ PS C:\Users\Arthur>
 同样可以直接使用 VS Code：
 ```text
-Terminal
+终端 → 新建终端
 →
 New Terminal
 ```
 通常会打开：
@@ -101,9 +111,9 @@ Terminal
 ---
-# 2. Windows 和 macOS 的命令一样吗？
+# 终端命令
-有些一样，有些不一样。
+基于不同系统，Windows 和 macOS 的终端命令略有差异。
 今天会使用的命令大部分在两个系统中都可以使用。
@@ -118,10 +128,6 @@ Terminal
 | 清屏 | `cls` / `clear` | `clear` |
 | 创建空文件 | `New-Item` | `touch` |
 所以你会发现：
 > Windows PowerShell 和 macOS Terminal 的基本使用方式其实非常接近。
 后面的教程如果没有特别说明：
 ```bash
@@ -172,7 +178,7 @@ C:\Users\Arthur
 /Users/arthur
 ```
-虽然路径长得不一样，但表达的是同一个概念：
+这行文字表达的概念是：
 > **你当前所在的位置。**
@@ -342,7 +348,7 @@ Windows 和 macOS 都建议养成这个习惯：
 ```text
 CampusHelper
 app-rookie
-my-project
+my_project
 ```
 这种没有空格的名字。
@@ -421,17 +427,6 @@ Documents
 > 上一级目录。
 所以以后如果看到：
 ```text
 ./
 ../
 ```
 不要觉得它是什么特殊代码。
 它们本质上只是在描述位置。
 ---
 # 9. 创建文件夹
@@ -526,11 +521,7 @@ projects
 notes
 ```
-到这里你已经在：
+到这里： **完全不用鼠标** 的情况下，你已经创建了三个文件夹。
 > **完全不用鼠标**
 的情况下创建了三个文件夹。
 ---
@@ -1282,33 +1273,3 @@ cd -
 ---
 # 今天最重要的一句话
 以后当你看到：
 ```text
 找不到文件
 找不到项目
 找不到配置
 not a git repository
 ```
 不要第一时间慌。
 先执行：
 ```bash
 pwd
 ```
 然后：
 ```bash
 ls
 ```
 问自己：
 > **我现在在哪里？我要操作的东西真的在这里吗？**
 这会解决很多未来的开发问题。
@@ -35,17 +35,7 @@
 这显然很痛苦。
-Git 可以帮你保存项目的修改历史。
+而 Git 可以帮你简洁优雅地保存项目的修改历史。
 你可以把：
 ```text
 commit
 ```
 理解成：
 > 给当前代码拍一张快照。
 ---
@@ -125,7 +115,7 @@ git config --global --list
 # 4. 创建自己的练习仓库
-进入社团 Git 平台。
+进入 GitHub。
 创建一个自己的仓库，例如：
@@ -342,7 +332,7 @@ git pull
 git pull
 ```
-观察本地文件有没有更新。
+观察本地文件的变化。
 ---
@@ -1,75 +0,0 @@
 # Day_4：第一个 React Native 页面——组件、JSX 与 StyleSheet
 > 今天不写复杂逻辑，只做出一个像样的页面。
 预计用时：40～60 分钟。
 ## 今日目标
 - 理解组件与 JSX
 - 使用 `View`、`Text`、`Image`
 - 使用 `StyleSheet` 编写样式
 - 完成 CampusHelper 的个人信息卡片
 ## 1. React Native 页面是什么
 React Native 用组件描述页面：
 ```text
 View = 布局容器
 Text = 文字
 Image = 图片
 StyleSheet = 样式规则
 ```
 与 Web 不同，不能直接写 `div`、`p`；文字必须放在 `Text` 中。
 ## 2. 一个最小页面
 在入口屏幕中尝试下面的代码：
 ```tsx
 import { StyleSheet, Text, View } from 'react-native';
 export default function HomeScreen() {
  return (
    <View style={styles.page}>
      <Text style={styles.title}>Hello APP</Text>
      <Text>这是我的第一个 React Native 页面。</Text>
    </View>
  );
 }
 const styles = StyleSheet.create({
  page: { flex: 1, padding: 24, backgroundColor: '#F5F7FB' },
  title: { fontSize: 28, fontWeight: '700', marginBottom: 12 },
 });
 ```
 `style={styles.title}` 表示把 `styles` 中名为 `title` 的样式应用到文字。
 ## 3. 制作个人信息卡片
 在页面中加入以下结构，并替换成你自己的信息：
 ```tsx
 <View style={styles.card}>
  <Text style={styles.name}>小明</Text>
  <Text style={styles.meta}>计算机科学与技术</Text>
  <Text style={styles.meta}>方向：移动端开发</Text>
 </View>
 ```
 为 `card` 添加 `padding`、`backgroundColor`、`borderRadius` 和 `marginTop`；为 `name` 设置更大的 `fontSize` 和 `fontWeight: '700'`。
 ## 今日任务
 完成一张个人信息卡片，至少展示：姓名、专业、感兴趣的方向、想学习的技术。自行调整背景、间距、字号或圆角，使页面有自己的风格。
 ## 验收标准
 - [ ] 使用了 `View` 和 `Text`
 - [ ] 使用 `StyleSheet.create`
 - [ ] 页面显示四项个人信息
 - [ ] 卡片具有间距、背景色和圆角
 - [ ] 在 Expo Go 或模拟器中正常预览
@@ -1,67 +0,0 @@
 # Day_5：让页面动起来——事件、state 与 useState
 预计用时：40～60 分钟。
 ## 今日目标
 - 理解“事件 → 函数 → state 更新 → 界面更新”
 - 使用 `Pressable`
 - 使用 `useState`
 - 完成学习打卡计数器
 ## 1. state 是什么
 页面中会变化的数据叫状态（state）。在函数组件中，用 `useState` 保存它：
 ```tsx
 import { useState } from 'react';
 const [count, setCount] = useState(0);
 ```
 `count` 是当前数值；`setCount` 是更新它的方式。调用后，React 会重新渲染受影响的界面。
 ## 2. 加一个按钮
 ```tsx
 import { Pressable, Text, View } from 'react-native';
 <View>
  <Text>今日学习次数：{count}</Text>
  <Pressable onPress={() => setCount(count + 1)}>
    <Text>+1</Text>
  </Pressable>
 </View>
 ```
 用户点击 `Pressable`，触发 `onPress`，再通过 `setCount` 更新数值；`Text` 中的 `{count}` 会显示新值。
 ## 今日任务：学习打卡计数器
 在昨天的个人信息卡片下方加入计数器：
 ```text
 今日学习打卡
 当前完成：0 次
 [ +1 ] [ -1 ] [ 重置 ]
 ```
 要求：`+1` 增加一次；`-1` 减少一次但不能小于 0；重置按钮使次数回到 0；为按钮添加明显的背景色、内边距和圆角。
 `-1` 的逻辑可以写成：
 ```tsx
 setCount((current) => Math.max(0, current - 1));
 ```
 ## 验收标准
 - [ ] 使用 `useState`
 - [ ] 使用至少一个 `Pressable`
 - [ ] `+1`、`-1`、重置均可用
 - [ ] 数值不会小于 0
 - [ ] 点击后界面会立即更新
 ## 思考题
 为什么不要写 `count++`，而要调用 `setCount`？提示：React 需要知道状态发生了变化，才能安排重新渲染。
@@ -1,92 +0,0 @@
 # Day_6：列表与导航——从一个页面到一个小应用
 > 今天第一次制作“列表页 → 详情页”。
 预计用时：45～60 分钟。
 ## 今日目标
 - 使用数组保存列表数据
 - 用 `FlatList` 高效渲染列表
 - 使用 Expo Router 的 `Link` 或 `router.push` 跳转
 - 在详情页读取路由参数
 ## 1. 准备活动数据
 在首页定义数据：
 ```tsx
 const activities = [
  { id: '1', title: 'APP 部新人培训', time: '周五 19:00', place: '信息学院' },
  { id: '2', title: '程序设计比赛', time: '周六 14:00', place: '教学楼' },
  { id: '3', title: '社团招新宣讲', time: '周日 18:30', place: '大学生活动中心' },
 ];
 ```
 每一项都是对象，`id` 用来识别活动，其他字段是要显示的信息。
 ## 2. 使用 FlatList
 `FlatList` 是 React Native 推荐的长列表组件。最小写法如下：
 ```tsx
 import { FlatList, Text, View } from 'react-native';
 <FlatList
  data={activities}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View>
      <Text>{item.title}</Text>
      <Text>{item.time} · {item.place}</Text>
    </View>
  )}
 />
 ```
 ## 3. 创建详情页
 Expo Router 模板中，为活动详情新建 `app/activity/[id].tsx`。`[id]` 表示 URL 中可变的参数，例如 `/activity/2`。
 首页可用 `router.push` 前往详情：
 ```tsx
 import { router } from 'expo-router';
 router.push({ pathname: '/activity/[id]', params: { id: item.id } });
 ```
 详情页通过 `useLocalSearchParams` 读取参数：
 ```tsx
 import { useLocalSearchParams } from 'expo-router';
 const { id } = useLocalSearchParams<{ id: string }>();
 ```
 根据 `id` 从活动数组中查找对应数据，再展示标题、时间、地点与介绍。页面返回按钮由 Expo Router 的 Stack 默认提供；若没有，请检查根布局是否使用了 `Stack`。
 ## 今日任务：校园活动列表
 完成首页活动列表和活动详情页：
 ```text
 首页
 ├─ APP 部新人培训
 ├─ 程序设计比赛
 └─ 社团招新宣讲
          ↓
       活动详情
 ```
 详情页至少显示活动名称、时间、地点、活动介绍。点击不同活动，必须显示不同内容。
 ## 验收标准
 - [ ] 首页至少显示 3 条活动
 - [ ] 使用 `FlatList`
 - [ ] 每个列表项都有稳定的 `id`
 - [ ] 点击列表项能跳到详情页
 - [ ] 使用 `router.push`（或 `Link`）传递 `id`
 - [ ] 详情页用 `useLocalSearchParams` 读取 `id`
 - [ ] 不同活动展示不同详情
@@ -1,100 +0,0 @@
 # Day_7：综合小测——CampusHelper
 > 把前六天学到的东西真正组合成一个 React Native 应用。
 预计用时：60～90 分钟。
 今天可以查阅前面的 README、官方文档、报错信息或 AI；但请确保你知道提交的代码大致在做什么。
 ## 最终任务
 完成 CampusHelper，至少包含：
 ```text
 首页
 ├─ 个人信息卡片
 ├─ 学习打卡计数器
 └─ 校园活动列表
          ↓
       活动详情
          └─ 报名状态切换
 ```
 ## 功能要求
 ### 1. 个人信息卡片
 首页显示姓名、专业、APP 部新人身份和学习方向。
 ### 2. 学习打卡
 显示当前次数，提供 `+1`、`-1`、重置按钮；次数不能小于 0。
 ### 3. 活动列表
 至少三条活动，每条展示名称、时间和地点。请使用 `FlatList`。
 ### 4. 活动详情
 点击活动进入详情页，展示标题、时间、地点和介绍。不同活动必须显示不同内容。
 ### 5. 报名按钮
 详情页增加可切换状态的按钮：
 ```text
 [ 报名活动 ]  ↔  [ 已报名 ]
 ```
 参考实现：
 ```tsx
 const [joined, setJoined] = useState(false);
 <Pressable onPress={() => setJoined((current) => !current)}>
  <Text>{joined ? '已报名' : '报名活动'}</Text>
 </Pressable>
 ```
 ## 最低验收标准
 - [ ] 项目能通过 `npx expo start` 正常运行
 - [ ] 至少有首页和活动详情页两个页面
 - [ ] 使用 `View`、`Text`、`StyleSheet`
 - [ ] 使用 `useState`
 - [ ] 使用 `Pressable` 和 `onPress`
 - [ ] 使用 `FlatList`
 - [ ] 使用 Expo Router 页面跳转并传递参数
 - [ ] 有一个能改变状态的报名按钮
 - [ ] 页面有基本样式且没有明显红色报错
 ## Git 要求
 完成项目后，在项目目录执行：
 ```bash
 git status
 git add .
 git commit -m "feat: finish CampusHelper React Native app"
 git push
 git log --oneline
 ```
 ## 项目 README
 为你的项目添加 `README.md`，写明：项目名称、已完成功能、你学到的 React Native 知识点，以及启动方式：
 ```bash
 npm install
 npx expo start
 ```
 ## 提交内容
 在 Day_7 工单提交首页截图、活动详情截图、Git 提交记录截图，以及一句你在这七天中收获最大或最难理解的知识点。
 ## Bonus
 - 用 `AsyncStorage` 持久化报名状态；
 - 设计自己的色彩、卡片和按钮风格；
 - 增加 Todo、课程表、失物招领等一个新页面。
@@ -16,7 +16,7 @@ APP 部 2026 纳新每日一题（开发基础 / 命令行 / Git / React Native
 | `Day_6` | 列表与导航：`FlatList`、参数与详情页 |
 | `Day_7` | 综合完成一个 React Native 校园助手应用 |
-> **定位目标：**帮助零基础同学建立开发习惯，理解项目、组件、状态、事件、列表与导航，并能阅读和修改一个简单的 React Native 应用。
+> **目的：**帮助零基础同学建立开发习惯，理解项目、组件、状态、事件、列表与导航，并能阅读和修改一个简单的 React Native 应用。
 ## 技术栈
@@ -27,7 +27,7 @@ APP 部 2026 纳新每日一题（开发基础 / 命令行 / Git / React Native
 - Expo：提供适合入门的项目脚手架、开发服务器与真机预览流程。
 - React Navigation：处理多页面应用的页面跳转。
-入门阶段不需要 Android Studio 或 Xcode；使用 Expo Go 扫码即可在手机上预览。
+不需要 Android Studio、Xcode 或微信开发者工具；使用 Expo Go 扫码即可在手机上预览。
 ## 最终项目：CampusHelper