React脚手架快速搭建
React是前端主流框架之一，起源于Facebook内部项目，于2013年5月开源。目前依然是全球使用最广、生态最好的前端框架。
从事前端开发以来，我一直使用的都是vue框架，两者也经常被开发者们拿来做对比，其实，两个框架都有自己的优势，没有客观上的‘“最好”之分。
最近由于公司技术栈的扩展，也需要用到react，遂投入到react全家桶的学习当中。后续会在此将学习内容以文章笔记的形式不定期更新，笔记及项目demo源码会更新到GitHub上。如果你也想学习react或对react感兴趣，欢迎关注，一起学习探讨，一起进步！
React脚手架===create-react-app
react脚手架有很多种，这是官方提供的一种，初学react建议以此入手。安装方式有两种：
1.全局安装create-react-app
npm install -g create-react-app
create-react-app 项目名
2.通过npx安装
这也是官方文档中的安装方式，不过对本地的node与npm版本有要求。 Node >= 8.10 和 npm >= 5.6
npx create-react-app 项目名
安装过程会比较慢，大概要五分钟，因为npx 默认调用的是npm，网上有的处理方式通过更改npm源的方法：
npm config set registry https://registry.npm.taobao.org
这样更改后npm与cnpm将没有区别，对于新的项目没有太大问题，但是对于一些版本较低的项目使用cnpm会导致依赖版本升级，从而出现不可预料的bug，因此大家就慢慢安装就好。
安装好后，项目结构就是这样：
项目目录简介
在项目结构上与vue-cli搭建的目录非常相似，只不过react的设计理念是all in js，不在有类似的.vue的文件了。
package.json与package-lock.json与vue中的作用一样，里面有项目执行命令、依赖信息等
index.html是项目最终挂载的页面，里面包含了一个id为root的dom
App.js为全局组件入口文件，类似vue的app.vue
index.js 为全局js入口文件，类似vue的main.js
两个test文件是做代码自动化测试的，一般不用，可以删除。
新鲜的知识来了：
serverWork.js这个文件可以视情况用或者不用，主要针对的是移动端应用，对标的是native app。
这里面牵涉到一个新的概念：PWA，是Progressive Web App的英文缩写， 翻译过来就是渐进式增强WEB应用。
它是用来做离线缓存等任务的，在这里实际上就是为react项目注册了一个service worker。这样的话，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（此时使用的是之前缓存的资源）。只在生产环境中有效（process.env.NODE_ENV === ‘production’）
在项目的public目录下，会有一个manifest.json文件，可以在这里做一些配置（图标、名字等等）。当用户把网页生成一个快捷方式时。会感觉用起来像原生APP一样。
借用网上两张图：（来源：https://segmentfault.com/a/1190000016853646）
看到这个我又想到了令人瑟瑟发抖的移动端适配问题......
pc端的项目目前用不到，可以删除。
删除后的目录文件结构就比较清晰了，像常用的assets、static这种资源文件夹以及components都需要自己手动创建：
以上。
要么庸俗，要么孤独。
aHelloWorld微信公众号
以上是 React脚手架快速搭建 的全部内容， 来源链接： utcz.com/z/381396.html
