Question

我最近开始学习Reactjs。我写了这段简单的代码，只显示一个空白页面。没有错误，但我看到的只是一个空白页...任何人都可以告诉我我做错了什么？我的IDE是Visual Studio。

这是我的代码......

<html>
<head>
    <title>Untitled Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script>

</head>
<body>
    <div id="results"></div>
    <script type="text/jsx">
        var hello = React.createClass({
        render : function(){
        return
        <h1>this.props.text</h1>;
        }
        });
        React.render(
        <div>
            <hello text="Hello Rotls">is hekii 1</hello>
            <hello text="Hello Rotls">is hekii 2</hello>
            <hello text="Hello Rotls">is hekii 3</hello>
        </div>
        ,document.getElementById('results'));
    </script>
</body>
</html>

Answer 1

您需要链接JSX转换器脚本以动态解析您的jsx内容。没有它，浏览器将无法理解<script type="text/jsx">内部的内容，只会忽略它。

为了使您的示例正常工作，您应该在ReactJS脚本

之后添加此脚本

<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

检查jsbin https://jsbin.com/sicivomigo/edit?html,console,output

虽然测试项目没问题，但在生产中你应该将jsx编译成js以避免运行时编译jsx并加速你的app。

现在，React已经不再使用运行时JSX转换，并建议使用Webpack或Browserify以及反应扩展来将jsx编译为js以及捆绑和缩小。

这里有关于如何使用Webpack和Babel https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

设置React的好文章

Starter反应显示空白页面的示例

1 个答案: