Hello，React！

Question

我似乎无法弄清楚我将如何纠正这个问题：

我总是在浏览器上没有显示，我希望看到＆＃34; Hello React＆＃34;。

这是HelloWorld代码：

ReactDOM.render（

Hello，React！

，document.getElementById（＆＃39; root＆＃39;））;

Answer 1

您可以使用以下代码库来了解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>

Answer 2

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

Answer 3

缺少＆lt;身体＆gt;在你的代码中，尝试添加它并告诉我们它是否有效

Answer 4

所以基本上问题是你不能改变你的jsx。对于您的简单示例，如果您不想明确配置转换，您可以执行哪些操作？＆＃39;使用一些捆绑器，您可以添加Babel库并更改

<script type="text/jsx">

到

<script type="text/babel">

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

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

另外，让我从babel docs粘贴示例。特别是看看添加的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>

ReactJS：无法在浏览器上显示html文本

Hello，React！

4 个答案: