【问题标题】：ReactJS:cannot display html text on browserReactJS：无法在浏览器上显示 html 文本
【发布时间】：2017-12-23 02:24:26
【问题描述】：

我似乎不知道该怎么做才能纠正这个问题：

我总是在浏览器上没有显示，我希望看到“Hello React”。

这里是 HelloWorld 代码：

ReactDOM.render(

你好，React！

,document.getElementById('root'));

【问题讨论】：

React 会自动转换 JSX 吗？我认为你应该使用babel，typescript....。
我认为您错过了 HTML 中的起始 <body> 标记。并且脚本标签应该放在结束</body>标签之前。
是的，在 SO 上格式化时代码搞砸了。当我稍后看到您的评论时尝试对其进行编辑时，情况变得更糟。现在它甚至在 SO 中打印出结果，并且遗漏了代码。

标签： javascript reactjs

【解决方案1】：

在此处查看您的示例，https://codesandbox.io/s/ElRmqWK5Y 我会建议下载 react 包并在开始时在那里运行你的代码，我对你的代码的看法是你应该先添加 react 库而不是 react-dom。

【讨论】：

+Abhishek，请问我为什么要先下载 react 包？

【解决方案2】：

您的代码中缺少

，尝试添加它并告诉我们它是否有效

【讨论】：

【解决方案3】：

所以基本上问题是你没有编译你的 jsx。对于您的简单示例，如果您不想使用某些捆绑程序“显式”配置转换，您可以添加 Babel 库并更改

<script type="text/jsx">

到

<script type="text/babel">

让我们看看这里，但请记住jsfiddle在后面使用babel（非常确定）：

https://jsfiddle.net/69z2wepo/83023/

还让我粘贴来自 babel 文档的示例。特别是看看添加的 babel lib + 脚本类型。

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
  const getMessage = () => "Hello World";
  document.getElementById('output').innerHTML = getMessage();
</script>

【讨论】：

【解决方案4】：

您可以使用以下代码库来了解 React JS 的基本知识（已使用最新版本 react-15.0.0） -

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First React Example</title>
   <!-- use this as script file "fb.me/react-15.0.0.js"
    "fb.me/react-dom-15.0.0.js"
    cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js" -->
</head>

<body>
    <div id="greeting-div"></div>
    <script type="text/babel">
        var Greeting = React.createClass({ 
            
    render: function() { 
        return ( <div>{this.props.children} </div>) 
    } 
        }); 
        
ReactDOM.render(
 <div>
        <Greeting>hello Aby</Greeting>
         <h1>HELLO</h1>
        </div>,
    document.getElementById('greeting-div') );
    </script>
</body>

</html>

【讨论】：