Question

我正在尝试构建一个基本的ReactJS app using this tutorial。

目前我有一个空白页面，当我输入MessageBox时，我的组件名称，我收到以下错误。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Playing with ReactJS">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Playing with ReactJS</title>
</head>
<body>

    <!-- container node -->
    <div id="app"></div>

    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var MessageBox = React.createClass({
            render: function() {
                return (
                    <h1>Hello, World</h1>
                );
            }  
        });

        React.renderComponent(
            <MessageBox/>,
            document.getElementById('app'),
            function () {
                console.log('after render');
            }
        )
    </script>

</body>
</html>

 /**
  * React v0.14.7
  */

Answer 1

浏览器不了解JSX。你需要以某种方式将它转换为JavaScript才能开始工作。你可以通过将代码移动到单独的.jsx文件并设置像Babel这样的工具来编译它，或者你可以使用JSXTransformer在浏览器中运行转换（JSX - ＆gt; JS）来实现。但是，JSXTransformer has been deprecated并且可能不支持最近添加的JSX语法（例如valueless attributes）。

Answer 2

{@ 1}}函数已被弃用。

您可以使用renderComponent代替ReactDOM.render()。

您的新文件应如下所示：

React.renderComponent()

此外 - 将该功能提取到单独的js文件中。

此处有一个good (up to date) tutorial。

我的基本ReactJS应用程序有什么问题？

2 个答案: