大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
什么是 JSX-EmailJSX-Email 是 React-email 的一个分支！React-email包含一系列高质量、无样式的组件，用于使用 React 和 TypeScript 创建精美的电子邮件。减少了通过暗模式支持编写响应式电子邮件的痛苦，同时解决了 Gmail、Outlook 和其他电子邮件客户端之间的不一致问题。
JSX-Email 提供了一组 React 组件和工具函数，用于构建令人愉快且响应迅速的电子邮件模板，与现代电子邮件客户端兼容。
这些组件可以处理繁重的兼容性和客户端不一致问题，因此设计人员和开发人员可以专注于构建有影响力和吸引力的模板。该项目的目标是更加注重开发人员体验、维护、快速改进和快速发布。 因此，jsx-email 比 React-email 有许多改进和优势。 其中包括：
电子邮件客户端兼容性检查Tailwind 支持支持组件内的 <Suspense> 和异步Exclusive Components增强的开发人员体验 (DX)更好的命令行工具与 Monorepos 开箱即用, 无需详尽的设置。更简单、更流畅的预览服务器更快的改进、功能开发和发布社区驱动的维护而不是公司规划优先工具没有供应商锁定, jsx-email 仅使用通用组件和工具使用 JSX-Email 构建和渲染的电子邮件可以与任何提供用于以字符串形式发送电子邮件的 API 的电子邮件提供商一起使用，包括： AWS SES、Loops、Nodemailer、Postmark、Resend、Plunk 和 SendGrid 等等。
目前，JSX-Email 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。
如何使用 JSX-Email首先需要安装相应依赖：
npm add jsx-emailyarn add jsx-emailpnpm add jsx-emailbun add jsx-email接着可以在项目中导入组件库：
import {render} from 'jsx-email';import {BatmanTemplate} from './emails/Batman';const html = await render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);可用的配置包括：
export interface Options { minify?: boolean; // 压缩渲染模板的 HTML，如果为 true 或一个对象，则将目标电子邮件渲染为纯文本 // 如果需要修改目标渲染为纯文本的方式，则应使用表示 html 到文本选项的对象 plainText?: boolean | PlainTextOptions; pretty?: boolean; // 美化每封目标电子邮件的 HTML 输出 strip?: boolean; // 从每个目标电子邮件的输出中去除 data-id 属性}下面是一个 JSX 电子邮件组件，设置锚元素的样式以显示为按钮：
import {Button} from 'jsx-email';const Email = () => { return ( <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px'}}> Click me </Button> );};下面是一个 JSX 电子邮件组件，为配色方案支持提供元和样式基础：
import {Body, ColorScheme, Head, Html} from 'jsx-email';const Email = () => { return ( <Html> <Head> <ColorScheme mode="light only" /> </Head> <Body></Body> </Html> );};此时将输出如下的 HTML：
<html> <head> <meta name="color-scheme" content="light only" /> <meta name="supported-color-schemes" content="light only" /> <style> :root { color-scheme: light only; supported-color-schemes: light only; } </style> </head> <body></body></html>下面示例是一个 JSX 电子邮件组件，可以使用 Tailwind 风格 CSS 来设置电子邮件样式：
import { Button, Tailwind } from 'jsx-email';const Email = () => { return ( <Tailwind config={{ theme: { extend: { colors: { brand: '#007291' } } } }} > <Button href="https://example.com" Name="bg-brand px-3 py-2 font-medium leading-4 text-white" > Click me </Button> </Tailwind> );};当然，更强的是用户还可以使用markdown语法：
import { Html, Markdown } from 'jsx-email';const Email = () => { return ( <Html lang="en" dir="ltr"> <Markdown markdownCustomStyles={{ h1: { color: 'red' }, h2: { color: 'blue' }, codeInline: { background: 'grey' } }} markdownContainerStyles={{ padding: '12px', border: 'solid 1px black' }} >{`# Hello, World!`}</Markdown> {/* OR */} <Markdown children={`# This is a ~~strikethrough~~`} /> </Html> );};本文总结本文主要和大家介绍 JSX-Email ，其提供了一组 React 组件和工具函数，用于构建令人愉快且响应迅速的电子邮件模板，与现代电子邮件客户端兼容。因为篇幅问题，关于 JSX-Email 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。
参考资料https://github.com/shellscape/jsx-email
https://github.com/resend/react-email
https://www.youtube.com/watch?app=desktop&v=I4DKr1JLC50
https://react.email/
https://jsx.email/docs/components/markdown
