React代码控制台无输出，疑似Babel未转译的解决求助

你的代码存在几个关键错误，并非Babel转译的问题（create-react-app模板已内置Babel配置，会自动处理JSX转译），具体修正方案如下：

1. 修正ReactDOM的导入路径 #

你错误地从react包导入ReactDOM，React 18+版本的正确导入路径为react-dom/client：

import React from 'react';
import { createRoot } from 'react-dom/client';

2. 补全组件挂载逻辑 #

你的代码仅创建了JSX元素，但未将其挂载到DOM节点，也未确保代码进入执行流程。完整修正代码如下：

import React from 'react';
import { createRoot } from 'react-dom/client';

const element = <h1>Hello</h1>;
console.log(element);

// 获取项目默认的根DOM节点（create-react-app预设id为root的div）
const root = createRoot(document.getElementById('root'));
// 挂载React元素到页面
root.render(element);

3. 基础验证步骤 #

• 确保入口文件命名为index.js（create-react-app默认的入口文件）
• 运行npm start启动项目后，打开浏览器控制台即可看到打印的React元素对象

兼容React 17及以下版本的写法 #

如果使用的是React 17或更早版本，ReactDOM的导入与挂载方式略有不同：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello</h1>;
console.log(element);

ReactDOM.render(element, document.getElementById('root'));

内容的提问来源于stack exchange，提问作者josefh weszla