React脚手架搭建及目录结构介绍

react脚手架（create-react-app）搭建

npm install -g create-react-app
create-react-app todolist （文件夹名）
npm start
或者
npx create-react-app todolist
cd my-app
npm start
（npx是一种在npm中安装工具，在 npm version >= 5.2.0 开始，自动安装了npx）
复制代码

create-react-app 目录结构：

yarn.lock  --  项目依赖的安装包

README.md  --  项目的说明文件

package.json  --  node的包文件、项目的结束（名字/版本号/依赖的第三方的包/调用的指令等）
    记录用npm安装过哪些包  ^  代表 npm install 的时候会自动安装大版本号相同的最新的
    一个版本（x.y.z）
        x - 大版本号，api兼容变化会改变大版本号，x 递增
        y - 次版本号，新增功能时但不影响api的兼容，y 递增
        z - 修订号，bug修复不影响api兼容，z

package-lock.json  --  确定当前安装的包的依赖，以便后续在安装的时候生成相同的依赖（锁定
                       安装时的包的版本号）
    5.x.x之后的npm版本中，pakage-lock.json是会被自动生成的
        version记录了包的版本，resolved记录了包的下载来源。
        package.json 和 package-lock.json的关系：
            package.json负责的不仅仅是记录各种依赖包，它还记录了其他信息。
            pakage-lock.json的作用仅仅是辅助package.json锁定依赖包的版本
            pakage-lock.json可有可无，没有的话只是不能锁定版本而已，而package.json
            是必须要有的。

.gitignore  --  git管理代码的时候，有的文件不希望传到git仓库中，可以把文件定义在这。

node_modules  --  放置项目依赖的第三方的包

public  --  favico.ico: 网页tab标签小图标
            index.html: 初始页面
            manifest.json: wepack打包优化相关

scr  --  放的项目所有的源代码
    所有代码的入口在 index.js 里面

App.test.js  --  自动化测试的文件
复制代码

转载于:https://juejin.im/post/5cf6239df265da1b833379d1