React渲染问题：WebStorm中DOM完全空白，附相关代码文件

嘿，刚上手React就碰到页面空白的问题太正常了，我来帮你一步步捋清楚～

首先，你的代码里有几个关键问题导致浏览器没法正常渲染内容：

• 浏览器原生不认识import语法，也没法直接解析JSX（就是你写的<div><h1>...</h1></div>这种混合HTML的JS代码）
• 你没有引入React和ReactDOM的实际资源，直接写import的话浏览器根本找不到这些模块

下面给你两种解决方案，按需选择：

方案一：快速测试（不用打包工具） #

适合新手快速验证React代码，直接通过CDN引入依赖并处理JSX：

修改你的index.html，加上React、ReactDOM和Babel的CDN，同时修改script标签的类型：

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <!-- 引入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>
    <!-- 引入Babel来解析JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <!-- 把script类型改成text/babel，让Babel处理JSX -->
    <script type="text/babel" src="script.js"></script>
</body>
</html>

然后更新script.js：去掉import（因为CDN已经把React和ReactDOM挂在全局window上了），同时改用React 18的最新渲染方式：

// 创建根节点
const root = ReactDOM.createRoot(document.getElementById('root'));
// 渲染内容
root.render(
    <div>
        <h1>Hello world!</h1>
        <p>This is a paragraph</p>
    </div>
);

保存后刷新页面，应该就能看到内容了！

方案二：正式项目开发（推荐） #

如果要做长期的React开发，手动配CDN肯定不是长久之计，推荐用官方工具初始化项目，它们会自动帮你搞定打包、Babel配置这些繁琐的事：

比如用Vite（现在最流行的快速构建工具），打开终端执行：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

然后用WebStorm打开这个my-react-app文件夹，就能直接写React代码了，不用再手动处理依赖和JSX解析的问题。

额外提示 #

你可以打开浏览器的开发者工具（按F12），切换到「控制台」标签，肯定能看到原来代码的报错信息——以后碰到页面空白的问题，先看控制台报错是个好习惯！

内容的提问来源于stack exchange，提问作者Shubham Londhe