在浏览器JSX转型在Chrome

我试图跟随掌握阵营的书，有一个样本，其代码如下在浏览器JSX转型在Chrome

<!DOCTYPE html> 
<html> 

<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Hello React</title> 
    <script src="https://<fb shortened url>/react-with-addons-0.14.0.js"></script> 
    <script src="https://<fb shortened url>/react-dom-0.14.0.js"></script> 
    <script src="http://<fb shortened url>/JSXTransformer-0.13.1.js"></script> 
</head> 

<body> 
    <div id="view" /> 
    <script> 
     var HelloReact = React.createClass({ 
      render: function() { 
       return <h1 > Hello React < /h1> 
      } 
     }); 

     ReactDOM.render(< HelloReact/> , document.body); 
    </script> 
</body> 

</html>

以上但似乎并没有工作。我没有在文档正文中获得HelloReact。

对于React（以及JSX转换等）来说，它是全新的。任何帮助将不胜感激。

我在Chrome中得到的错误是

Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing an element string, make sure to instantiate it by passing it to React.createElement.

注：fb shortened url是fb.me，＃2在抱怨使用缩短服务的，

来源

2016-04-21 Sathyakumar Seshachalam

我不能相信的编辑抱怨在代码中使用fb.me'的'块。 –

正如许多人已经注意到，作出反应和应对本土已经都转换了各自的构建系统以利用Babel。这取代了JSTransform，我们在 Facebook上编写的源代码转换工具。

https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

使用巴贝尔的JSX语法转换成JS在你的文件中使用JS

来源

2016-04-21 15:54:52

此外，Babel的最新版本中[Babel在浏览器中已被弃用并且已被删除]（https://babeljs.io/docs/usage/browser/），因此您将真正想要使用构建过程Gulp或Webpack。查看[Babel设置页面]（https://babeljs.io/docs/setup/）以了解更多信息。 – Aaron

我没有使用旧版本的React：0.14。如果JSXTransformer在浏览器中不起作用？如果这个问题很愚蠢，我是一个新手，对我很感兴趣。我希望书中的例子能够保持原样。 –

在浏览器JSX转型在Chrome

回答

相关问题