Question

我对React非常陌生。以下是我的第一个脚本。

但是我遇到了以下错误。

未捕获到的SyntaxError：意外令牌<< / p>

我什至通过Google / SO搜索。但是我无法使其正常工作。

<!DOCTYPE html>
<html>
<head>
    <title>First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script  src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  
</head>
<body>
    <div id="app">

    </div>
    <script>
        const name = 'John doe'
        const handle = '@john_doe'

        function NameComponent (props){
            return <h1>{props.name}</h1>;//The problem is here using JSX syntax
        }

        function HandleComponent(props){
            return <h3>{props.handle}</h3>;
        }

        function App(){
            return (
                <div id="container">
                    <NameComponent name={name}/>
                    <HandleComponent handle={handle}/>
                </div>
            );
        }


        ReactDOM.render(<App />,document.getElementById('app'));
    </script>
</body>
</html>

Answer 1

要使您的代码保持当前状态，您只需向脚本标签添加sys.stdout.write('\x1b[1J')，该脚本标签包含您打算使用babel进行转码的代码。

来自babel docs：

在加载到浏览器中时，@ babel / standalone将自动编译并执行所有类型为text / babel或text / jsx的脚本标签

仅此更改即可工作的代码

type="text/babel"

尽管这可行，但是对于初学者来说，使用create-react-app或codesandbox通常更简单。

Answer 2

为了使用react进行最少的设置（没有编译步骤），您需要使用React.createElement语法而不是JSX标签（请检查https://reactjs.org/docs/add-react-to-a-website.html），或使用类似{{3} }

我个人将只使用htm来进行初始设置。这将为您配置babel（还有许多其他功能），并进行正确的JSX转换。尽管将来最好还是完全了解create-react-app的作用，甚至可以自己进行设置。

未捕获到的SyntaxError：意外的令牌<与React

2 个答案: