项目结构
常规的React项目需要使用npm（或yarn）作为包管理器来对项目进行管理。并且React官方为了方便我们的开发，为我们提供react-scripts包。包中提供了项目开发中的大部分依赖，大大的简化了项目的开发。
开发步骤：
- 创建项目，目录结构如下
根目录
- public
- index.html （添加标签 <div id="root"></div>）
- src
- App.js
- index.js- 进入项目所在目录，并执行命令：
npm init -y或yarn init -y - 安装项目依赖：
npm install react react-dom react-scripts -S或yarn add react react-dom react-scripts - 运行
npx react-scripts start启动项目（初次启动需要输入y确认） - 或者将
react-scripts start设置到package.json的scripts选项中，然后通过npm start启动（初次启动需要输入y确认）”scripts”: { “start”: “react-scripts start” }
index.html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>App.js：
const App = () => {
return <h1>Hello React!</h1>
}
export default App;index.js：
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(element);
create-react-app
上述创建React项目方式在有的人看来可能会有一些麻烦，并且在实际开发中它也不是大部分人所选择的方式。之所以在这里选择这种方式，只是我个人的一种喜好，我希望学生在入门阶段学习时，能够认识项目里的每一行代码，所以我采用了手动创建的项目的形式。
如果你不喜欢这种方式，可以自己提前预习一下create-react-app相关的内容，这也是常规的创建项目的方式。
超哥好， 我一步步跟着做，执行命令 npm init -y 后，显示error,能帮忙看看是啥问题吗？ 谢谢啦“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
}
越原始越好，很多人都是跳过了很多步骤，往往不知道最根源的配置，用vite等构建工具都是在此基础之上的，感谢