Question

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

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

谢谢！ PREM

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"));

Answer 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')
);

ReactJS渲染问题

1 个答案: