瀏覽器中的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