React学习之路-目录结构-Toy模板网

这篇具有很好参考价值的文章主要介绍了React学习之路-目录结构。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录结构

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

React学习之路-目录结构

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 — 浏览器列表