Question

我是React.js的新手。

＆＃xA;＆＃xA;

有人可以告诉我为什么这对我不起作用？

＆＃xA;＆＃xA;

我创建了一个基本的html5样板并将其保存为index.html。但是，当我打开w /浏览器时，它会说 - 未捕获的SyntaxError：意外的令牌＆lt;

＆＃xA;＆＃xA;

 ＆lt;！doctype html＆gt;＆ #xA; ＆lt; html lang =“”＆gt;＆＃xA; ＆LT; HEAD＆GT;＆＃XA; ＆lt; meta charset =“utf-8”＆gt;＆＃xA; ＆lt; meta http-equiv =“x-ua-compatible”content =“ie = edge”＆gt;＆＃xA; ＆LT;标题＆GT; TITLE＆LT; /标题＆GT;＆＃XA; ＆lt; meta name =“description”content =“”＆gt;＆＃xA; ＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1，shrink-to-fit = no”＆gt;＆＃xA;＆＃xA; ＆lt; script crossorigin src =“https://unpkg.com/react@16/umd/react.production.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script crossorigin src =“https://unpkg.com/react-dom@16/umd/react-dom.production.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆LT;脚本＆GT;＆＃XA; const Button = function（）{＆＃xA;返回（＆＃xA;＆lt; button＆gt; Go＆lt; / button＆gt;＆＃xA;）;＆＃xA; };＆＃XA;＆＃XA; React.render（（＆lt; Button /＆gt;），document.getElementById（'example'））;＆＃xA; ＆LT; /脚本＆GT;＆＃XA; ＆LT; /头＆GT;＆＃XA; ＆LT;身体GT;＆＃XA; ＆lt;！ -  [if lte IE 9]＆gt;＆＃xA; ＆lt; p class =“browserupgrade”＆gt;您正在使用＆lt; strong＆gt;过时＆lt; / strong＆gt;浏览器。请＆lt; a href =“https://browsehappy.com/”＆gt;升级您的浏览器＆lt; / a＆gt;改善您的体验和安全。＆lt; / p＆gt;＆＃xA;百分比抑制率ENDIF]  -  GT;！＆＃XA;＆＃XA; ＆lt ;!  - 在此处添加您的网站或应用内容 - ＆gt;＆＃xA; ＆lt; p＆gt; Hello world！这是HTML5 Boilerplate。＆lt; / p＆gt;＆＃xA;＆＃xA; ＆lt; div id =“example”＆gt;＆lt; / div＆gt;＆＃xA;＆＃xA; ＆LT; /体＆GT;＆＃XA; ＆LT; / HTML＆GT;＆＃XA;

＆＃XA;

Answer 1

回到你的问题，你面临的问题是你使用了错误的语法，你正在使用JSX，并且为了能够实际使用你需要babel来解析它。

使用Babel在浏览器中解析代码。在这里，您的代码已修复为babel（也可在CodePen上找到）

<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>TITLE</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

        <script type="text/babel">
            const Button = function () {
                return (
                    <button>Go</button>
                );
            };

            ReactDOM.render((<Button />), document.getElementById('example'));
        </script>
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div id="example"></div>

    </body>
</html>

我建议您查看React Hello World Docs。这是对reactjs的一个很好的介绍。 tutorial将为您提供有关如何入门的大量信息。

无法在<script>标记中使用JSX

1 个答案: