Question

我目前正在使用的代码，它是一个简单的hello world代码。

<!DOCTYPE html>
<html>
<head>
    <!-- The core React library -->
    <script src="http://localhost/react/react.js"></script>
    <!-- The ReactDOM Library -->
    <script src="http://localhost/react/react-dom.js"></script>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <div id="content"></div>
    <script type="text/jsx">
        var NewComponent = React.createClass({
            render : function(){
                return (
                    <h2>My Name is React</h2>
                );
            }

        });
        React.render(<NewComponent/>,document.getElementById('content'));
    </script>
</body>
</html>

当我运行代码时出现空白屏幕，控制台中没有错误。

Answer 1

使用这些引用代替使用localhost引用，它将起作用：

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

检查此Hello World示例：https://jsfiddle.net/reactjs/69z2wepo/

Answer 2

在代码中进行两处更改

首先：弃用react v0.13 React.render后，您需要使用ReactDOM.render

第二：当您指定脚本源时，应该相对于包含您的代码的index.html文件给出它们。

<!DOCTYPE html>
<html>
<head>
    <!-- The core React library -->
    <script src="./relative/path/to/react/react.js"></script>
    <!-- The ReactDOM Library -->
    <script src="./relative/path/to/react/react-dom.js"></script>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <div id="content"></div>
    <script type="text/jsx">
        var NewComponent = React.createClass({
            render : function(){
                return (
                    <h2>My Name is React</h2>
                );
            }

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

运行代码时reactjs空白屏幕

2 个答案: