无需Node/NPM：在普通HTML/JS中使用React组件的可行性咨询

DevOps 小满

2026-8-15

问题描述

现有基于Java Spring框架开发、部署在Tomcat服务器上的应用，前端主要采用AngularJS实现。现计划使用React的HTML/JSX组件替代AngularJS进行前端定制，且无需集成AngularJS与React。此前学习React教程时了解到需安装Node和NPM并执行npm run start才能运行项目，但希望避免在目标服务器安装Node/NPM。现咨询：

是否可通过在主页面index.htm中添加script标签引入React依赖库，直接在浏览器中运行React组件？
如何搭建此类无需Node/NPM的React示例项目？

解决方案

1. 可行性结论

完全可以通过script标签引入依赖，直接在浏览器中运行React组件，不需要在服务器安装Node/NPM。这种方式跳过构建流程，依赖CDN提供的React核心库和JSX编译工具，让浏览器直接解析并渲染React组件，非常适配你的现有场景。

2. 搭建示例项目步骤

步骤1：创建核心HTML文件

新建index.html文件，写入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>React无Node/NPM示例</title>
    <!-- 引入React开发版核心库 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- 引入ReactDOM开发版渲染库 -->
    <script 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>
    <!-- React组件的挂载容器 -->
    <div id="react-root"></div>

    <!-- 编写React组件，type设为text/babel让Babel处理JSX -->
    <script type="text/babel">
        // 自定义React组件
        function CustomReactComponent() {
            const [count, setCount] = React.useState(0);

            return (
                <div style={{padding: '20px'}}>
                    <h1>React 无Node/NPM 运行示例</h1>
                    <p>点击次数: {count}</p>
                    <button onClick={() => setCount(count + 1)}>点击增加</button>
                </div>
            );
        }

        // 挂载组件到页面容器
        const root = ReactDOM.createRoot(document.getElementById('react-root'));
        root.render(<CustomReactComponent />);
    </script>
</body>
</html>

步骤2：部署到Tomcat

将index.html放入Tomcat的webapps/[你的Spring应用上下文路径]目录下，替换原AngularJS的主页面或者作为新页面使用
启动Tomcat，访问对应URL（比如http://localhost:8080/你的应用名/index.html）即可看到React组件正常运行

生产环境优化建议

替换为生产版本的库文件，减少体积并提升性能：

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

如果组件较多，可以将组件代码拆分到单独的.js文件中，引入时同样设置type="text/babel"
若担心CDN稳定性，可以下载对应库文件到本地项目的静态资源目录，改为本地路径引入

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