create-react-app 目录结构

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

creat-react-app是facebook提供的一个官方创建工具，会默认给我们创建一个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目录

public是React中常用的静态资源存放配置存放目录，放在这个目录下的文件都不会被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.js和App.css
App.js是项目的根组件，这里一般可以做一些共有头或者底部开发以及路由的定义工作。App.css则是对应引入的样式文件。

package.json 和 node_modules

package.json是React项目用来管理依赖的依赖配置文件,react 是通过npm或yarn来管理依赖的，可以通过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"
     ]
   }
 }