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，例如可以将其添加到公开cdn（在react-dom.js之后添加），像这样

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

但更好地使用webpack或browserify 等工具

尝试在浏览器

1 个答案: