React学习之路 - 目录结构

目录结构

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  —  项目介绍文件