在 React 项目中，有时我们需要处理 JSX 字符串并将其转换为真正的 React 元素，比如从 CMS 获取模板或构建可视化编辑器时。本文介绍三种实用方案及其优缺点。

1. react-jsx-parser：安全简单型

react-jsx-parser 是一个简单安全的方案，

现代 JavaScript 开发环境是一个完整的工具链生态，它让我们能够使用最新的语言特性、保证代码质量、进行自动化测试，并优化开发体验。

现代开发环境的核心组成

一个完整的 JavaScript 开发环境通常包含以下组件：

项目初始化是构建 JavaScript 开发环境的第一步，正确的初始化配置能为后续开发工作奠定坚实基础。

一、创建项目目录

1. 创建项目根目录

mkdir my-js-project
cd my-js-project

✅ 建议：使用小写字母、数字和连字符命名项目，具有描述性。

不是不想写 commit message，而是每次审阅代码+组织语言去准确描述比较难，耗费精力和时间。
让 Cursor AI 来辅助撰写，提高效率，也学习如何用 Commits 规范和英文去总结和表达。

可在 wrangler.toml 文件中直接配置开发环境变量。例如：

[env.development]
[env.development.vars]
ENVIRONMENT = "development"
GITHUB_CLIENT_ID = "your github client id" # 自定义环境变量示例

但密钥等敏感信息，建议放在独立的开发环境变量配置文件 .dev.vars 中，
并将其从 git 中排除（在.gitignore 文件中添加 .dev.vars 文件路径），
以防止密钥泄露。

如何将所有的 git commits 的描述导出到文本文件？

示例：git log --pretty=format:"%h %an %ad %s" --date=short > commits.txt

参数说明：

• --pretty=format: 指定输出格式，其中

  • %h 是提交的简短哈希
  • %s 是提交的摘要/标题（summary）
  • %b，提交的描述（body）
  • %n，换行符
  • %an 是提交的作者名字
  • %ad 提交日期

• --date=short 选项下会使用简短的日期格式
  默认的日期格式示例 Sun Oct 6 00:56:25 2024 +0800，简短的日期格式示例 2024-10-06

假设有目录 dirA，之前该目录已经有过 commit 记录，当我们修改文件结构，不再需要跟踪和记录 dirA 路径下的文件变化时，

1. 首先是将路径添加 .gitignore 文件中。（但此时 git 仍然会 tracking 文件变化）

还需要执行以下步骤来处理：

<script> 标签支持的属性有 type, crossorigin, integrity, async, defer，
以下是各属性的作用和示例：

type (可选)

指定外部文件中使用的脚本语言的内容类型（也称为 MIME 类型）。
通常情况下，可以使用默认值 “text/javascript”。使用案例如下：

使用 flex 布局，两端元素默认内容宽度，中间元素自动扩充到最大宽度。
|left| <- center -> |right|

HTML

<div class="h">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

<br />

<div class="v">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

CSS

div {
  border: 1px solid #ccc;
}

.h {
  /* 水平/横向 */
  display: flex;
  flex-direction: row;
}

.v {
  /* 垂直/纵向 */
  display: flex;
  flex-direction: column;
  height: 300px; /* 需要设置固定高度 */
}

.middle {
  flex: 1 1 auto; /* flex-grow | flex-shrink | flex-basis */
  align-items: center; /* 元素水平居中 */
  text-align: center; /* 文本水平居中 */
  align-content: center; /* 元素垂直居中 */
}
.left,
.right {
  /* nothing */
}

前置：注释、定界符等基本语法

HTML 变量

document-css
启用在 styles.html 部分中包含的大部分 CSS（可以使用命令 pandoc --print-default-data-file=templates/styles.html 查看）。除非你使用 --css，否则此变量默认设置为 true。你可以使用例如 pandoc -M document-css=false 来禁用它。