02.环境准备

同学们好，这一小节，我们来搭建一个项目环境，这个项目环境搭建的过程，可以总结为4步：

• node 环境安装（node v18.6.0 npm 8.19.3）
• 执行 npx create-react-app simple-react
• 执行 npm start
• 删除一些代码

第一步：node环境安装

详情参阅node官方文档, 由于这个过程比较基础，就不在课程中展开讲解，如果真的有很多同学安装不成功，得到反馈后我可以单独补充录制一个安装视频，作为大家的参考资料。

第二步：执行 npx create-react-app simple-react

这里初始化了一个项目，这个初始化项目的过程，也可以直接从官方文档上找到相关说明。如果有对npx是什么含义不太清楚的同学，请参阅npm的官方文档，当然也可以选择暂时不去深究，跟着步骤操作下来即可，先将精力暂时聚焦在React本身上面来，后续再去了解。

第三步：执行 npm start

执行这个命令可以启动项目

第四步：删除一些代码

由于我们这里是通过官方脚手架初始化的项目，会有一些冗余信息，我们先删除掉这些跟我们课程无关的代码，尽可能降低学习成本

结果分析

删除无关信息后，我们来看看剩下的内容，留下的最关键的内容就是：

• src/index.js
• public/index.html
• package.json中的dependencies和scripts：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

到这里，我们就基本搭建好了项目环境。