React初学者遇到组件无法在HTML中正常渲染显示问题求助

核心问题点 #

• 内联React脚本未声明type="text/babel"：浏览器会将包含JSX语法的代码当作原生JavaScript直接解析，直接抛出语法错误
• 重复引入不同版本的Babel Standalone：同时引入了6.26.0和7.x两个版本的babel转换工具，存在版本冲突
• 错误使用ES Module导入语法：你引入的是UMD格式的React/ReactDom CDN资源，两个库已经挂载到全局window对象上，不需要用import语法导入，未配置模块化环境的情况下写import会直接报错
• 同名组件冲突：同时引入外部App.js、内联又定义了同名的App组件，会出现变量覆盖问题
• 外部JSX文件无需重复导入React：同上述模块化问题，UMD环境下直接用全局React对象即可

修复方案 #

方案1：仅保留内联组件（无需引入外部App.js） #

修复后的welcome.html代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 仅保留一个版本的babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<!-- 删掉外部App.js引入，脚本加text/babel类型，去掉import -->
<script type="text/babel">
    class App extends React.Component {
        render() {
            return(
                <h1>Hello everyone nice to see it finally works!!!</h1>)
        }
    }
    ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>

方案2：使用外部App.js #

1. 调整welcome.html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<!-- 引入App.js时声明type="text/babel" -->
<script type="text/babel" src="App.js"></script>
</body>
</html>

2. 调整App.js代码：

// 删掉import语句
class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            appVersion: ''
        }
    }
    render(){
        return(
            <h1>Hello everyone nice to see it finally works!!!</h1>
        )
    }
}
// 新增挂载逻辑
ReactDOM.render(<App />, document.querySelector(".root"));

额外排查提示 #

• 打开浏览器控制台（F12）查看报错信息，可直接定位语法错误、资源加载错误等问题
• 本地直接打开html文件时如果引入外部js出现跨域错误，可使用本地静态服务启动项目（比如用vscode的Live Server插件）

内容的提问来源于stack exchange，提问作者Kevin Hermanns