react脚手架

第一次使用脚手架，先学习路由，回头我们用脚手架针对api有时间我再撸一遍

脚手架的安装，会使用yarn的建议使用yarn

npm install -g create-react-app
create-react-app my-app my-app为自己的demo名称

这里是有个小坑的，就是你的目录名不要使用大写，这样作只要是为了严谨性，因为在Linux下是严格区分大小写的。
成功安装之后运行npm statr 即可

image

出现此页面即可！！！基本目录我们来看看

image

我是用yarn安装的，所以yarn.lock可以不用在意，React目前还没有实现热更新，比较集成化，不需要我们配置太多，后续再看吧目前自己也是萌新

react的生态圈非常庞大，第三方的构建工具也有很多种，比如圈内常用的generator-react-webpack，它是需要yeoman的支持的，当然你可以手打webpack都是一样的

安装
npm install -g yo 缩写
npm install -g generator-react-webpack

安装好之后输入 创建，这里是我单独创建了一个文件夹

image

输入yo ‘name’

image

是否开始postcss 选择Y

因为我的NPM 是真的太慢了，换成yarn试试

image

等了好久终于安装好了，npm慢的朋友推荐yarn 安装

image image

这个目录结构厉害了
npm start之后出现此页面即可

image

看一下目录中的package.json，主要看scripts

image

https://github.com/react-webpack-generators/generator-react-webpack
这是react-webpack-generator的github地址，建议用谷歌翻译

因为个人比较喜欢webpack，并且自己也在学习所以目前我先使用此脚手架学习，后续会使用create-react-app继续来，学习就是要多练

作者：感觉不错哦
链接：https://www.jianshu.com/p/27d111a50a06
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---

generator-react-webpack是业内比较流行的构建react的脚手架工具，它需要yeoman的支持来使用的。
一、优点介绍：
1.基于webpack构建，很容易的配置自己需要的webpack；
2.支持ES6,jichengle Bable-Loader;
3.支持不同种类的css（sass，less，stylus）
4.支持PostCSS转换样式，可以自动加浏览器内核前缀；
5.集成了esLint功能，可以检测代码质量；
6.可以轻松配置单元测试，比如Karma和Mocha.
二、安装（在安装好node前提下）
1.在全局安装yeoman
npm install -g yo
2.在全局安装generator-react-webpack
npm install -g generator-react-webpack
3.创建项目目录（在项目所在的盘符下）
mkdir react_demo
4.进入目录
cd react_deom
5.用生成器生成我们的项目目录
yo react-webpack
6.使用命令 npm start 就可以看项目的脚手架效果了。

总结：generator-react-webpack更容易配置webpack，让你适应你的实际项目，并且有很强的扩展功能。但也有缺点，就是要依靠yeoman来生成。