我的基本ReactJS應用程序有什么問題？

Question

當前，我有一個空白頁，當我鍵入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-> JS）。 但是，不推薦使用JSXTransformer ，它可能不支持JSX語法的最新添加（例如，無值屬性）。

Answer 2

renderComponent函數已被棄用。

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

您的新文件應如下所示：

<!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>
                );
            }  
        });

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

</body>
</html>

另外-將函數提取到單獨的js文件中。

這是一個很好的（最新的）教程。

我的基本ReactJS應用程序有什么問題？

問題描述

2 個解決方案

解決方案1
3 2016-02-07 01:15:22

解決方案2
1 已采納 2016-02-07 01:08:30

我的基本ReactJS應用程序有什么問題？

問題描述

2 個解決方案

解決方案1 3 2016-02-07 01:15:22

解決方案2 1 已采納 2016-02-07 01:08:30

解決方案1
3 2016-02-07 01:15:22

解決方案2
1 已采納 2016-02-07 01:08:30