目录结构

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


 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