如何正确将React组件渲染到HTML？我的代码为何无法正常渲染？

你的代码存在几处语法和配置错误，以下是具体问题和修正方案：

一、React代码中的错误 #

1. 重复定义/导入App组件 #

开头导入了App组件，但紧接着又定义了同名的App类，导致命名冲突，需删除多余的导入语句：

// 删掉这行：import App from "./App";

2. 类定义语法错误 #

class App extends React.Component后面不需要加括号，正确写法是：

class App extends React.Component { // 去掉后面的()
  // ...
}

3. 缺少React核心库导入 #

使用JSX语法必须导入React，否则无法识别JSX，需添加：

import React from "react";

4. 类方法调用错误 #

mainDiv是类的普通方法，不是React组件，不能用<mainDiv/>的方式调用，应该直接调用this.mainDiv()：

render() { 
  return this.mainDiv(); 
}

修正后的完整React代码： #

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

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  mainDiv() {
    return (
      <form id="quote-box">
        <p id="text"></p>     
        <div>
          <span id="author"></span>
          <button id="quoteButton">New Quote</button>
        </div>
      </form>
    );
  }

  render() { 
    return this.mainDiv(); 
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

二、HTML文件中的错误 #

1. 缺少React、ReactDOM及Babel依赖 #

直接引用本地react.js无法加载所需核心库，需引入官方提供的React、ReactDOM开发版资源，以及Babel用于转译JSX语法。

2. 缺少挂载用的root元素 #

ReactDOM需要挂载到页面中存在的DOM节点，需在body中添加<div id="root"></div>。

修正后的完整HTML代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>random-quote-machine</title>
    <!-- 引入React、ReactDOM开发版库 -->
    <script crossorigin src="React官方CDN链接"></script>
    <script crossorigin src="ReactDOM官方CDN链接"></script>
    <!-- 引入Babel用于转译JSX -->
    <script src="Babel官方CDN链接"></script>
</head>
<body>
    <!-- React挂载的根节点 -->
    <div id="root"></div>
    <!-- 引入你的React代码文件，注意type为text/babel -->
    <script type="text/babel" src="你的React文件名.js"></script>
</body>
</html>

说明：你可以在React和Babel的官方文档中找到对应的CDN链接，选择开发版本即可。如果是长期开发，建议使用Create React App等脚手架工具来自动配置环境，减少手动配置的出错概率。

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