为什么 React 代码'hello React'不起作用

我的简单反应组件不起作用

视频中的讲师具有确切的代码，但对我不起作用。我尝试了几种不同的组合，包括将代码放在单独的.js文件中并使用src属性进行链接，但似乎没有任何作用。

请帮助！

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js" 
        crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" 
        crossorigin></script>           
    </head>
    <body>
        <div id="container"></div>       
        <script type="text/jsx">  
            ReactDOM.render(
                <h1>Hello, React</h1>,
                document.getElementById('container')
            );      
        </script>
    </body>
</html>

页面上什么都没有渲染

JSX默认情况下是浏览器无法理解的。您需要像Babel这样的工具将JSX代码(<h1>Hello, React</h1>(转换为有效的 ES5 JavaScript代码，浏览器可以理解。

要使您的示例正常工作，只需添加以下行<script src="<script src="https://unpkg.com/@babel/standalone@7.4.4/babel.min.js"></script>"></script>

请注意，此解决方案仅适用于测试小例子，您应考虑生产中的其他解决方案

<!DOCTYPE html>
<html>
    <head>
       <script src="https://unpkg.com/react@16/umd/react.development.js" 
       crossorigin></script>
       <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" 
       crossorigin></script>      
        
       <!-- Don't use this in production: -->
       <script src="https://unpkg.com/@babel/standalone@7.4.4/babel.min.js">
       </script>
    </head>
    <body>
        <div id="container"></div>       
        <script type="text/jsx">  
            ReactDOM.render(
                <h1>Hello, React</h1>,
                document.getElementById('container')
            );      
        </script>
    </body>
</html>

相关内容

最新更新

热门标签：