react.js 的纯 JavaScript 语法答案

【问题标题】：Pure JavaScript syntax for react.jsreact.js 的纯 JavaScript 语法
【发布时间】：2018-07-31 09:47:05
【问题描述】：

我正在尝试使用 React 为具有 Java 后端的应用程序制作前端。因此，我只是试图通过添加脚本将 React 合并到我的 JavaScript 和 html 中。我不一定想将 Babel 用于 JSX 语法，但是 React 的纯 JavaScript 语法让我很困惑，因为我对 React 还很陌生。

假设我有这样的事情：

const e = React.createElement;
return e(
        'button',
        {className: 'whiteButton', onClick: () => this.setState({
                            clicked: false})},
        'Click Me Again'    
    );

现在，如果我想在 div 等中添加这个按钮，我该怎么做？ React.createElement(components, props, ...children) 在语法方面如何工作？

我理解这个概念，只是语法让我很难过。

我们将不胜感激。

注意：由于我对 React 非常陌生，因此也非常感谢您提供指导。

【问题讨论】：

大概github.com/kay-is/react-from-zero可以帮到你。
问题缺少stackoverflow.com/help/mcve。什么是e？目前还不清楚问题是什么。您是在问如何用纯 JS 编写 JSX？对于初学者，您可以检查 Babel 输出。
@estus 我已经更新了 e 是什么。是的，我想用纯 JavaScript 编写 JSX。将查看 babel 输出。
我不认为你如何引导一个不使用 JSX 的应用程序有很大的不同。见docs/hello-world。例如，ReactDOM.render(React.createElement('h1', {}, 'Hello, World!'), document.getElementById('root')); 工作正常。

标签： javascript reactjs syntax

【解决方案1】：

ReactDOM.render(React.createElement(
    "div",
                            null,
                            React.createElement("e", null)
), document.getElementById('app'));

const e = React.createElement(
         "button",
          { className: "whiteButton", onclick: () => 
this.setState({clicked: false }) },
  "'Click Me Again'"
);

试试上面的代码。您也可以使用此工具将 jsx 转换为纯 js。 http://infoheap.com/online-react-jsx-to-javascript/

【讨论】：