如何修改新建React应用以练习手写核心HTML/JS代码？

1. 清理src目录的正确姿势 #

直接删光src下所有文件会导致webpack找不到默认入口（src/index.js），所以清理后必须先重建最基础的入口文件，保留create-react-app的核心约定：

• 保留public/index.html（这是页面模板，打包后的JS会自动注入其中，别删）
• 在src目录下新建index.js（这是项目的唯一入口文件，必须存在）

2. 最简可运行代码示例 #

先写最精简的可运行代码验证环境，再逐步扩展：

src/index.js 内容： #

import React from 'react';
import ReactDOM from 'react-dom/client';

// 最简React组件
function App() {
  return <h1>手动编写的React应用</h1>;
}

// 挂载到public/index.html里的root节点
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

写完后执行npm start，能正常启动并显示页面就说明环境没问题，之后可以自由修改组件逻辑。

3. 常见报错的快速解决 #

• "Module not found: Can't resolve './index' in 'src'"：补建src/index.js即可
• "Target container is not a DOM element"：检查public/index.html里有没有<div id="root"></div>，这个是React挂载的目标节点，不能删
• JSX语法报错：确保文件后缀是.js或.jsx，create-react-app默认支持JSX，无需额外配置

4. 逐步扩展的建议 #

• 先从单组件开始练手，熟悉React组件结构和JSX语法
• 拆分组件时，直接在src下新建组件文件（比如src/Header.jsx），然后在入口文件里导入使用
• 添加样式的话，新建src/App.css，在组件里通过import './App.css';导入，create-react-app会自动处理样式打包

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