在现有React项目中开发新组件：如何单独在浏览器预览？

方案1：创建独立的Demo入口文件（推荐） #

直接利用react-scripts的--entry参数指定单独入口，只渲染目标组件，完全脱离主应用依赖：

1. 新建Demo文件
   在src目录下创建ComponentDemo.js，编写组件的测试渲染逻辑：

import React from 'react';
import MyInputComponent from './components/MyInputComponent'; // 替换为你的组件实际路径

// 自定义测试用props
const demoProps = {
  initialItems: [{ name: "测试项1", type: "选项1" }],
  dropdownOptions: ["选项1", "选项2", "选项3"],
  onItemAdd: (item) => console.log("新增项:", item),
  // 补充组件需要的其他props
};

export default function ComponentDemo() {
  return <MyInputComponent {...demoProps} />;
}

2. 添加启动脚本
   修改package.json的scripts字段，新增专门的Demo启动命令：

{
  "scripts": {
    "start": "react-scripts start",
    "start:demo": "react-scripts start --entry src/ComponentDemo.js"
  }
}

3. 启动Demo调试
   运行命令：

npm run start:demo

此时开发服务器只会加载Demo入口的代码，热重载功能正常工作，修改组件或CSS会实时刷新，完全不依赖主应用的其他内容。

方案2：通过环境变量切换主入口渲染逻辑 #

如果不想新增文件，可以在主入口里通过环境变量判断，直接渲染Demo组件：

1. 修改主入口文件
   编辑src/index.js，添加条件渲染逻辑：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import MyInputComponent from './components/MyInputComponent';
import './index.css';

const demoProps = {
  initialItems: [{ name: "测试项1", type: "选项1" }],
  dropdownOptions: ["选项1", "选项2", "选项3"],
};

const root = ReactDOM.createRoot(document.getElementById('root'));

// 根据环境变量判断渲染内容
if (process.env.REACT_APP_DEMO === 'true') {
  root.render(
    <React.StrictMode>
      <MyInputComponent {...demoProps} />
    </React.StrictMode>
  );
} else {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

2. 启动Demo模式
   运行命令：

REACT_APP_DEMO=true npm start

开发服务器会直接渲染目标组件，关闭Demo模式只需运行普通的npm start即可。

关于其他方案的说明 #

• 无需拆分为单仓或独立项目：上述方案完全基于现有create-react-app结构，不需要拆分项目，避免额外的维护成本。
• 无需添加React路由：添加路由会导致主应用的所有代码仍被加载打包，拖慢开发服务器的重建速度，而上面的方案只加载Demo相关代码，启动和热重载速度更快。

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