使用CDN引入React时无法导入自定义Header组件求助

你遇到的核心问题是CDN引入React时，直接使用ES模块的import/export语法，浏览器默认无法解析，导致脚本执行报错，最终页面空白。以下是具体解决步骤：

1. 调整HTML脚本标签配置 #

在引入你的react1.js时，必须添加type="module"属性，告知浏览器这是一个ES模块文件；同时确保React和ReactDOM的CDN链接适配模块模式：

<!-- 引入React和ReactDOM的开发版CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 关键：添加type="module" -->
<script type="module" src="./react1.js"></script>
<div id="root"></div>

2. 修正组件导入路径 #

浏览器的ES模块导入必须指定完整文件后缀，所以react1.js中的导入语句要补充.js后缀：

import Header from "./Header.js"; // 必须加上.js后缀

3. 适配React 18渲染API（可选但推荐） #

React 18开始不推荐使用ReactDOM.render，建议改用createRoot方法：

// 替换原ReactDOM.render代码
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page />);

修改后的完整代码 #

react1.js #

import Header from "./Header.js";

function MainContent(){
    return (
        <div>
            <h1>Reasons why I'm excited to learn React</h1>
            <ol>
                <li>By knowing React, my chances of getting hired increases</li>
                <li>It is easy to write and understand</li>
            </ol>
        </div>
    );
}

function Footer(){
    return (
        <footer className="Footer">
            <small>2022 Naik development. All Rights Reserved.</small>
        </footer>
    );
}

function Page(){
    return (
        <div>
            <Header/>
            <MainContent/>
            <Footer/>
        </div>
    );
}

// React 18标准渲染方式
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page />);

Header.js #

export default function Header(){
    return(
        <header>
            <nav className="Navbar">
                <img src="./react1-logo.png" className="nav-logo"></img>
                <ul className="NavMenu">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    );
}

额外注意事项 #

• 不能直接用本地文件协议（file://）打开HTML，会触发CORS限制，需用本地服务器（比如VSCode的Live Server插件）运行页面；
• 确保所有文件（react1.js、Header.js、图片）的相对路径正确。

内容的提问来源于stack exchange，提问作者Siddhi Naik