胖蔡叨叨叨
你听我说

create-react-app 目录结构

create-react-app方式创建react项目是比较常用的方式。原先的前端工程模块的结果比较松散,书写较为随意,不利于代码管理,而类似于React的框架的出现让前端渲染的可配置型增强,提交代码的可维护性,而随之的发展更是衍生了一系列的生态支持和开发工具,让React的开发变得更加的容易。

creat-react-appfacebook提供的一个官方创建工具,会默认给我们创建一个React demo工程,其目录如下:

---my-react-app
 ------node_modules
 ------public
 ---------favicon.ico
 ---------index.html
 ---------logo192.png
 ---------logo512.png
 ---------manifest.json
 ---------robots.txt
 ------src
 ---------App.css
 ---------App.js
 ---------App.test.js
 ---------index.js
 ---------logo.svg
 ---------serviceWorker.js
 ---------setupTests.js
 ------package.json
 

public目录

publicReact中常用的静态资源存放配置存放目录,放在这个目录下的文件都不会被webpack编译处理,而是打包的时候直接将其复制到指定目录下。类似的在src中也有一个存放静态资源的目录assets,存放在src/assets目录的文件(前提你在js中有引入),它会被webpack编译,比如图片,如果你的图片小于你在webpack中的loader下设置的limit大小(可配置),它会被编译成base64,从而在实际项目中减少http请求,放置在src/assets目录有以下几点好处:

  • 脚本和样式表被缩小并捆绑在一起以避免额外的网络请求。
  • 缺少文件会导致编译错误,而不是用户的404错误。
  • 结果文件名包含内容哈希,因此您无需担心浏览器缓存旧版本。

src目录

src目录是react中编码目录,是开发源码存放目录,里面存放我们工程的所有源代码,对应文件如下:

  • index.js
    react项目的入口文件,一般是通过ReactDom指定指向组件:
import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );

 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();
 
  • App.jsApp.css
    App.js是项目的根组件,这里一般可以做一些共有头或者底部开发以及路由的定义工作。App.css则是对应引入的样式文件。

package.json 和 node_modules

package.jsonReact项目用来管理依赖的依赖配置文件,react 是通过npmyarn来管理依赖的,可以通过yarn或者npm来安装我们package.json中指定的依赖库,而安装库则会被下载安装在node_modules目录下。常见的package.json格式如下:

{
   "name": "my-react-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "browserslist": {
     "production": [
       ">0.2%",
       "not dead",
       "not op_mini all"
     ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
   }
 }

 
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » create-react-app 目录结构
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