尝试在浏览器中使用 React v0.14.3

Question

我是从 React 官方教程开始的，但是当我尝试运行第一个示例时，它没有渲染或任何东西。

我正在运行使用 Apache (Xampp htdocs)。它不显示任何内容，甚至是错误。

这个问题应该是重复的，但我找不到。另外，我想我找不到任何其他使用 v0.14.3 的教程，因为那些教程仍然导入 JSXTransformer.js。我可能是错的。

到目前为止这是我的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="../bower_components/react/react.js"></script>
    <script src="../bower_components/react/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
    var CommentList = React.createClass({
        render: function() {
            return (
                    <div className="commentList">
                    Hello, world! I am a CommentList.
            </div>
            );
        }
    });

    var CommentForm = React.createClass({
        render: function() {
            return (
                    <div className="commentForm">
                    Hello, world! I am a CommentForm.
            </div>
            );
        }
    });

    var CommentBox = React.createClass({
        render: function() {
            return (
                    <div className="commentBox">
                    <h1>Comments</h1>
                    <CommentList />
                    <CommentForm />
                    </div>
            );
        }
    });

    ReactDOM.render(
    <CommentBox />,
            document.getElementById('content')
    );
</script>
</body>
</html>

Answer 1

当您使用脚本类型 text/babel 时，您应该将 babel 添加到您的应用中，例如您可以从 public cdn 中添加它（将其添加到 react-dom.js), 像这样

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

但是最好使用 webpack or browserify

这样的工具

尝试在浏览器中使用 React v0.14.3

Trying to work with React v0.14.3 in the browser

javascript

reactjs

react-jsx