← FC Coder · HomePhase 01 · Lesson 10 · 60 min
Lesson10
Phase One · First App · Matchday 10 · Coach's Call
评分高的有金边
第一次分叉
Today's 3 Jobs · 今天这三件事
- 01写第一个 if (rating >= 90) · 算 borderClass教练换人决策的形状
- 02在 <article> 用 borderClass · 金边出现代码自己判断 · 自己换装
- 03改 rating 88 / 90 / 91 · 看边界>= 包含等号边界
65 分钟你是教练 —— 还落后 1 球 → 换前锋;否则继续。这种「如果...就...否则...」的形状,代码里叫 if / else。今天让你的卡自己判断 —— 评分 ≥ 90 出金边,低于 90 没有。第一次让代码思考。
Essence · 本质点
条件 = 分叉
教练换人的形状 —— 一条路在 65 分钟分成两条:换 · 不换。
let borderClass = 'border-2 border-sky-300';
if (rating >= 90) {
borderClass = 'border-4 border-amber-500';
}
if (rating >= 90) {
borderClass = 'border-4 border-amber-500';
}
问题
if (rating >= 90)
真时做
borderClass = '金边'
假时做
(走 if 之外的默认)
先在 JSX 上面用 if 算出一个变量 · 再在 JSX 里用这个变量。JSX 里不能直接写 if(语法限制)—— 这是 React 里的常见姿势。
Essence · 比较运算符
>= 包含等号边界 · > 不包含
rating = 90 时 · >= 90 还是 true · > 90 是 false。这一点很多大人都搞混。
93 < 99 → true
93 > 99 → false
90 >= 90 → true(边界算)
89 >= 90 → false
93 > 99 → false
90 >= 90 → true(边界算)
89 >= 90 → false
rating = 89
>= 90 → false · 普通边
rating = 90
>= 90 → true · 金边
rating = 91
>= 90 → true · 金边
⚠️ >= 不是 =>。>= 是比较· => 是箭头函数(Phase 2 学)。形状反了 —— 不要混。
Roster · 今天 3 个新工具
if 分叉 · >= 边界 · let 会变盒子
抄着用,改 rating 看变化,5 分钟就熟。
- 01if (条件) { ... } else { ... }分叉 —— 圆括号里写问题(是/否) · 第一对花括号:真时做 · 第二对:假时做。教练换人:65 分钟落后就换前锋;否则继续。
- 02rating >= 90大于或等于 —— 包含 90 这个边界(90 也返回 true)。Phase 0 第 3 课见过 < > · 今天加 >=。> 不包含等号,>= 包含。
- 03let borderClass会变的盒子 —— const 不能改 · let 可以。borderClass 要被 if 改掉,所以用 let。const 占 99%,let 在「我要换盒子里东西」时用。
Half 2 · 在屏幕上
回 sandbox · 让卡的边自己变
改一个 rating · 卡换一身衣服。做完一步就点 ✓。
01写第一个 if · 算 borderClass
01Min
Cursor + pnpm dev + 打开 sandbox
回到 app/lessons/07-my-first-card/sandbox/page.tsx。浏览器看到上节课的变量卡。
02Min
在 const rating 下面写 let borderClass + if
let borderClass = 'border-2 border-sky-300';\nif (rating >= 90) {\n borderClass = 'border-4 border-amber-500';\n}\n保存 · 浏览器不变(还没用)。
02用 borderClass · 金边出现
03Min
<article> 加 ${borderClass} · 反引号包
<article className={`bg-sky-600 text-slate-50 p-6 rounded-lg ${borderClass}`}>。保存 · 卡多了金色粗边(rating=91 >= 90)。
03🌟 改 rating · 看分叉边界
04Min
改 const rating = 88; · 金边消失
保存 · 边变回普通蓝(88 < 90 走 if 外的默认值)。这就是 if 的真本事 —— 代码自己换装。
05Min
改 rating = 90; · 还是金边
>= 包含 90 这个边界。改 rating = 89 · 又消失。改 rating = 91 · 回来。
06Min
改写成 if/else 两支版(可选)
let borderClass;\nif (rating >= 90) { borderClass = '金边' } else { borderClass = '普通边' }。效果完全一样 · 但两支都写出来更对称。两种都对。
04玩 · 加位置判断 · 截图
07Min
加第二个 if · 位置判断 ⚽
在第一个 if 下面 · const position = 'ST'; 然后 let positionLabel = position; if (position === 'ST') { positionLabel = '⚽ 前锋 ' + position; }。JSX 里 <p>{positionLabel} · 9 号</p>。改 position='GK' 看⚽消失。
08Min
玩 5 分钟 · rating 试 70 / 85 / 89 / 90 / 99
每改一个数字 · Cmd + S · 看金边什么时候出现。感受「分叉」在 89 / 90 之间的瞬间。
09Min
📸 截图战利品
Mac Shift + Cmd + 4 框选你的金边判断卡。存 2026-XX-XX-我的判断卡.png · Phase 1 第五张战利品。
Half Time · 中场 · 讲给爸爸听
4 题 · 重点:条件 = 分叉
第一题用教练换人比喻。第 4 题别忘 let 的真正用途。
01什么是 if/else?用「教练换人」的比喻讲。Hint ↓
分叉 —— 这种情况做 A · 否则做 B。65 分钟落后换前锋,否则继续。
02rating >= 90 这段读出来是?Hint ↓
问浏览器一个是/否问题 —— 评分大于或等于 90 吗?返回 true / false。
03JSX 里为什么不能直接写 if?今天怎么解决的?Hint ↓
JSX 里只能放表达式不能放语句。先用 if/else 算出变量(borderClass),再在 JSX 里用变量。
04今天第一次用 let —— 和 const 差在哪?为什么这里要用 let?Hint ↓
let = 会变的盒子,const = 不会变。borderClass 要被 if 改掉,const 不许改,所以必须 let。
Player Rating · 本课温度计
给「第一次让代码思考」打个分
说真话。爸爸会看到。
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
你写的代码会自己判断了 —— 真程序员第一步。
还有 9 步没打勾。Step 4 看金边消失那一下已经命中今天的本质点 —— 其他可以下次补。