From 3284e63e897391b2eac6e1e240e1713512696b20 Mon Sep 17 00:00:00 2001 From: arthur <2433368947@qq.com> Date: Thu, 17 Sep 2026 11:13:35 +0800 Subject: [PATCH] init --- Day_1/README.md | 85 +++ Day_2/README.md | 1314 +++++++++++++++++++++++++++++++++++++++++++++++ Day_3/README.md | 497 ++++++++++++++++++ Day_4/README.md | 75 +++ Day_5/README.md | 67 +++ Day_6/README.md | 92 ++++ Day_7/README.md | 100 ++++ README.md | 450 +--------------- 8 files changed, 2248 insertions(+), 432 deletions(-) create mode 100644 Day_1/README.md create mode 100644 Day_2/README.md create mode 100644 Day_3/README.md create mode 100644 Day_4/README.md create mode 100644 Day_5/README.md create mode 100644 Day_6/README.md create mode 100644 Day_7/README.md diff --git a/Day_1/README.md b/Day_1/README.md new file mode 100644 index 0000000..c797eda --- /dev/null +++ b/Day_1/README.md @@ -0,0 +1,85 @@ +# Day_1：环境配置与第一个 React Native 应用 + +> 今天只做一件事：让 React Native 开发环境真正跑起来。 + +预计用时：30～45 分钟。 + +## 今日目标 + +- 安装 VS Code、Node.js LTS 与 Git +- 在手机安装 Expo Go +- 创建并启动一个 Expo 项目 +- 修改一行文字并在手机或模拟器中看到变化 + +## 1. 安装工具 + +安装以下工具并保持默认设置： + +1. [VS Code](https://code.visualstudio.com/) +2. [Node.js LTS](https://nodejs.org/) +3. [Git](https://git-scm.com/) +4. 手机上的 Expo Go（Android 可从 Google Play 获取；iOS 可从 App Store 获取） + +打开 VS Code 的“终端 → 新建终端”，依次检查： + +```bash +node --version +npm --version +git --version +``` + +三条命令都应输出版本号；若没有，请重启终端后检查安装步骤。 + +## 2. 创建项目 + +在准备放置练习代码的位置执行： + +```bash +npx create-expo-app@latest CampusHelper +cd CampusHelper +npx expo start +``` + +终端会显示二维码。让电脑和手机连接同一网络，再用 Expo Go 扫码打开项目；也可按提示在 Android 或 iOS 模拟器中启动。 + +## 3. 认识项目 + +新版模板的目录可能略有不同，但先找到入口屏幕（常见为 `app/index.tsx` 或 `App.tsx`）。React Native 常见组件包括： + +```text +View 一块布局区域 +Text 文字 +Pressable 可点击区域 +Image 图片 +``` + +## 4. 第一次修改 + +将入口页面中可见的标题改成： + +```text +Hello, APP! +这是我的第一个 React Native 应用。 +``` + +保存后，Expo 通常会自动刷新手机中的页面。没有刷新时，回到 Expo Go 后手动刷新。 + +## 今日任务 + +把文字改成属于你自己的介绍，至少包括姓名、专业和一句“我想学习的技术”。不要直接提交示例文字。 + +## 验收标准 + +- [ ] `node --version`、`npm --version`、`git --version` 都能运行 +- [ ] `CampusHelper` 项目已创建 +- [ ] Expo 开发服务器已启动 +- [ ] 手机或模拟器成功显示应用 +- [ ] 修改后的文字已经显示 + +## 常见问题 + +**手机打不开二维码：**先确认手机和电脑处于同一局域网；不方便时，可在 Expo 的终端界面切换为 tunnel 连接。 + +**`npx` 找不到：**通常是 Node.js 未安装成功，重新打开终端并执行 `node --version` 检查。 + +**修改后没更新：**确认文件已保存，并在 Expo Go 中执行刷新。 diff --git a/Day_2/README.md b/Day_2/README.md new file mode 100644 index 0000000..abac90a --- /dev/null +++ b/Day_2/README.md @@ -0,0 +1,1314 @@ +# Day_2：命令行基础——不用鼠标操作文件 + +> 今天暂时不写界面，先掌握 React Native 项目同样离不开的命令行基础。 +> +> 我们来学习一个程序员每天都会接触的工具：**命令行（Command Line）**。 + +预计用时：30～45 分钟 + +--- + +## 今日目标 + +完成今天以后，你应该知道： + +- 什么是终端 +- 什么是当前目录 +- 什么是文件和文件夹 +- 什么是路径 +- 什么是绝对路径和相对路径 +- 如何用命令进入、退出和创建目录 +- Windows 与 macOS 的命令行有什么区别 +- 为什么很多开发命令必须在“正确的目录”中执行 + +今天不要求背命令。 + +真正需要建立的是： + +> **“我现在在哪里？我要去哪里？我要操作哪个文件？”** + +这种命令行思维。 + +--- + +# 1. 打开终端 + +根据自己的操作系统选择对应方式。 + +## Windows + +可以直接在 VS Code 中点击： + +```text +终端 +→ +新建终端 +``` + +通常会打开： + +```text +PowerShell +``` + +你可能看到： + +```text +PS C:\Users\Arthur> +``` + +--- + +## macOS + +同样可以直接使用 VS Code： + +```text +Terminal +→ +New Terminal +``` + +通常会打开： + +```text +zsh +``` + +你可能看到： + +```text +arthur@MacBook ~ % +``` + +也可以使用 macOS 自带的： + +```text +终端 Terminal +``` + +可以通过： + +```text +Command + Space +``` + +打开 Spotlight，然后搜索： + +```text +Terminal +``` + +--- + +# 2. Windows 和 macOS 的命令一样吗？ + +有些一样，有些不一样。 + +今天会使用的命令大部分在两个系统中都可以使用。 + +| 功能 | Windows PowerShell | macOS Terminal | +| --- | --- | --- | +| 查看当前目录 | `pwd` | `pwd` | +| 查看文件 | `ls` | `ls` | +| 进入目录 | `cd` | `cd` | +| 返回上一级 | `cd ..` | `cd ..` | +| 创建目录 | `mkdir` | `mkdir` | +| 查看文本文件 | `cat` | `cat` | +| 清屏 | `cls` / `clear` | `clear` | +| 创建空文件 | `New-Item` | `touch` | + +所以你会发现： + +> Windows PowerShell 和 macOS Terminal 的基本使用方式其实非常接近。 + +后面的教程如果没有特别说明： + +```bash +pwd +ls +cd +mkdir +cat +``` + +这些命令 Windows 和 macOS 都可以直接使用。 + +--- + +# 3. 我现在在哪里？ + +在终端输入： + +```bash +pwd +``` + +然后按 Enter。 + +`pwd` 可以理解成： + +```text +Print Working Directory +``` + +也就是： + +> 显示当前工作目录。 + +--- + +## Windows 可能看到 + +```text +C:\Users\Arthur +``` + +--- + +## macOS 可能看到 + +```text +/Users/arthur +``` + +虽然路径长得不一样，但表达的是同一个概念： + +> **你当前所在的位置。** + +这叫： + +```text +当前工作目录 +Current Working Directory +``` + +以后很多常见报错，例如： + +```text +找不到文件 +找不到项目 +不是 Git 仓库 +找不到 package.json +找不到配置文件 +``` + +原因都有可能非常简单： + +> **你站错文件夹了。** + +所以以后遇到奇怪问题，可以养成第一个习惯： + +```bash +pwd +``` + +先确认： + +> 我现在到底在哪里？ + +--- + +# 4. 看看当前目录有什么 + +输入： + +```bash +ls +``` + +--- + +## Windows + +可能看到： + +```text +Desktop +Documents +Downloads +Pictures +... +``` + +--- + +## macOS + +也可能看到： + +```text +Desktop +Documents +Downloads +Movies +Pictures +... +``` + +`ls` 的作用就是： + +> 查看当前目录中有哪些文件和文件夹。 + +--- + +# 5. 文件系统可以想象成一棵树 + +假设你的电脑里有： + +```text +Documents/ +├── homework/ +├── APP/ +│ ├── CampusHelper/ +│ └── notes/ +└── test.txt +``` + +如果你现在位于： + +```text +Documents +``` + +那么： + +```text +APP +``` + +就是你当前目录下面的一个文件夹。 + +而： + +```text +CampusHelper +``` + +位于： + +```text +APP +``` + +里面。 + +--- + +# 6. 进入一个目录 + +使用： + +```bash +cd 目录名 +``` + +例如： + +```bash +cd Documents +``` + +然后： + +```bash +pwd +``` + +你会发现当前位置改变了。 + +--- + +## 如果目录名中有空格怎么办？ + +假设有： + +```text +My Projects +``` + +可以写： + +```bash +cd "My Projects" +``` + +Windows 和 macOS 都建议养成这个习惯： + +> 路径中有空格时使用引号。 + +不过日常开发目录最好尽量使用： + +```text +CampusHelper +app-rookie +my-project +``` + +这种没有空格的名字。 + +--- + +# 7. 返回上一级目录 + +输入： + +```bash +cd .. +``` + +这里： + +```text +.. +``` + +代表： + +> 上一级目录。 + +例如： + +```text +Documents/APP/CampusHelper +``` + +执行： + +```bash +cd .. +``` + +之后： + +```text +Documents/APP +``` + +再执行一次： + +```bash +cd .. +``` + +就变成： + +```text +Documents +``` + +--- + +# 8. `.` 又是什么？ + +在命令行中： + +```text +. +``` + +代表： + +> 当前目录。 + +而： + +```text +.. +``` + +代表： + +> 上一级目录。 + +所以以后如果看到： + +```text +./ +../ +``` + +不要觉得它是什么特殊代码。 + +它们本质上只是在描述位置。 + +--- + +# 9. 创建文件夹 + +找一个你准备存放练习的位置。 + +推荐： + +## Windows + +例如： + +```text +Documents +``` + +或者： + +```text +D:\Projects +``` + +## macOS + +例如： + +```text +Documents +``` + +或者在自己的用户目录下建立： + +```text +Projects +``` + +--- + +输入： + +```bash +mkdir APP-Rookie +``` + +然后： + +```bash +ls +``` + +应该可以看到： + +```text +APP-Rookie +``` + +进入它： + +```bash +cd APP-Rookie +``` + +确认： + +```bash +pwd +``` + +--- + +# 10. 创建多个目录 + +继续输入： + +```bash +mkdir Day_2 +mkdir projects +mkdir notes +``` + +然后： + +```bash +ls +``` + +应该看到： + +```text +Day_2 +projects +notes +``` + +到这里你已经在： + +> **完全不用鼠标** + +的情况下创建了三个文件夹。 + +--- + +# 11. 创建一个文件 + +这里 Windows 和 macOS 会有一点区别。 + +--- + +## Windows PowerShell + +可以使用： + +```powershell +New-Item README.md +``` + +也可以直接： + +```powershell +echo "Hello APP" > README.md +``` + +--- + +## macOS + +可以使用： + +```bash +touch README.md +``` + +然后写入内容： + +```bash +echo "Hello APP" > README.md +``` + +--- + +两个系统都可以执行： + +```bash +ls +``` + +应该看到： + +```text +README.md +``` + +--- + +# 12. 查看文件内容 + +Windows PowerShell 和 macOS 都可以： + +```bash +cat README.md +``` + +应该看到： + +```text +Hello APP +``` + +--- + +# 13. 什么是路径？ + +这是今天最重要的知识之一。 + +假设： + +```text +APP-Rookie/ +├── Day_2/ +├── projects/ +├── notes/ +└── README.md +``` + +如果你现在位于： + +```text +APP-Rookie +``` + +然后执行： + +```bash +cd Day_2 +``` + +这里的： + +```text +Day_2 +``` + +就是： + +> **相对路径** + +意思是： + +> 从“我现在的位置”出发，怎么找到它。 + +--- + +# 14. 什么是绝对路径？ + +绝对路径相当于： + +> 从最开始的位置写出的完整地址。 + +--- + +## Windows 示例 + +```text +C:\Users\Arthur\Documents\APP-Rookie\Day_2 +``` + +或者： + +```text +D:\Projects\APP-Rookie\Day_2 +``` + +Windows 通常以： + +```text +C:\ +D:\ +``` + +这样的盘符开始。 + +--- + +## macOS 示例 + +```text +/Users/arthur/Documents/APP-Rookie/Day_2 +``` + +macOS 的路径通常从： + +```text +/ +``` + +开始。 + +--- + +可以简单理解： + +```text +绝对路径 += +完整地址 +``` + +```text +相对路径 += +从当前位置怎么走 +``` + +--- + +# 15. Windows 和 macOS 路径最大的区别 + +注意观察： + +## Windows + +```text +C:\Users\Arthur\Documents +``` + +通常使用： + +```text +\ +``` + +--- + +## macOS + +```text +/Users/arthur/Documents +``` + +使用： + +```text +/ +``` + +以后复制别人教程里的命令时要注意这一点。 + +不过很多现代开发工具本身会帮助处理路径差异，所以目前不需要过度担心。 + +--- + +# 16. `~` 是什么？ + +macOS 用户经常会看到： + +```text +~ +``` + +例如终端： + +```text +arthur@MacBook ~ % +``` + +这里： + +```text +~ +``` + +代表： + +> 当前用户的 Home 目录。 + +例如： + +```text +/Users/arthur +``` + +所以： + +```bash +cd ~ +``` + +可以回到自己的用户目录。 + +--- + +## Windows PowerShell 也支持 + +```powershell +cd ~ +``` + +通常会进入： + +```text +C:\Users\你的用户名 +``` + +所以这是两个系统都很方便的命令。 + +--- + +# 17. 清屏 + +终端里东西太多时，可以清空屏幕。 + +## Windows + +```powershell +cls +``` + +或者： + +```powershell +clear +``` + +## macOS + +```bash +clear +``` + +注意： + +> 清屏并不会删除任何文件。 + +它只是把终端显示内容清掉。 + +--- + +# 今日任务：不用鼠标搭建一个项目 + +现在开始今天的正式任务。 + +要求： + +> **尽量不要使用鼠标创建文件和文件夹。** + +请创建： + +```text +my-app/ +├── src/ +│ ├── pages/ +│ └── utils/ +├── docs/ +├── assets/ +└── README.md +``` + +并让： + +```text +README.md +``` + +中包含： + +```text +My First APP Project +``` + +--- + +# 任务第一步 + +先创建项目： + +```bash +mkdir my-app +``` + +进入： + +```bash +cd my-app +``` + +--- + +# 任务第二步 + +想一想： + +怎样创建： + +```text +src +docs +assets +``` + +？ + +如果已经知道，就不要继续看提示。 + +--- + +# 提示 1 + +可以： + +```bash +mkdir src +mkdir docs +mkdir assets +``` + +--- + +# 任务第三步 + +现在需要： + +```text +src/ +├── pages/ +└── utils/ +``` + +想一想： + +> 应该先进入哪个目录？ + +--- + +# 提示 2 + +```bash +cd src +``` + +然后： + +```bash +mkdir pages +mkdir utils +``` + +完成之后： + +```bash +cd .. +``` + +返回： + +```text +my-app +``` + +--- + +# 任务第四步：创建 README + +## Windows PowerShell + +可以： + +```powershell +echo "My First APP Project" > README.md +``` + +## macOS + +同样可以： + +```bash +echo "My First APP Project" > README.md +``` + +所以这里两个系统完全一样。 + +--- + +# 查看结果 + +执行： + +```bash +ls +``` + +然后： + +```bash +cat README.md +``` + +应该看到： + +```text +My First APP Project +``` + +--- + +# 完整参考解答 + +Windows PowerShell 和 macOS 都可以直接使用下面这组命令： + +```bash +mkdir my-app +cd my-app + +mkdir src +mkdir docs +mkdir assets + +cd src + +mkdir pages +mkdir utils + +cd .. + +echo "My First APP Project" > README.md +``` + +查看： + +```bash +ls +``` + +然后： + +```bash +cat README.md +``` + +进入： + +```bash +cd src +``` + +查看： + +```bash +ls +``` + +应该看到： + +```text +pages +utils +``` + +--- + +# 今日验收标准 + +完成以下内容即可通过 Day_2： + +- [ ] 知道什么是终端 +- [ ] 会使用 `pwd` +- [ ] 会使用 `ls` +- [ ] 会使用 `cd` +- [ ] 会使用 `cd ..` +- [ ] 会使用 `mkdir` +- [ ] 会使用 `cat` +- [ ] 知道 `.` 和 `..` 大概是什么意思 +- [ ] 能区分绝对路径和相对路径 +- [ ] 知道 Windows 和 macOS 的路径写法不同 +- [ ] 成功创建要求中的 `my-app` 项目结构 + +请提交： + +1. `my-app` 在 VS Code 中的目录截图 +2. 终端中执行 `pwd` 和 `ls` 后的截图 + +--- + +# 常见问题 + +## 1. `cd` 后提示找不到目录 + +例如： + +```text +cannot find path +``` + +或者： + +```text +no such file or directory +``` + +首先执行： + +```bash +pwd +``` + +然后： + +```bash +ls +``` + +检查： + +> 你当前目录下真的有那个文件夹吗？ + +--- + +## 2. Windows 能使用 `ls` 吗？ + +如果你使用： + +```text +PowerShell +``` + +可以。 + +PowerShell 支持： + +```powershell +ls +``` + +虽然 Windows 传统命令是： + +```cmd +dir +``` + +但为了让 Windows 和 macOS 的操作尽可能一致，本课程优先使用： + +```bash +ls +``` + +--- + +## 3. macOS 为什么没有 C 盘和 D 盘？ + +这是操作系统文件系统设计不同造成的。 + +Windows 常见： + +```text +C:\ +D:\ +``` + +而 macOS 通常从： + +```text +/ +``` + +开始组织整个文件系统。 + +目前你不需要研究更深入的区别。 + +只要知道： + +> 两边路径长得不同，但“目录”和“文件”的概念是一样的。 + +--- + +## 4. 为什么教程里有时候是 `/`，有时候是 `\`？ + +Windows 路径通常： + +```text +C:\Users\Arthur +``` + +macOS 路径： + +```text +/Users/arthur +``` + +所以看到路径时： + +> 先判断教程使用的是哪个操作系统。 + +--- + +## 5. 我用的是 Windows CMD，不是 PowerShell + +建议这套课程优先使用： + +```text +PowerShell +``` + +因为其中很多命令，例如： + +```text +pwd +ls +cat +``` + +和 macOS/Linux 更接近。 + +VS Code 在 Windows 下通常也可以方便地选择 PowerShell。 + +--- + +# Bonus：文件寻宝挑战 + +创建下面的结构： + +```text +CampusHelper/ +├── pages/ +│ ├── index/ +│ └── detail/ +├── images/ +└── README.md +``` + +要求： + +> 尽量不使用鼠标。 + +完成后，从： + +```text +CampusHelper +``` + +开始： + +进入： + +```text +pages/index +``` + +再返回： + +```text +CampusHelper +``` + +整个过程中只能使用： + +```bash +cd +``` + +--- + +# Bonus 2：试试这些命令 + +在自己的测试目录中尝试： + +```bash +cd ~ +``` + +然后： + +```bash +pwd +``` + +观察你去了哪里。 + +再试： + +```bash +cd - +``` + +看看发生什么。 + +如果你的终端支持这个命令，它通常可以： + +> 返回刚才所在的目录。 + +--- + +# 今天最重要的一句话 + +以后当你看到： + +```text +找不到文件 +找不到项目 +找不到配置 +not a git repository +``` + +不要第一时间慌。 + +先执行： + +```bash +pwd +``` + +然后： + +```bash +ls +``` + +问自己： + +> **我现在在哪里？我要操作的东西真的在这里吗？** + +这会解决很多未来的开发问题。 diff --git a/Day_3/README.md b/Day_3/README.md new file mode 100644 index 0000000..e283a3d --- /dev/null +++ b/Day_3/README.md @@ -0,0 +1,497 @@ +# Day_3：Git 入门——给代码一个“存档点” + +> 今天学习 APP 开发中非常重要的工具：Git。 +> +> 不管以后学习 React Native、Kotlin、KMP 还是后端，你都会继续使用它。 + +预计用时：40～60 分钟 + +## 今日目标 + +完成今天后，你应该能够： + +- 理解 Git 大概是做什么的 +- clone 一个仓库 +- 查看 Git 状态 +- add 修改 +- commit 修改 +- push 到远程 +- pull 最新代码 + +暂时不用学习复杂 Git。 + +--- + +# 1. Git 是什么？ + +假设你写项目时这样保存： + +```text +最终版.zip +最终版2.zip +最终版真的最终版.zip +最终版真的最终版修改.zip +``` + +这显然很痛苦。 + +Git 可以帮你保存项目的修改历史。 + +你可以把： + +```text +commit +``` + +理解成： + +> 给当前代码拍一张快照。 + +--- + +# 2. Git 最基本的流程 + +暂时只需要记住： + +```text +修改文件 + ↓ +git add + ↓ +git commit + ↓ +git push + ↓ +远程仓库 +``` + +其中： + +```text +add +``` + +表示： + +> 我准备提交这些修改。 + +```text +commit +``` + +表示： + +> 保存一个版本。 + +```text +push +``` + +表示： + +> 把本地版本上传到服务器。 + +--- + +# 3. 配置自己的身份 + +第一次使用 Git，需要告诉 Git 你是谁。 + +打开终端： + +```bash +git config --global user.name "你的名字" +``` + +例如： + +```bash +git config --global user.name "Arthur" +``` + +再填写邮箱： + +```bash +git config --global user.email "你的邮箱" +``` + +查看： + +```bash +git config --global --list +``` + +--- + +# 4. 创建自己的练习仓库 + +进入社团 Git 平台。 + +创建一个自己的仓库，例如： + +```text +app-rookie-你的名字 +``` + +创建仓库时建议： + +```text +初始化 README +``` + +这样仓库不是空的。 + +找到仓库的： + +```text +HTTPS Clone 地址 +``` + +复制。 + +--- + +# 5. clone 到自己的电脑 + +先进入你准备保存代码的位置： + +```bash +cd 你的目录 +``` + +然后： + +```bash +git clone 复制下来的地址 +``` + +例如： + +```bash +git clone <你的仓库地址> +``` + +成功后： + +```bash +ls +``` + +应该出现： + +```text +app-rookie-你的名字 +``` + +进入： + +```bash +cd app-rookie-你的名字 +``` + +--- + +# 6. 看看 Git 在干什么 + +执行： + +```bash +git status +``` + +如果没有修改，通常会看到类似： + +```text +nothing to commit +working tree clean +``` + +意思是： + +> 当前代码没有没有保存的修改。 + +--- + +# 7. 修改一个文件 + +执行： + +```bash +echo "Day 3 Git Practice" > Day_3.txt +``` + +再： + +```bash +git status +``` + +这一次你应该看到： + +```text +Day_3.txt +``` + +出现在未跟踪文件中。 + +--- + +# 8. git add + +执行： + +```bash +git add Day_3.txt +``` + +再次： + +```bash +git status +``` + +文件状态发生了变化。 + +现在表示： + +> 我准备把 Day_3.txt 放进下一次 commit。 + +--- + +# 9. 第一个 commit + +执行： + +```bash +git commit -m "docs: finish day 3 git practice" +``` + +这里： + +```text +-m +``` + +后面的文字就是： + +> 这次修改做了什么。 + +--- + +# 10. push + +执行： + +```bash +git push +``` + +根据平台设置，第一次可能需要登录。 + +完成后打开网页刷新仓库。 + +如果你看到： + +```text +Day_3.txt +``` + +恭喜： + +> 🎉 你完成了第一次真正的 Git 提交。 + +--- + +# 11. git log + +执行： + +```bash +git log --oneline +``` + +你可能看到： + +```text +abc1234 docs: finish day 3 git practice +... +``` + +这就是你的提交历史。 + +--- + +# 12. pull 是什么？ + +如果服务器上的代码比你的电脑更新： + +需要： + +```bash +git pull +``` + +你可以尝试： + +1. 在 Git 网页上修改 `README.md` +2. 直接在网页提交修改 +3. 回到本地 +4. 执行： + +```bash +git pull +``` + +观察本地文件有没有更新。 + +--- + +# 今日任务 + +完成以下过程： + +```text +创建个人仓库 +↓ +clone +↓ +创建 Day_3.txt +↓ +git add +↓ +git commit +↓ +git push +↓ +网页确认文件存在 +``` + +然后再做第二次修改： + +把： + +```text +Day 3 Git Practice +``` + +改成： + +```text +Day 3 Git Practice +I know how to use Git now. +``` + +再次： + +```bash +git add . +git commit -m "docs: update day 3 practice" +git push +``` + +最后： + +```bash +git log --oneline +``` + +应该至少看到两个自己的 commit。 + +--- + +# 验收标准 + +- [ ] 知道 Git 是版本管理工具 +- [ ] 成功 clone 仓库 +- [ ] 会执行 `git status` +- [ ] 会执行 `git add` +- [ ] 会执行 `git commit` +- [ ] 会执行 `git push` +- [ ] 知道 `git pull` 是做什么的 +- [ ] 仓库里至少存在两个自己的 commit + +提交： + +```text +git log --oneline +``` + +的截图。 + +--- + +# 常见问题 + +## `not a git repository` + +先执行： + +```bash +pwd +``` + +很可能： + +> 你没有进入仓库目录。 + +执行： + +```bash +cd app-rookie-你的名字 +``` + +然后再试。 + +这就是为什么 Day_2 要学习目录。 + +--- + +## `nothing to commit` + +通常表示： + +> 你没有新的修改可以提交。 + +先： + +```bash +git status +``` + +看看发生了什么。 + +--- + +## push 被拒绝 + +先不要乱执行： + +```text +--force +``` + +先尝试： + +```bash +git pull +``` + +如果仍然失败： + +把完整报错提交到工单或询问学长学姐。 + +--- + +# Bonus + +尝试执行： + +```bash +git diff +``` + +然后修改一个文件，再执行一次。 + +看看 Git 是如何显示代码变化的。 + +--- diff --git a/Day_4/README.md b/Day_4/README.md new file mode 100644 index 0000000..c25471b --- /dev/null +++ b/Day_4/README.md @@ -0,0 +1,75 @@ +# 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 ( + + Hello APP + 这是我的第一个 React Native 页面。 + + ); +} + +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 + + 小明 + 计算机科学与技术 + 方向：移动端开发 + +``` + +为 `card` 添加 `padding`、`backgroundColor`、`borderRadius` 和 `marginTop`；为 `name` 设置更大的 `fontSize` 和 `fontWeight: '700'`。 + +## 今日任务 + +完成一张个人信息卡片，至少展示：姓名、专业、感兴趣的方向、想学习的技术。自行调整背景、间距、字号或圆角，使页面有自己的风格。 + +## 验收标准 + +- [ ] 使用了 `View` 和 `Text` +- [ ] 使用 `StyleSheet.create` +- [ ] 页面显示四项个人信息 +- [ ] 卡片具有间距、背景色和圆角 +- [ ] 在 Expo Go 或模拟器中正常预览 diff --git a/Day_5/README.md b/Day_5/README.md new file mode 100644 index 0000000..c0b3f53 --- /dev/null +++ b/Day_5/README.md @@ -0,0 +1,67 @@ +# 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'; + + + 今日学习次数：{count} + setCount(count + 1)}> + +1 + + +``` + +用户点击 `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 需要知道状态发生了变化，才能安排重新渲染。 diff --git a/Day_6/README.md b/Day_6/README.md new file mode 100644 index 0000000..5907786 --- /dev/null +++ b/Day_6/README.md @@ -0,0 +1,92 @@ +# 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'; + + item.id} + renderItem={({ item }) => ( + + {item.title} + {item.time} · {item.place} + + )} +/> +``` + +## 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` +- [ ] 不同活动展示不同详情 diff --git a/Day_7/README.md b/Day_7/README.md new file mode 100644 index 0000000..72be53f --- /dev/null +++ b/Day_7/README.md @@ -0,0 +1,100 @@ +# 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); + + setJoined((current) => !current)}> + {joined ? '已报名' : '报名活动'} + +``` + +## 最低验收标准 + +- [ ] 项目能通过 `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、课程表、失物招领等一个新页面。 diff --git a/README.md b/README.md index 5b3b678..590f6c7 100644 --- a/README.md +++ b/README.md @@ -1,450 +1,36 @@ # DailyChallenge_APP -APP部 2026 纳新每日一题（开发基础 / 命令行 / Git / 微信小程序） +APP 部 2026 纳新每日一题（开发基础 / 命令行 / Git / React Native）。 -请克隆仓库以获取每日一题。 - -## 学习方式 - -每天一个文件夹（`Day_1 ~ Day_7`），**先看教程再动手做**，每天控制在 **30～60 分钟以内**： - -1. 打开当天文件夹的 `README.md` -2. 先阅读 `README.md` 中的内容，了解当天需要使用的知识 -3. 再完成任务，遇到问题时优先尝试查阅文档、搜索或使用 AI 辅助 -4. 将运行结果、截图或代码提交到**当日工单**评论区 - ---- - -## 提交方式 - -请在对应的每日工单下方“撰写”区域提交你的代码、运行截图或仓库链接，然后点击“评论”。 - -如果页面显示“登录 并参与到对话中”，请先点击“登录”并注册你的账户。 - -推荐从第一天开始保留自己的练习仓库，例如： - -```text -DailyChallenge_APP_你的名字/ -├── Day_1/ -├── Day_2/ -├── Day_3/ -├── ... -└── Day_7/ -``` - -后续会学习使用 Git 管理这些代码。 - ---- +每个 `Day_1` ~ `Day_7` 文件夹中都有当天教学与任务。建议每天投入 30～60 分钟：先读 `README.md`，再完成任务，并将代码、运行截图或仓库链接提交到当天工单。 ## 课程安排 | 目录 | 内容 | | --- | --- | -| `Day_1` | 环境配置：VS Code + 终端 + 微信开发者工具 | +| `Day_1` | 环境配置：VS Code、Node.js、Git、Expo Go 与第一个 React Native 应用 | | `Day_2` | 命令行基础：目录、文件与路径 | | `Day_3` | Git 入门：clone / add / commit / pull / push | -| `Day_4` | 小程序页面基础：WXML + WXSS | -| `Day_5` | 小程序交互：事件、data 与 `setData` | -| `Day_6` | 页面与组件：列表、页面跳转与简单数据展示 | -| `Day_7` | 完成一个简单微信小程序 | +| `Day_4` | React Native 页面基础：组件、JSX 与 StyleSheet | +| `Day_5` | React Native 交互：事件、state 与 `useState` | +| `Day_6` | 列表与导航：`FlatList`、参数与详情页 | +| `Day_7` | 综合完成一个 React Native 校园助手应用 | -每个目录包含：当日题目（`README.md`）、学习资料、任务要求、提示以及参考解答。 +> **定位目标：**帮助零基础同学建立开发习惯，理解项目、组件、状态、事件、列表与导航，并能阅读和修改一个简单的 React Native 应用。 -> **定位目标：**这一阶段主要帮助零基础同学建立最基本的软件开发习惯，理解文件、终端、Git、页面、数据和事件之间的关系，并能够看懂和修改一个简单的小程序项目。 +## 技术栈 ---- +本阶段使用 React Native + Expo： -## 每日内容简介 +- React：用组件描述界面，用 state 管理会变化的数据。 +- React Native：将 React 组件渲染为 Android / iOS 原生界面。 +- Expo：提供适合入门的项目脚手架、开发服务器与真机预览流程。 +- React Navigation：处理多页面应用的页面跳转。 -### Day_1：搭建你的开发环境 +入门阶段不需要 Android Studio 或 Xcode；使用 Expo Go 扫码即可在手机上预览。 -完成最基本的开发环境配置： +## 最终项目：CampusHelper -- 安装 VS Code -- 安装 Chrome / Edge -- 安装微信开发者工具 -- 学会打开终端 -- 成功打开并运行第一个示例项目 +第七天将完成一个小型校园助手应用，至少包含个人信息卡片、学习打卡计数器、校园活动列表，以及活动详情页与报名状态切换。 -当天不要求掌握编程知识。 - -目标只有一个： - -> **让开发环境真正跑起来。** - ---- - -### Day_2：程序员如何操作文件？ - -学习最基本的命令行概念： - -```text -当前目录 -文件 -文件夹 -绝对路径 -相对路径 -``` - -以及常见命令： - -```bash -cd -dir / ls -mkdir -pwd -``` -这一部分虽然看起来和 APP 开发没有直接关系，但今后使用： - -```text -Git -Gradle -Node.js -开发服务器 -项目脚本 -``` - -都会频繁接触终端。 - ---- - -### Day_3：第一次使用 Git - -学习最基本的版本控制流程： - -```text -工作区 - ↓ -git add - ↓ -git commit - ↓ -本地仓库 - ↓ -git push - ↓ -远程仓库 -``` - -主要使用： - -```bash -git clone -git status -git add . -git commit -m "..." -git pull -git push -``` - -当天任务是： - -> 将自己的练习文件第一次提交到 Git 仓库。 - -暂时不要求掌握： - -```text -rebase -reset -cherry-pick -复杂分支管理 -``` - -这些会在真正参与项目后逐步学习。 - ---- - -### Day_4：第一个微信小程序页面 - -正式进入微信小程序。 - -学习： - -```text -WXML -WXSS -页面结构 -基础组件 -文字 -图片 -按钮 -简单布局 -``` - -理解最重要的两个概念： - -```text -WXML = 页面结构 -WXSS = 页面样式 -``` - -当天任务可以完成一个： - -> **APP 部个人介绍页面** - -例如显示： - -```text -姓名 -专业 -兴趣方向 -想学习的技术 -联系方式 -``` - ---- - -### Day_5：让页面“动起来” - -学习小程序中的： - -```text -事件 -data -setData -bindtap -``` - -理解： - -```text -用户点击 - ↓ -触发事件 - ↓ -执行函数 - ↓ -数据发生变化 - ↓ -界面更新 -``` - -当天任务： - -> 完成一个简单的计数器或 Todo 页面。 - -例如： - -```text -当前次数：0 - -[ +1 ] -[ -1 ] -[ 重置 ] -``` - -重点不是功能复杂，而是第一次理解： - -> **页面其实是数据的一种表现。** - ---- - -### Day_6：从一个页面到一个小应用 - -学习： - -```text -列表渲染 -wx:for -条件渲染 -页面跳转 -简单的数据传递 -``` - -当天任务可以完成一个： - -> **校园活动列表** - -首页： - -```text -APP 部新人培训 -程序设计比赛 -社团招新宣讲 -``` - -点击某一个活动后进入详情页。 - -开始建立： - -```text -列表页 - ↓ -详情页 -``` - -这种真实 APP 中非常常见的页面关系。 - ---- - -### Day_7：综合小测 - -最后一天不再学习大量新知识。 - -使用前几天的知识完成一个简单小程序，例如： - -## Campus Helper Mini - -可以包含： - -```text -首页 -活动列表 -活动详情 -个人页面 -``` - -最低要求： - -- 至少两个页面 -- 使用 WXML -- 使用 WXSS -- 至少一次点击事件 -- 至少一次 `setData` -- 至少一次列表渲染 -- 至少一次页面跳转 -- 使用 Git 提交代码 -- 编写简单的 `README.md` - -Bonus： - -- 本地缓存 -- 表单输入 -- 搜索 / 筛选 -- 调用简单的公开 API -- 自定义组件 - ---- - -## 环境准备 - -`Day_1` 会详细介绍。 - -### 编辑器 - -VS Code - - - -### 微信开发者工具 - -微信官方提供的小程序开发环境。 - -后续的 WXML、WXSS、JavaScript 和页面调试都会在这里完成。 - -### 浏览器 - -推荐： - -- Chrome -- Edge - -浏览器的开发者工具也是今后调试 Web 页面、接口和网络请求的重要工具。 - -### Git - -用于： - -```text -获取代码 -保存修改记录 -提交作业 -团队协作 -``` - -后续 APP 部正式项目原则上都会使用 Git 进行代码管理。 - ---- - -## 与 Kotlin / KMP 学习的关系 - -APP 部目前主要包含： - -```text -微信小程序 -+ -Kotlin / Kotlin Multiplatform -``` - -本仓库主要用于技术扫盲和小程序开发启蒙。 - -Kotlin / KMP 方向已有独立教程： - -```text -From Kotlin to Kotlin-Multiplatform -``` - -本每日一题主要负责所有方向共同需要的基础能力： - -```text -开发环境 -命令行 -项目目录 -Git -页面 -事件 -数据 -调试 -``` - ---- - -## 关于 AI - -欢迎使用 AI。 - -在现在的软件开发过程中，能够正确使用 AI 本身也是一种能力。 - -你可以让 AI： - -```text -解释报错 -解释一段代码 -寻找某个 API 的使用方法 -帮助检查代码 -给出修改建议 -``` - -但不建议直接： - -```text -复制题目 -↓ -让 AI 完整生成 -↓ -不阅读代码 -↓ -直接提交 -``` - -换句话说， - -> **AI 生成的代码，我大概知道每一部分是在干什么；修改一个需求时，我知道应该去哪里改。** - -如果你能够做到这一点，本阶段的学习目标就已经基本达成。 - ---- - -## 最后的目标 - -完成这一阶段以后，不要求你能够独立开发一个完整 APP。 - -希望你至少能够做到： - -```text -看到一个项目 -↓ -知道怎么把它 clone 下来 -↓ -知道应该在哪个目录运行 -↓ -能够阅读基本项目结构 -↓ -能够修改一个简单页面 -↓ -能够处理点击事件和页面数据 -↓ -能够通过 Git 提交自己的修改 -``` - -做到这些，你就已经具备继续学习微信小程序、Kotlin / KMP，以及参加 APP 部真实项目开发所需要的第一层基础。 \ No newline at end of file +完成后，你应能从项目目录启动开发服务器、修改一个组件、处理点击事件、更新 state、渲染列表、在页面间传递参数，并用 Git 保存修改。