企业官网建设流程全解析

• 教程
• 前端

本文以开源仓库 react-developer-roadmap 的西班牙语文档 README-ES.md 为主体，完整解读其面向 2019 年 React 开发者的 19 大学习阶段与 80 余项核心技术，并结合仓库中的 Draw.io 源文件（src/react-developer-roadmap.xml）与多语言翻译管线，讲清路线图的图例优先级体系、资源清单的取舍逻辑以及如何查看、修改和贡献这份路线图。读完后，你将获得一张可对照自检的 React 学习全景图，并理解为什么"某项工具在特定场景下优于另一项"才是真正的进阶能力。

一、这份路线图解决什么问题

react-developer-roadmap 是社区中广泛流传的 "React Developer Roadmap" 镜像仓库，其价值在于用一张图 + 一份结构化清单回答几乎所有 React 初学者都会问的问题："作为 React 开发者，我接下来应该学什么？"

西班牙语文档 README-ES.md 是该项目面向西语社区的完整本地化版本，其核心由三部分组成：

1. 免责声明（Descargo）——明确路线图的目的不是鼓励"追新追热"，而是帮你理解整个技术版图（paisaje）；
2. 路线图（Roadmap）——一张经 Draw.io 绘制的可视化学习路径图 roadmap-es.png；
3. 资源清单（Resources）——按 19 个阶段层层递进的工具与库清单，是文档的主体与灵魂。

仓库同时维护着英语、中文、日语、韩语、葡萄牙语、俄语等多个版本的 README 与路线图图片，以及支撑多语言产出的 src 目录下各语言 XML 源文件 和 translations 翻译目录，这份西班牙语版正是该多语言体系的组成部分。

二、路线图的定位与免责声明：先理解"为什么"，再决定"学什么"

原文开篇的免责声明是理解整份路线图的前提，其核心观点有三层：

• 路线图给你的是整体版图，而非强制路径；
• 当你在"接下来学什么"上困惑时，它负责引导方向，而不是鼓励你追逐时髦（hip and trendy）的技术；
• 真正的成长在于理解为什么某一种工具在某些场景下比另一种更合适——时髦不等于最适合当前工作。

这一点与仓库源码的结构完全呼应：在 src/react-developer-roadmap.xml 中，每个知识点节点都带有fillColor颜色属性，构成了路线图右上角Legends（图例）的三级优先级体系：

从源码结构看，这套颜色体系正是"免责声明"的可视化落地：它把知识分成"必须""建议""可选"三档，而不是要求学习者全盘吸收。例如在状态管理章节，Redux 节点使用黄色（必知），MobX 使用橙色（建议），而 Redux Persist / Redux Phoenix 使用灰色（可选），优先级一目了然。

三、路线图全貌：19 个阶段的可视化学习路径

整张路线图以 "Aprende lo básico"（学习基础）为起点，主路径自上而下依次经过：基础三件套（HTML / CSS / JS）→ 通用开发技能 → 学习 React 本身 → 构建工具 → 样式方案 → 状态管理 → 类型检查 → 表单 → 路由 → API 客户端 → 工具库 → 测试 → 国际化 → SSR → 静态站点 → 后端集成 → 移动端 → 桌面端 → VR。主路径两侧以虚线连接着各阶段的具体知识点注释，主路径节点用实线箭头串联，体现了严格的先后依赖关系。

四、资源清单精讲：19 个阶段完整拆解

以下按原文 README-ES.md 的 Resources 章节顺序完整展开，并结合 XML 源码中的优先级标注说明每一层的定位。

阶段 1：基础（Básico）——一切的起点

• HTML：学习 HTML 基础概念，动手做几个页面作为练习；
• CSS：学习 CSS 基础，为上一阶段页面添加样式，并用grid 和 flexbox布局构建页面（对应 XML 中的 "Grids y Flexbox" 与 "Diseño resposivo y Media Queries"，即响应式设计与媒体查询）；
• JavaScript 基础：熟悉语法；掌握 DOM 基本操作；理解 JS 典型机制——Hoisting（变量提升）、Event Bubbling（事件冒泡）、原型链；实践 AJAX（XHR）调用；学习 ECMAScript 6+ 新特性；此外可选熟悉 jQuery 库。

在 XML 源文件中，HTML、CSS、JS Basics 三个节点均为黄色（必知）圆角矩形，其右侧以虚线连接着一系列 8 号字注释节点，如 "Semantic HTML"（语义化 HTML）、"Dividir la página en secciones y estructurar el DOM correctamente"（划分页面区块并正确结构化 DOM）等，说明这一阶段不仅是语法入门，更强调语义化与 DOM 结构的工程意识。

阶段 2：通用开发技能（Habilidades generales de desarrollo）

这是很多初学者会跳过、却决定职业上限的一层：

• 学习GIT版本控制，在 GitHub 上创建仓库、与他人分享代码（XML 中标注为 "GIT - Control de versiones (GitHub, Bitbucket, GitLab)"）；
• 掌握HTTP(S) 协议及其请求方法：GET、POST、PUT、PATCH、DELETE、OPTIONS；
• 不畏惧使用搜索引擎解决问题（原文推荐了 Google Power Searching 技巧课程）；
• 熟悉终端使用，配置自己的 shell（bash、zsh、fish）；
• 阅读算法与数据结构书籍；
• 阅读设计模式书籍。

这一层在路线图中被称为 "General Development Skills"，强调的是超越框架本身的工程通识能力。

阶段 3：学习 React 本身

原文给出两条路径：官方教程（reactjs.org 的 tutorial）或完整的入门课程（如 Egghead 的 The Beginner's Guide to React）。这是整个路线图唯一的"必经主节点"——在学习任何工具链之前，先建立对 React 组件模型本身的正确认知。

阶段 4：熟悉开发工具（Herramientas）

在源码 XML 中，这一层细分为三条：

• 包管理器（Package Managers）：npm 为黄色（必知）、Yarn 为橙色（建议）、pnpm 为灰色（可选）；
• 任务运行器（Task Runners）：npm scripts 为黄色（必知）、gulp 为灰色（可选）；
• 构建工具（Build Tools）：Webpack 为黄色（必知）、Rollup 与 Parcel 为灰色（可选）。

这个配色非常典型地体现了路线图的取舍哲学：每个类别只保留一个"必知"选项（npm scripts + Webpack 基本覆盖了 2019 年主流 React 工程化需求），其余作为能力延伸。

阶段 5：样式方案（Estilo）

样式是 React 生态中最百花齐放、也最容易被"追新"带偏的领域，原文分四层：

1. CSS 预处理器：Sass/SCSS 与 PostCSS 为黄色（必知），Less 与 Stylus 为灰色（可选）；
2. CSS 框架：Bootstrap、Materialize、Material UI、Material Design Lite 为橙色（建议），Bulma、Semantic UI 为灰色（可选）；
3. CSS 架构方法论：BEM、CSS Modules、Atomic、OOCSS、SMACSS、SUITCSS——这一层在 XML 中为橙色或灰色节点，强调命名与组织层面的工程化；
4. CSS-in-JS：Styled Components、Radium、Emotion、JSS、Aphrodite。

阶段 6：状态管理（Manejo del estado）

这是 React 应用复杂度的分水岭，原文结构最为详尽：

• 基础层：React 组件状态（Component State）与 Context API——必知；
• Redux（必知，黄色节点），其生态按四类展开：
  • 异步副作用（Acciones asincrónicas）：Redux Thunk、Redux Better Promise、Redux Saga、Redux Observable（均为橙色"建议"档）；
  • 辅助库（Helpers）：Rematch、Reselect（橙色）；
  • 数据持久化（Persistencia de datos）：Redux Persist、Redux Phoenix（灰色"可选"档）；
  • Redux Form（橙色）；
• MobX（橙色"建议"档）：与 Redux 并列的另一种响应式状态管理范式。

