ReactJS 渲染问题答案

【问题标题】：ReactJS rendering issueReactJS 渲染问题
【发布时间】：2016-12-02 06:33:13
【问题描述】：

刚开始学习 React，这是我非常简单的 JSX 和 HTML 文件。当我从我的 http 服务器运行控制台 (Chrome) 时，我没有看到任何错误。但是，我希望看到的按钮不会显示在浏览器中。我不确定为什么它没有以及缺少什么。

有人可以帮忙吗？还有为什么我们要在标签中指定 type=text/babel"？如果我不这样做，我会在控制台中收到错误（意外语法

谢谢！前言

HTML 代码：

<html>
<head>  
<title>
    !My first React JS Component!
</title>
</head>

<body>
   <div id="root"></div>
    <script src="react.js"></script>
    <script src="script.jsx" type="text/babel"></script>
</body>

</html>

我的 JSX 文件：

 var Button = React.createClass({
    render: function () {
        return (
              <button> Go! </button>
        )
    }
});

ReactDOM.render(<Button />, document.getElementById("root"));

【问题讨论】：

你如何翻译这个？你能分享你的 webpack.config 吗？（如果这就是你正在使用的）
@NicklasWinger 很抱歉在这里变得愚蠢。我什至不知道 webpack.config 是什么。我将阅读您在下面提供的链接，看看是否可以修复它。谢谢指点
看看我的回答中的链接。官方文档应该很容易理解:)

标签： reactjs

【解决方案1】：

您不能像那样在您的网站中包含 jsx - 它不会起作用 :)

您需要通过Webpack 之类的工具转译您的 jsx。官方的documentation 真的很不错，通俗易懂，应该解释一下如何搭建一个基本的环境。

此外，有很多关于这方面的教程，但我在 youtube 上发现了一个免费且易于理解的教程：

React + Redux + Webpack（初学者可以跳过 redux 部分 - 实际上只是 React 中用于管理状态的流行插件，您可以稍后扩展）

为了更好的衡量，这样的事情应该可以工作：

<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

App.jsx：

ReactDOM.render(
  <h1>Hello React!</h1>,
  document.getElementById('app')
);

【讨论】：