首次创建React项目代码无法运行，CSS正常求解决方案

你遇到的问题核心是CDN环境下React的使用方式不符合规范，结合代码细节，以下是具体问题点和修改方案：

核心问题 #

• 浏览器原生环境无法直接用ES6 import 加载CDN提供的全局React变量
• React 18已废弃ReactDOM.render，需改用新的createRoot渲染逻辑
• 组件导入路径错误，且脚本加载顺序不合理
• 多次调用render会覆盖页面已有内容

修改后的完整代码 #

index.html #

调整脚本引入顺序，确保组件脚本先于入口脚本加载，保留type="text/babel"以支持JSX编译：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <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>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="restaurant"></div>

    <script src="Header.js" type="text/babel"></script>
    <script src="App.js" type="text/babel"></script>
    <script src="js.js" type="text/babel"></script>
</body>
</html>

Header.js #

移除不必要的import React，CDN已将React挂载为全局变量：

export default function Header(){
    return (
        <div className='container'>
            <div className='head-part'>
                <h1>HopeLake</h1>
                <div className='icons'>
                    <span>i1</span>
                    <span>i2</span>
                    <span>i3</span>
                </div>
                <div className='list-pages'>
                    <ul>
                        <li>HOME</li>
                        <li>ABOUT</li>
                        <li>MENU</li>
                        <li>ORDER</li>
                        <li>CONTACT</li>
                    </ul>
                </div>
            </div>
        </div>
    )
}

App.js #

修正Header的导入路径为相对路径./Header.js，移除冗余的import React：

import Header from './Header.js'

export default function App() {
    return(
        <Header />
    )
}

js.js #

改用React 18标准的createRoot渲染方法，移除重复的render调用，修正App的导入路径：

import App from "./App.js"

// React 18官方推荐的渲染流程
const root = ReactDOM.createRoot(document.getElementById("restaurant"));
root.render(<App />);

额外提示 #

• 确保所有JS文件存放在同一目录下，路径匹配无误
• 若要搭建规范的React项目，推荐使用create-react-app等脚手架工具，避免手动处理模块编译和依赖问题

内容的提问来源于stack exchange，提问作者Reydi Vonay