如何在普通HTML中集成React组件？现有实现遇报错求助

核心问题拆解 #

1. Uncaught ReferenceError: require is not defined：浏览器原生不支持Node.js的require模块语法，直接引用会报错。
2. Browserify依赖错误：误装了reactjs（官方包名为react），且ReactDOM的导入方式错误。
3. React类无提示：导入方式错误导致编辑器无法识别React类型定义。

方案一：无需打包工具，直接用UMD版本（最适配你的需求） #

通过CDN引入React、ReactDOM和JSX预处理器，浏览器可直接运行，无需构建流程。

1. 修改HTML结构 #

在引入组件脚本前，先加载React相关资源：

(必要的HTML头部内容)
<body>
    <div id="slideshowContainer"></div>

    <!-- 加载React和ReactDOM的开发版UMD包 -->
    <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>
    <!-- 标记脚本类型为text/babel，让Babel处理JSX -->
    <script type="text/babel" src="./src/slideshow.js"></script>
</body>

2. 修正组件代码 #

去掉require，修复逻辑错误，替换JSX语法的class为className：

const root = ReactDOM.createRoot(document.getElementById("slideshowContainer"));

class Slideshow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            slide: 1,
        }
        this.slides = {
            1: {
                src: './assets/coding.jpeg',
                caption: "this is slide 1."
            },
            2: {
                src: './assets/coding2.jpeg',
                caption: "this is slide 2."
            },
            3: {
                src: './assets/templimg.jpg',
                caption: "this is slide 3."
            }
        }
    }

    slideTransitionPrev() {
        const slideKeys = Object.keys(this.slides);
        const lastSlide = Number(slideKeys[slideKeys.length - 1]);
        
        this.setState({ 
            slide: this.state.slide === 1 ? lastSlide : this.state.slide - 1 
        });
    }

    slideTransitionNext() {
        const slideKeys = Object.keys(this.slides);
        const lastSlide = Number(slideKeys[slideKeys.length - 1]);
        
        this.setState({ 
            slide: this.state.slide === lastSlide ? 1 : this.state.slide + 1 
        });
    }

    render() {
        const slideCount = Object.keys(this.slides).length;
        return (
            <div className="slides fade"> {/* React中必须用className替代class */}
                <span className="slidePosition">{this.state.slide} / {slideCount}</span>
                <img style={{width: "100%"}} src={this.slides[this.state.slide].src} />

                <button className="prev" onClick={() => this.slideTransitionPrev()}>&#10094;</button>
                <button className="next" onClick={() => this.slideTransitionNext()}>&#10095;</button>

                <span className="caption">{this.slides[this.state.slide].caption}</span>
            </div>
        )
    }
}

root.render(<Slideshow />);

方案二：使用Browserify正确打包（若需本地构建） #

1. 安装正确依赖 #

npm install react react-dom --save

2. 修正导入语句 #

React和ReactDOM是独立包，需分开导入：

// require写法
const React = require('react');
const ReactDOM = require('react-dom/client');

// 或ES6 import写法（需配合babelify转换）
// import React from 'react';
// import ReactDOM from 'react-dom/client';

3. 打包命令 #

# 用ES6 import时需添加babelify
# browserify src/slideshow.js -t babelify -o dist/bundle.js
browserify src/slideshow.js -o dist/bundle.js

4. 引用打包后的文件 #

<script src="./dist/bundle.js"></script>

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