目录结构
node_modules — 存放项目依赖包
public — 存放网站的静态资源文件
- favicon.icon — 网站偏爱图标
- index.html — 主页面(重要)
- logo192.png — logo图
- logo512 — logo图
- manifest.json — 应用加壳的配置文件
- robots.txt — 爬虫协议文件
src — 存放源代码,基于ES6规则的React代码
- App.css — App组件的样式
- App.js — App组件 (重要)
- App.test.js — 给App测试
- index.css — 样式
- index.js — 入口文件 (重要)
- logo.svg — logo图
- reportWebVitals.js — 页面性能分析文件(需要web-vitals库的支持)
- setupTests.js — 组件单元测试的文件(需要jest-dom库的支持)
gitignore — git的选择性上传的配置文件
package.json — Webpack配置和项目包管理文件
包含项目中依赖的第三方包(包的版本)和一些常用命令配置都在这个里边进行配置,当然脚手架已经为我们配置了一些了,目前位置,我们不需要改动。如果你对webpack了解,对这个一定也很熟悉。如果你的node_modules包删掉了,也可以借助package.json内容,执行npm install 或yarn install 重新生成node_modules。
package.json
- name — 项目名称
- version — 版本
- private — 是否公开
- dependencies — 项目依赖,引用了所有将用到的第三方组件(重要)
- react
- react-dom
- react-scripts — 脚手架工具的核心部件,帮助我们自动构建并打包项目,同时可以帮助我们自动加载类似babel这样的工具,webpack傻瓜版。
- scripts — 脚手架工具
- start — 打开本地的服务器,并把网站托管服务器中,这样就可以浏览网站了。
- build — ES6代码不能直接被浏览器执行,需要将public,src所有文件夹中的代码转化成ES5的JavaScript代码,打包放到build文件夹中。
- test — 单元测试unittest
- eject — 脚手架默认隐藏了webpack配置文件。可以使用npm run eject,暴露webpack配置文件,但是无法再次隐藏起来。(⚠️弹出项目中所有配置文件,并造成不可逆的结构性改变,无特殊需求,慎重使用,必须与版本控制工具一起使用git)
-
- eslintConfig — 代码检查配置,ESLint 是一个开源的 JavaScript 代码检查工具
- browserslist — 浏览器列表
README.md — 项目介绍文件