我已经习惯了使用 slim 和 jam，最近我开始使用 React 在前端编写应用程序，发现现在我又在我的组件中编写了臃肿的 HTML。我目前正在使用 Ruby on Rails 和 .jsx 文件和 babel 等，使用：
gem 'react-rails', '~> 1.4.0'
gem 'react-router-rails', '~>0.13.3.2'
但我也在使用带有 node 的 React 并使用 react-starterify 样板进行表达，这与 Node 的情况相同。
有什么东西可以让我开始使用像 slim 或 Jade 这样的语法在 React 中编写我的 html 吗？
【问题讨论】：
标签： reactjs pug slim-lang react-rails
要记住的一点是 JSX 不是 HTML——它只是看起来像。这很重要，因为 JSX 转译器（现在通常是 Babel）采用 JSX 语法并从中修改它：
<div className="container">
<p>Testing!</p>
</div>
到这样的事情：
React.createElement("div", { className: "container" },
React.createElement("p", null, "Testing!")
)
通过对React.createElement 调用进行抽象，您可以得到像r-dom 这样的项目，它做同样的事情，但语法更好：
r.div({className: 'container'}, [
r.p('Testing!'),
])
或react-hyperscript，它允许某些属性的替代语法：
h('div.container', [
h('p', 'Testing!')
])
然而，由于 JSX 变成了普通的 JS 调用，任何可以转换为 React.createElement 调用的语言或语法都可以很好地与 React 配合使用，只要您设置 Rails 资产管道，以便它正确地进行转译服务资产的一部分。
有一个项目使用 Jade 的语法 called react-jade 来实现这一点；有a few differences from regular Jade 和some unsupported features，但它可能会做你想做的事。在 Rails 项目中，您需要找到或创建一个预处理器，将适当的 Jade 代码转换为特定于 React 的 JS。
根据您问题中的评论，我还想提及另一件事：
现在我又在我的组件中编写臃肿的 HTML
如果您只是在谈论 HTML 的 语法，那没问题，但如果您发现 React 组件的 render 方法变得越来越大且难以管理，那么可能是一个好兆头，你需要break your component into smaller components (see "Tip 4: Embrace composition!" at this link)。
【讨论】：