时间戳

首页 > 解决方案 > 为什么'hello React'的反应代码不起作用

reactjs - 为什么'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>

页面上没有呈现任何内容

标签： reactjscomponents

解决方案

默认情况下，浏览器无法理解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>

推荐阅读