Javascript 无法呈现简单的ReactDOM div_Javascript_Html_Reactjs

Javascript 无法呈现简单的ReactDOM div

javascript html reactjs

Javascript 无法呈现简单的ReactDOM div,javascript,html,reactjs,Javascript,Html,Reactjs,我是个新手。我试图用ReactDOM渲染一个简单的div，但是没有做到。这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello React</title> </head> <body> <div id="root"> </div> &l

我是个新手。我试图用ReactDOM渲染一个简单的div，但是没有做到。这是我的密码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script>
      ReactDOM.render(
        <h1>Hello, world!</h1>,
          document.getElementById('root')
      );
    </script>
  </body>
</html>


你好，反应
ReactDOM.render(
你好，世界！，
document.getElementById（'root'））
);

有人能告诉我为什么会这样吗

注意-我正在使用React 15.4.2和Chrome版本57。

您正在尝试在没有任何transpiler（巴贝尔等）的情况下使用JSX

请尝试以下方法：

ReactDOM.render(
        React.createElement('hi', 'Hello, world!'),
          document.getElementById('root')
      );

或者添加一个脚本并

键入来处理JSX。
您需要将transpiler babel添加到您的项目中。您可以根据自己的需要调整我下面的示例


你好，世界
render（Hello，world！，document.getElementById（'root'）；
错误消息是什么？可能，没有babel就不能使用JSX。非常确定您需要为内联React…
指定脚本类型，并且需要像babel一样进行传输。你在学习一些具体的教程吗？网上有很多，只有谷歌可以帮他们。此外，当您发布时，最好让我们知道您遇到了什么错误以及您尝试了什么。这页上什么都没有吗？控制台中是否有任何错误？等等@Jayce444我得到了Uncaught-SyntaxError:Unexpected-token如果你是新手反应，你最好使用它-它处理这种开箱即用的事情。我正在使用[创建react应用程序|学习ReactJS，但我必须在现有的应用程序中使用ReactJS，我无法对其进行结构化。感谢@Enogwector，它成功了！但是我如何替换浏览器中的Babel transformer，以便我可以预编译脚本？浏览器不理解JSX，如果你想预编译项目脚本，请说从es6转换对于es5，加上浏览器兼容的JSX，而不需要浏览器中的babel，您可以使用nodeJs在npm上签出babel包（参见github.com/andela venogwe/docman上使用此功能的github项目示例）或者查看此链接以将jsx react代码转换为浏览器可读的格式。我在以前的回答中添加了另一个示例，该示例不使用babel，而是使用先前ReactDOM.render实现的转换后的浏览器兼容版本。