React手脚架项目目录结构

React手脚架项目目录结构_第1张图片

React脚手架项目目录结构
根目录:
  |-- node_modules 项目依赖包 由npm进行管理
  |-- public ---- 静态资源文件夹 ---公共文件,里边有公用模板和图标等一些东西
		|-- favicon.icon ------ 网站页签图标 
		|-- index.html -------- 主页面,承装各个组件 整个项目只有一个html文件,单页面应用
		|-- logo192.png ------- logo图
		|-- logo512.png ------- logo图
		|-- manifest.json ----- 应用加壳的配置文件,网页移动端
		|-- robots.txt -------- 爬虫协议文件
  |-- src ---- 源码文件夹
    |-- components 自定义模块文件夹,将页面中的不同的组件放到这个文件夹中
      |-- 组件1的文件夹 组件文件一般以大写字母开头
        |-- 组件1.jsx 组件可以使用jsx为后缀也可以是js为后缀,以jsx为后缀以区分普通的js文件,组件文件名可以是index.jsx,如果是以index的文件名在导入组件时直接到入到当前组件文件的上一层的文件夹名称即可
        |-- 样式文件.module.css 或者 样式文件.css  以样式文件.moudle.css表示css文件可以进行模块化导入
        |-- 字体文件,音视频文件、...
      |-- 组件文件夹2
		|-- App.css -------- App组件的样式
		|-- App.jsx --------- App组件 主组件,所有其他的组件都要在这里进行引入
		|-- App.test.js ---- 用于给App做测试
		|-- index.css ------ 全局样式
		|-- index.js ------- 入口文件 引入核心库App.js 程序的入口
		|-- logo.svg ------- logo图
		|-- reportWebVitals.js --- 页面性能分析文件(需要web-vitals库的支持)
		|-- setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)
  |-- readme.md --项目介绍自定义一些项目信息以及简单使用
  |-- package.json   项目的配置信息文件,包信息文件
      ---dependencies下管理生产环境所用的包及版本
    ---devDependencies里得插件只用于开发环境,不用于生产环境     
    ---name项目名称
    ---version项目版本
      ---scripts项目启动等功能设置
  |-- package-lock.json  ---上线锁定版本信息
  |-- .gitignore         ---这个是git的选择性上传的配置文件,比如一会要介绍的node_modules文件夹,就需要配置不上传。         
  |-- yarn.lock 真实的版本依赖版本

你可能感兴趣的:(react,reactjs)