01Current
NP任务
任务 1
任务 1：Design tokens: цвета и отступы。阅读简报，完成练习任务，获得 XP。
+40 XP
World 4 / 新手区
UI Components
构建一个小型 React Native UI kit：design tokens、buttons、badges、stat cards、progress bars、course cards、empty states、loading/error states、skeletons、notices、segmented controls 和 final UI Kit screen。 完成课程以解锁下一个区域. Boss 项目在世界终点等待。
NP
进入世界UI Forest生物群系: Forest
UI 森林训练可读屏幕、导航和可复用组件。
向导: Layout Scout
奖励技能: UI pathfinding
目标: 完成课程、解决任务、获得 XP，并打开地图下一段。
路线进度0%
UI Forest
构建在移动尺寸上稳定的屏幕路线。
Route progress0%
免费任务
0 / 12 节课
世界 1新手区Boss 项目
World route
What you will build
Create responsive screens and reusable components.
What you should know
World 3: Expo Start
Recommended previous world
World 3: Expo StartNext world
World 5: Forms 与 Validation状态
Free
世界
世界 1
时长
10 小时 25 分钟
地图
4 个区域 / 12 节课
课时
0 / 12 节课
登录后可保存进度和 XP。
任务地图UI Forest0/12
Navigation Treant
02Locked
任务
任务 2
任务 2：Button variants: primary и secondary。阅读简报，完成练习任务，获得 XP。
+50 XP
03Locked
挑战
任务 3
任务 3：Badge component: FREE, PRO, NEW。阅读简报，完成练习任务，获得 XP。
+40 XP
04Locked
任务
任务 4
任务 4：StatCard: 卡片 метрики。阅读简报，完成练习任务，获得 XP。
+45 XP
05Locked
任务
任务 5
任务 5：ProgressBar: 进度 курса。阅读简报，完成练习任务，获得 XP。
+50 XP
06Locked
奖励
任务 6
任务 6：CourseCard UI: 卡片 курса。阅读简报，完成练习任务，获得 XP。
+60 XP
07Locked
任务
任务 7
任务 7：EmptyState: 空状态。阅读简报，完成练习任务，获得 XP。
+45 XP
08Locked
任务
任务 8
任务 8：Loading и Error states。阅读简报，完成练习任务，获得 XP。
+55 XP
09Locked
挑战
任务 9
任务 9：Skeleton card。阅读简报，完成练习任务，获得 XP。
+50 XP
10Locked
任务
任务 10
任务 10：NoticeCard: info/warning/error。阅读简报，完成练习任务，获得 XP。
+50 XP
11Locked
Boss
Boss 任务
Boss 任务：SegmentedControl: tabs-переключатель。把本区域模式组合成最终成果。 构建在移动尺寸上稳定的屏幕路线。
+60 XP
12Locked
Boss
Boss 任务
Boss 任务：最终项目: UI Kit screen。把本区域模式组合成最终成果。 构建在移动尺寸上稳定的屏幕路线。
+90 XP
任务 1
任务 1：Design tokens: цвета и отступы。阅读简报，完成练习任务，获得 XP。
已收集技能UI pathfinding
最终目标UI Forest
Navigation Treant
世界目标: 构建在移动尺寸上稳定的屏幕路线。
已收集技能: UI pathfinding
/course-assets/lessons/ui-components/design-tokens.svg
关卡 1
Tokens, buttons и badges
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
区域 1
区域 1：Tokens, buttons и badges。完成区域任务，继续推进地图。
关卡 1下一关+40 XP
Design tokens: цвета и отступы
任务 1：Design tokens: цвета и отступы。阅读简报，完成练习任务，获得 XP。
40 分钟
关卡 2已锁定+50 XP
Button variants: primary и secondary
任务 2：Button variants: primary и secondary。阅读简报，完成练习任务，获得 XP。
50 分钟先完成上一关
关卡 3已锁定+40 XP
Badge component: FREE, PRO, NEW
任务 3：Badge component: FREE, PRO, NEW。阅读简报，完成练习任务，获得 XP。
40 分钟先完成上一关
/course-assets/lessons/ui-components/stat-card.svg
关卡 2
Карточки и progress
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
区域 2
区域 2：Карточки и progress。完成区域任务，继续推进地图。
关卡 1已锁定+45 XP
StatCard: 卡片 метрики
任务 4：StatCard: 卡片 метрики。阅读简报，完成练习任务，获得 XP。
45 分钟先完成上一关
关卡 2已锁定+50 XP
ProgressBar: 进度 курса
任务 5：ProgressBar: 进度 курса。阅读简报，完成练习任务，获得 XP。
50 分钟先完成上一关
关卡 3已锁定+60 XP
CourseCard UI: 卡片 курса
任务 6：CourseCard UI: 卡片 курса。阅读简报，完成练习任务，获得 XP。
1 小时先完成上一关
/course-assets/lessons/ui-components/empty-state-component.svg
关卡 3
Состояния интерфейса
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
区域 3
区域 3：Состояния интерфейса。完成区域任务，继续推进地图。
关卡 1已锁定+45 XP
EmptyState: 空状态
任务 7：EmptyState: 空状态。阅读简报，完成练习任务，获得 XP。
45 分钟先完成上一关
关卡 2已锁定+55 XP
Loading и Error states
任务 8：Loading и Error states。阅读简报，完成练习任务，获得 XP。
55 分钟先完成上一关
关卡 3已锁定+50 XP
Skeleton card
任务 9：Skeleton card。阅读简报，完成练习任务，获得 XP。
50 分钟先完成上一关
关卡 4已锁定+50 XP
NoticeCard: info/warning/error
任务 10：NoticeCard: info/warning/error。阅读简报，完成练习任务，获得 XP。
50 分钟先完成上一关
Boss 关卡
Boss 关卡Boss 项目
Композиция и финальный UI Kit
本 module 构建 UI Components 的一个聚焦实战部分。每节 lesson 都包含 task、validation rules 和 hidden solution。
Boss 区域
Boss 区域：Композиция и финальный UI Kit。这里会把学习内容变成作品集证明。 最终 Boss 项目.
关卡 1Boss 关卡已锁定+60 XP
SegmentedControl: tabs-переключатель
Boss 任务：SegmentedControl: tabs-переключатель。把本区域模式组合成最终成果。 构建在移动尺寸上稳定的屏幕路线。
1 小时最终任务先完成上一关
关卡 2Boss 关卡已锁定+90 XP
最终项目: UI Kit screen
Boss 任务：最终项目: UI Kit screen。把本区域模式组合成最终成果。 构建在移动尺寸上稳定的屏幕路线。
1 小时 20 分钟最终任务先完成上一关
Have a question or found an issue?
Your message will include this course context.
XP PRACTICE
Reinforce what you learned
Play a short code game or test your speed in the Arena.