浏览器中的javascript无法同时识别“导入”和JSX

Question

我正在尝试创建一个简单的React应用程序，该应用程序从components目录中导入组件。 当前，这是我的文件夹结构：

main
|_components
|   |_FirstComponent.js
|_index.html

FirstComponent.js

export class FirstComponent extends React.Component{
    render(){
        return (
            <h1>Hello World</h1>
        )
    }
}

在index.html中，我有脚本加载react，react-dom和babel。 到目前为止，这是我的JS代码：

<script type="module">
    import FirstComponent from "./components/FirstComponent.js";
</script>

这给了我错误： Uncaught SyntaxError: Unexpected token '<'

JSX解析是一个错误，但是当我将脚本类型切换为text/babel ：

<script type="text/babel">
    import FirstComponent from "./components/FirstComponent.js";
</script>

我收到此错误： Inline Babel script:2 Uncaught ReferenceError: require is not defined

换句话说，如果类型是模块，则浏览器无法读取JSX，但是如果类型是babel，则浏览器将无法识别要求，也就是导入。

如何使浏览器正确加载组件？

Answer 1

解决方法是，只需执行以下操作即可将FirstComponent导入到index.html页面：

<script type="text/babel" src="./components/FirstComponent.js"></script>

在FirstComponent.js中， 删除import和export语句，以便文件仅具有FirstComponent类/功能组件 。 这会将类作为嵌入式babel脚本加载，您的组件将可以使用。 您可以使用index.html底部的ReactDOM.render（）渲染组件。 这是一个简单的解决方法。

FirstComponent.js

// No import statements
class FirstComponent extends React.Component{
    render(){
        return (
            <h1>Hello World</h1>
        )
    }
}
// No export default statement