从源码看，Redux 是这一章节唯一的黄色"必知"节点，其余全部为建议或可选，这与"先吃透一种范式、再横向比较"的学习逻辑一致。

阶段 7：类型检查器（Comprobadores de tipos）

• PropTypes：React 官方内置的运行时类型检查；
• TypeScript：静态类型检查的工程化主流方案；
• Flow：Facebook 出品的静态类型检查器。

三者在 XML 中分别对应 PropTypes（必知档）、TypeScript（橙色"建议"档）与 Flow（同档），说明 2019 年语境下 PropTypes 是入门底线，TypeScript 是进阶方向。

阶段 8：表单助手（Helpers de formularios）

• Redux Form（与状态管理章节的 Redux Form 为同一工具，说明它承担"状态联动"与"表单"双重职责）；
• Formik；
• Formsy；
• Final Form。

阶段 9：路由（Enrutamiento）

• React-Router：社区事实标准；
• Router5；
• Redux-First Router：将路由状态纳入 Redux 的激进方案（灰色"可选"档）；
• Reach Router。

阶段 10：API 客户端（Consumo de API）

• REST 体系：浏览器原生 Fetch、SuperAgent、axios；
• GraphQL 体系：Apollo、Relay、urql。

这一章的深层含义是：先掌握 REST 的请求-响应模型（Fetch / axios 二选一即可覆盖绝大多数场景），再理解 GraphQL 的声明式数据获取范式（Apollo 是 2019 年最主流的选择），二者对应两种不同的前后端协作哲学。

阶段 11：实用工具库（Librerías útiles）

Lodash（函数式工具）、Moment（日期处理）、classnames（条件类名拼接）、Numeral（数字格式化）、RxJS（响应式编程）、ImmutableJS（不可变数据结构）、Ramda（函数式编程）。这些库解决的是"日常搬砖"中的高频痛点，按需取用即可。

阶段 12：测试（Pruebas）

原文将测试分为三个层次，这是路线图中分层最清晰的技术域之一：

1. 单元测试：Jest、Enzyme、Sinon、Mocha、Chai、AVA、Tape；
2. 端到端（E2E）测试：Selenium、Webdriver、Cypress、Puppeteer、Cucumber.js、Nightwatch.js；
3. 集成测试：Karma。

在 XML 源码中，Testing 主节点为黄色（必知），说明测试能力被作者视为 React 开发者的硬性要求，而非可选项。

阶段 13：国际化（Internacionalización）

• React Intl（Yahoo 出品，基于 ECMA-402 标准的国际化方案）；
• React i18next。

对面向全球用户的产品而言，这是发布前的必经环节。值得一提的是，本仓库自身就是多语言协作的范例：它通过 translations 目录 维护了 6 种语言的翻译资源，README 也提供了 中文版、日文版、韩文版、葡语版、俄文版 等对照版本。

阶段 14：服务端渲染（Render del lado del servidor）

• Next.js：React SSR 与全栈框架的主流选择（橙色"建议"档）；
• After.js：基于 React Router 的 SSR 框架；
• Rogue。

SSR 解决的是首屏性能与 SEO 问题，XML 中将 Next.js 标为"建议"而非"必知"，意味着它属于按业务需求选择的工程能力。

阶段 15：静态站点生成器（Generador de sitio estático）

• Gatsby：以 React 构建静态站点的代表方案（橙色"建议"档）。适合文档站、博客、营销页等以内容为主的场景。

阶段 16：后端框架集成（Integración con Framework de Backend）

• React on Rails：将 React 与 Ruby on Rails 集成的方案。这一条目提示：React 并非孤岛，理解它如何嵌入不同后端体系（服务端模板渲染、同构应用）也是能力的一部分。

阶段 17：移动端（Móvil）

• React Native：用 React 语法构建原生移动应用（灰色"可选"档——注意它在 2019 年语境下被定位为"可能性"而非必备）；
• Cordova / Phonegap：WebView 包装型跨平台方案。

阶段 18：桌面端（Escritorio）

