Question

我在ReactJS中编写了一个简单的hello world代码，但是当我运行代码时，浏览器什么也没显示。控制台上没有显示任何错误。请告诉我们可能出现什么问题。我使用的是WebStrom编译器，Chrome是浏览器，Windows 8.1是操作系统。

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First React App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.jsx" type="text/babel"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

的script.js

var MyComponent = React.createClass({
    render :function() {
        return(
            <h2>Heading 2</h2>
        );
    }
});

React.render(
    <MyComponent/>, document.getElementById('content')
);

项目目录

浏览器显示

Answer 1

可能您的script.js应为script.jsx？

这是你遇到的一个问题。尝试用官方的babel包替换JSXTransformer：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

浏览器不显示/执行ReactJS代码

1 个答案: