如何正确将React项目的App.js引入并渲染到index.js中？

1. 安装React相关依赖 #

这个webpack boilerplate默认不包含React生态依赖，先补上核心包：

npm install react react-dom react-router-dom

用yarn的话：

yarn add react react-dom react-router-dom

2. 替换index.js，渲染React组件 #

你当前的index.js还在使用原生DOM操作，完全没调用你的App.js组件，这是项目无法显示的核心原因。把index.js内容替换为：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './js/App'
import '@/styles/index.scss'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

3. 验证webpack路径别名 #

代码里用到了@/styles/index.scss这种路径，要确认webpack.common.js里的别名配置正确：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src/'),
  },
}

如果没有这段配置，手动加上，否则别名路径会报错。

4. 修复无效API请求 #

App.js里的fetch('https://api.json')是无效地址，会导致请求失败、chanelData一直为null。要么替换为真实API地址，要么先注释请求逻辑，用假数据测试：

useEffect(() => {
  // getResponse();
  // 临时用假数据测试
  setChanelData([{id: 1, name: '测试频道'}])
}, [])

5. 子组件做非空判断 #

ChanelPage接收chanelData时，要先判断是否存在，避免空值报错，比如：

// ChanelPage.js示例写法
const ChanelPage = ({ id, chanelData }) => {
  if (!chanelData) return <div>加载中...</div>
  const currentChannel = chanelData.find(item => item.id === id)
  return <div>{currentChannel?.name || '未找到频道'}</div>
}

6. 重启开发服务器 #

修改完配置和代码后，重启服务生效：

npm run start

常见报错排查 #

• 出现React is not defined：确保每个组件文件都导入了import React from 'react'（React 17+可省略，但部分babel配置仍需要）
• 路由报错：确认react-router-dom是v6版本（你的代码用了Routes和element属性，是v6语法）
• 样式不生效：检查webpack的scss loader配置，原boilerplate已配置PostCSS和sass-loader，确保sass依赖已安装

内容的提问来源于stack exchange，提问作者Даниил Владимиров