前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载本文围绕仓库中的 manuscript/README.md 展开讲解 preguntas-entrevista-react 项目如何把一份README.md面试题库与public/quiz/qa/下的测验数据自动生成可供 Leanpub 出版平台直接使用的电子书手稿manuscript。读完本文你将掌握pnpm book生成命令的完整调用链、手稿文件与源文件的映射关系、确定性随机的测验出题机制、以及针对 Leanpub/Pygments 的 Markua 代码围栏改写规则并了解这套管线与网站内容生成public/content/*.json之间的分工。一、manuscript 目录是什么一份不要手改的生成产物manuscript/README.md 开篇就明确了目录的定位manuscript/下的所有文件都是自动生成的电子书手稿目录内写着一句硬性约束——No edites estos ficheros a mano不要手动编辑这些文件。任何对书籍内容的修改都必须回到源头文件进行再重新生成否则下次构建会被整体覆盖。以仓库当前实际内容看生成出的手稿共有 8 个文件00-antes-de-empezar.md—— 序言frontmatter对应 book/before.md01-principiante.md—— 初级章约 2865 行含全部初级问题与测验02-intermedio.md—— 中级章03-experto.md—— 高级章04-errores-tipicos.md—— React 典型错误章05-hasta-aqui.md—— 结语backmatter对应 book/after.mdBook.txt—— Leanpub 的章节装配清单README.md—— 本文所讲的这份生成说明文档本身也是脚本产物这种源文件 生成脚本 产物目录的结构保证了书籍内容与网站内容后面会讲可以同源维护不会出现两处内容漂移。二、生成命令与调用链pnpm book 做了什么在 package.json 的 scripts 中可以找到命令入口scripts: { markdown:lint: node scripts/lint.mjs, content: node scripts/markdownToJson.mjs, book: node scripts/exportBook.mjs, dev: node scripts/markdownToJson.mjs astro dev, build: node scripts/markdownToJson.mjs astro build, preview: astro preview, lint: oxlint }执行pnpm book实际上运行的是node scripts/exportBook.mjs。从 scripts/exportBook.mjs 顶部注释可以看到脚本职责解析根目录README.md按章节与问题拆解读取public/quiz/qa/下对应的 JSON 测验数据为每题生成Pon a prueba测验块把答案整理成每章末尾的 solucionario答案页写入manuscript/目录并生成Book.txt。注意与网站构建的区别dev和build运行的是 scripts/markdownToJson.mjs负责把 README 切分成public/content/*.json供网页渲染而书籍输出走的是独立的exportBook.mjs两者读同一份README.md源但产出完全不同——这正是同源多端设计。三、内容来源与文件映射四个源头如何拼成一本电子书manuscript/README.md 给出了官方的源文件清单book/before.md→ frontmatterAntes de empezar 序言book/after.md→ backmatterHasta aquí 结语README.md→ 全部问题与解答正文public/quiz/qa/*.json→ Pon a prueba 测验块 solucionario在 scripts/exportBook.mjs 中章节的层级结构由LEVELS常量硬编码定义const LEVELS [ { key: principiante, heading: Principiante, file: 01-principiante.md }, { key: intermedio, heading: Intermedio, file: 02-intermedio.md }, { key: experto, heading: Experto, file: 03-experto.md }, { key: errores típicos en react, heading: Errores típicos en React, file: 04-errores-tipicos.md, }, ]脚本通过 parseReadme 对根 README.md 做结构化解析以###开头的行视为章节标题其文本转小写与LEVELS的key匹配以####开头的行视为单条问题问题标题同时会被sindresorhus/slugify转成 slug例如 ¿Qué es React? 变成que-es-react每个问题的正文会清理掉导航链接**⬆ Volver a índice**和末尾的---分隔线并把连续空行压缩。章节找不到对应内容时脚本会输出⚠ Capítulo sin contenido警告并跳过见 scripts/exportBook.mjs避免生成空章节。在写入每个章节前脚本还会检查book/before.md与book/after.md是否存在缺失时直接抛出Falta el capítulo de introducción/cierre错误并终止构建scripts/exportBook.mjs从源码层面保证了序言与结语是手稿的强制组成部分。四、章节骨架与生成后的手稿结构每一章生成时脚本先写入章节标题和引导语scripts/exportBook.mjs)# Principiante Preguntas de nivel **Principiante**. Tras cada explicación puedes encontrar un bloque *Pon a prueba*; las respuestas están al final del capítulo.然后对每道题调用buildQuestionMarkdownscripts/exportBook.mjs按固定模板组装## 问题标题问题正文Markdown经过围栏改写##### Pon a prueba测验块章节之间用---做软分隔刻意不用硬分页因为书很长实际产物可在 manuscript/01-principiante.md 中查看例如## ¿Qué es React? **React es una biblioteca de JavaScript de código abierto para construir interfaces de usuario.** ... ##### Pon a prueba *Responde sin mirar el solucionario del final del capítulo. Marca una sola opción.* **1.** ¿Qué es React? - **a)** React es un lenguaje de marcado como HTML. - **b)** React es un servidor web. - **c)** React es una biblioteca de JavaScript para construir interfaces de usuario. - **d)** React es un framework para construir aplicaciones web.每个章节的末尾由formatChapterSolutions生成## Solucionario答案区并插入{pagebreak}分页符scripts/exportBook.mjs保证读者在章节尾部才看到答案不会被剧透。五、Pon a prueba测验块的生成机制1 个正确 3 个干扰项这是手稿中最有工程含量的部分。Quiz 的原始数据存放在 public/quiz/qa/ 下每个问题一个 JSON 文件。以 public/quiz/qa/que-es-react.json 为例原始选项远多于 4 个且带有is_correct标记。脚本通过loadQuiz(slug)scripts/exportBook.mjs按问题 slug 查找对应 JSON再经prepareBookQuestionscripts/exportBook.mjs加工成恰好 4 个选项const OPTIONS_PER_QUESTION 4 // 1 correct 3 distractors筛选逻辑是取出is_correct为 true 的选项作为正确答案再从干扰项中随机挑选 3 个最终把 4 项打乱。关键点在于**确定性随机**——不是每次构建都变hashString用 FNV-1a 算法把问题 ID 哈希成一个种子scripts/exportBook.mjsmulberry32用该种子生成伪随机数序列scripts/exportBook.mjsseededShuffle用该序列做 Fisher-Yates 洗牌scripts/exportBook.mjs。脚本注释对此有明确说明stable builds, not always answer a——同样的源数据每次构建都会得到完全相同的题目排列与答案字母PDF 在线阅读与打印版行为一致同时避免正确答案永远停留在 a 选项的尴尬。这是从源码结构可以确认的设计意图。若某个问题在 quiz 目录下没有对应 JSON或 JSON 为空数组/缺alternatives脚本会静默跳过该题的测验块返回null只保留正文。六、Markua 代码围栏改写让 Leanpub/Pygments 正确高亮 JSXmanuscript/README.md 专门强调了一个 PDF 排版细节Leanpub 使用 Pygments 做语法高亮但很多 Leanpub 构建版本没有内置 JSX lexer如果代码围栏写成jsx或tsxPDF 会以纯等宽文本输出、完全没有颜色。因此exportBook.mjs在把问题正文写入手稿前会先经过normalizeCodeFencesForLeanpubscripts/exportBook.mjs做全局正则改写映射表LEANPUB_LANG_MAPscripts/exportBook.mjs定义如下源围栏语言改写为jsxjavascripttsxtypescriptjs/mjs/cjs/reactjavascripttstypescriptshell/sh/zsh/consolebashtext/plain/txttext其他未知语言原样保留改写时只处理语言 ID 部分像jsx title...这种带附加信息的 info 串会保留title...部分scripts/exportBook.mjs避免破坏 Markua 的其他围栏特性。源码注释也坦承了这一权衡javascriptlexer 对/div这类 JSX 闭合标签着色并不完美但总比完全没有高亮要好得多。换言之为了在 Leanpub 的 Pygments 环境下获得可用的高亮选择了牺牲少量 JSX 精确度。如果你在 Generation Settings 中发现 PDF 代码没有颜色优先检查两点围栏是否已被改写成javascript/typescript以及语法高亮开关是否已打开。七、Book.txtLeanpub 的章节装配清单Leanpub 依靠手稿目录下的Book.txt决定章节顺序与主/辅内容分区。脚本构建时动态生成它scripts/exportBook.mjsfrontmatter: 00-antes-de-empezar.md mainmatter: 01-principiante.md 02-intermedio.md 03-experto.md 04-errores-tipicos.md backmatter: 05-hasta-aqui.md这就是仓库中 manuscript/Book.txt 的实际内容frontmatter序言、mainmatter四个章节、backmatter结语三个分区各就各位。上传到 Leanpub 后平台会严格按此顺序组装书稿。八、上传 Leanpub 与生成设置manuscript/README.md 给出的最后一步是把manuscript/文件夹上传到 Leanpub或根据你自己的流程用 Dropbox/Git 同步并建议在Generation Settings 中确认 syntax highlighting 处于开启状态——这与第六节讲的 Pygments 围栏改写是配套动作围栏语言对了 高亮开关开了PDF 才有彩色代码。需要提醒的实践要点因为manuscript/是纯生成产物上传前务必先执行pnpm book重新生成保证与最新源内容一致若用 Git 同步方式发布把manuscript/与book/、README.md、public/quiz/qa/一起纳入版本管理便于追溯每次电子书构建对应的源状态脚本每次运行会先emptyDir(OUT_DIR)清空手稿目录scripts/exportBook.mjs所以任何对手稿的手动修改都会在下次构建时被删除这是不要手改约束的强制保障。九、与网站内容管线的分工一份源两种产物虽然本文主题是书籍手稿但理解它与网站生成的边界有助于正确使用本仓库。网站侧的 scripts/markdownToJson.mjs 做的是读取根 README.md用 Prism 做代码高亮代码块正则匹配 动态加载prismjs/components/prism-lang.js找不到的语言降级为txt见 scripts/markdownToJson.mjs按###/####切分把每道题输出为一个public/content/slug.json含id、level、title、content并汇总index.json与counter.json级别映射关系principiante→EASY、intermedio→MEDIUM、experto→HARD、errores típicos en react→ERRORSscripts/markdownToJson.mjs。对比可见书籍管线exportBook.mjs面向 Leanpub 静态排版聚合 quiz 数据生成测验与答案页做 Pygments 围栏改写网站管线markdownToJson.mjs面向浏览器交互用 Prism 高亮并切分出逐题的 JSON 数据供 src/pages/questions.astro 等页面渲染。两者共享同一份 README.md 与 public/quiz/qa/ 数据源因此改一次源、书籍与网站同步更新。唯一的区别是网站不会用到book/before.md与book/after.md脚本注释明确标注它们是 Exclusive book chapters (not used on the website)见 scripts/exportBook.mjs。十、贡献内容时应改哪里如果你发现某道题答案有误或想新增面试题正确操作是改根目录 README.md题目正文与 public/quiz/qa/ 下对应 slug 的 JSON测验选项然后本地运行pnpm book验证手稿生成无误再提交改动。手稿文件本身不应进入改动范围——正如 scripts/lint.mjs 只对README.md做 markdownlint 校验所示源文件才是仓库内容的唯一真源。这套管线将内容维护与出版输出彻底解耦面试题库以纯 Markdown 单文件形式维护工程上却同时驱动了 Leanpub 电子书、交互式测验与静态网站三种消费形态是内容型开源项目值得参考的同源多端构建范式。赞分享前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载相关推荐5步构建企业级数据表格应用shadcn-table深度解析与实战指南5步构建企业级数据表格应用shadcn table深度解析与实战指南 在当今数据驱动的应用开发中功能强大、性能卓越的数据表格组件已成为现代Web应用的核心需前端教程Preguntas de entrevista para React从零到专家的React面试题详解Preguntas de entrevista para React从零到专家的React面试题详解 React作为当前最流行的前端框架之一已成为前端开发者前端教程React面试题深度剖析Preguntas de entrevista para React原理与实践React面试题深度剖析Preguntas de entrevista para React原理与实践 React作为前端开发领域的主流框架其面试题往往涉及前端教程上一篇DeepMind Lab神话世界探索激发AI想象力的训练平台下一篇archinstall内核清理删除旧内核与模块文件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考