• Proton Native：用 React 语法构建原生桌面应用；
• Electron：以 Chromium 为内核的跨平台桌面方案；
• React Native Windows：将 RN 能力延伸到 Windows 平台。

阶段 19：虚拟现实（Realidad virtual）

• React 360：Facebook 推出的 React VR 开发框架。它位于路线图最末端的"可选"区，代表技术视野的延伸而非当前主流工作需求。

五、源码级透视：路线图是如何被"画"出来的

路线图本身并非静态图片，而是可编辑、可复现的工程产物。在 src 目录 中，每个语言版本都对应一份 Draw.io XML 工程文件（如西班牙语版为react-developer-roadmap-es.xml），其结构特征包括：

• 节点（mxCell vertex）：每个知识点都是一个带value文本、fillColor颜色和fontSize字号属性的矩形或文本节点——例如value="Redux"、fillColor="#FFFF66"对应"必知"档；
• 连线（mxCell edge）：主路径用实线curved=1箭头串联，知识注释用dashed=1虚线从节点引出，完整刻画了前文所述的路径拓扑；
• 图例节点：右上角三个图例块与各节点颜色一一对应，是整套优先级体系的"图例键"。

六、多语言路线图的翻译机制：es.json 与 translate.js

西班牙语路线图能与其他语言版本保持同步，得益于仓库内置的翻译管线。核心脚本 translations/translate.js 的工作原理是：

1. 读取英文源工程src/react-developer-roadmap.xml；
2. 读取目标语言翻译表（如 translations/es.json）；
3. 用正则将 XML 中所有value="英文原文"替换为value="西语译文"；
4. 输出为src/react-developer-roadmap-{lang}.xml。

运行方式为命令行传参：

node ./translate.js es

其中es即西班牙语的语言代码（可选cn、ja、ko、pt-br、ru）。翻译表本身采用 JSON 键值对结构，例如"React Developer in 2019": "Desarrollador React en 2019"、"Legends": "Legendas"、"Personal must know": "Debe saber"等，es.json 中完整覆盖了路线图 57 个可翻译词条。

这套机制的意义在于：路线图图片（PNG）与源工程（XML）分离维护，任何语言的内容更新都从 XML 出发，再导出 PNG 并同步更新对应语言 README 中的图片，从而保证图与文的双语一致性。

七、查看与修改路线图：从 PNG 回到 Draw.io

阅读时直接查看各语言 PNG 即可（如 roadmap-es.png）。若想修改路线图，官方流程如下：

1. 打开 Draw.io（即 diagrams.net）；
2. 点击Open Existing Diagram，选择 src 目录 下对应语言的 XML 工程文件（如react-developer-roadmap-es.xml）；
3. 在画布中编辑节点、连线或颜色；
4. 更新后导出为 PNG，替换对应 README 中的图片；
5. 提交 Pull Request。

仓库的协作方式还包括：以 Pull Request 提交改进、在 Issues 中讨论想法、向社区传播该路线图。需要说明的是，仓库为只读镜像，上述流程是面向仓库维护者的标准协作路径，普通读者通过阅读 README-ES.md 与图片即可完整获得学习价值。

八、许可证

仓库采用CC BY-NC-SA 4.0（知识共享-署名-非商业性使用-相同方式共享）协议，详见 LICENSE。这意味着你可以自由分享与改编本路线图，但需署名、不得用于商业用途，且衍生作品必须以相同协议共享。

结语：把路线图当作"地图"而非"打卡清单"

综合全文，React Developer Roadmap 西班牙语版（README-ES.md）的真正价值不在于"列全了所有库"，而在于它给出了一个带优先级、带路径依赖、带取舍逻辑的学习体系：黄色节点（必知）构成最小可行路径，橙色节点（建议）构成能力纵深，灰色节点（可选）构成视野扩展。配合 XML 源工程 中的颜色标注、翻译管线 的多语言同步机制以及 es.json 的本地化实践，你既能对照它规划自己的学习节奏，也能理解一个高质量技术路线图项目在内容组织与工程化维护上的完整思路。

• 教程
• 前端