从0开始学习react(二)
今天,开始学习第二节!!!
工欲善其事,必先利其器
react推荐我们使用webpack来打包文件,那么我们就用吧!(其实真心不想用啊)
至于好处网上写的天花乱坠的,大家自行解决啊...
这节主要就学习怎么配置webpack了,这玩意我捣鼓了整整一天才弄的一知半解,哎,脑子差就是吃亏...
1.提前准备工作
(ps:自己装好node啊,别怪我没提醒你)
首先,你需要有一个自己的文件夹,至于什么名字你自己看着办,我的叫做 reactdemo
里面放一个测试的html加一个js文件夹
2.安装
2.1
点击win+r,输入cmd进入控制台,然后进入自己的目录
输入npm init
里面的东西一路回车就好
然后进入你的文件夹里面看是不是多了个package.json的文件
2.2
ok,现在我们先来一发全局安装。
继续输入npm install -g webpack
然后默默等待...
2.3
现在可以配置webpack了,这个要下的东西比较多,网速不好者默哀吧(我整整用了2个小时 - -!)
Style-loader加载器
输入npm install style-loader --save-dev
(加载器部分就不在上图了啊,因为刚装过,在装一遍太浪费时间了,不好意思啊,原谅我的懒惰吧)
css-loader加载器
输入npm install css-loader --save-dev
jsx-loader加载器
输入npm install jsx-loader --save-dev
之后局部安装webpack
输入npm install webpack --save-dev
成功后你的文件夹变身成为这个样纸:
3.使用
这个用之前,还要创建一个webpack.config.js的文件,这个文件呢,就是告诉webpack你要做什么,这里是个demo,所以里面就写简单点(多了的我还没搞懂呢,哼!)
终于到能用的时候了,想想内心还是有点小激动的呢!
当当当当,成功啦...
这时候你的文件夹成了这个样纸:
webpack自动帮我们生成了build文件夹,里面有个build.js...
然而我的html里也不用再引入index.js,直接引入build.js就可以了...
这样基本就都差不多了
另外我自己在用的时候还遇见过出现不是内部命令(好像是叫这个,大家懂就好啦)这个错误,这里将解决方法也贴出来好了
一般这种情况是因为环境变量的问题
我们通过按win+Pause进入
选择我画的那个,点击这个:
进入后:
点击编辑或者双击将路径添加进去。
这个时候聪明的宝宝就会问路径在哪啊?额,疏忽了,这个你们看完路径可能要从上面再来一遍。
路径:
接着进入:
找到webpack.cmd:
反正我的在这里,别人的是不是我还真不知道。
复制这个:
好啦,这个就是路径啦,添加到上面说的环境变量里,就OK啦!!!
结尾名言:不存在十全十美的文章,如同不存在彻头彻尾的绝望。
(上一章被GM鄙视了,说不是技术文章,不让放首页,确实我很菜,但也不用这样吧!!!气煞我也;气煞我也;气煞我也...)
参考资料:webpack官方网站 http://webpack.github.io/
30分钟手把手教你学webpack实战 http://www.th7.cn/web/html-css/201509/120709.shtml(这个大大写的确实挺好,最起码不会云里雾里的,像我这种智商的都能看懂)
从0开始学习react(二)的更多相关文章
- 从0开始学习react(一)
本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...
- 正式学习react(二)
今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...
- 从0开始学习react(三)
这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...
- 五分钟学习React(二):我的第一个Hello World
我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...
- Angular2.0的学习(二)
第二节课 1.了解路由的基础知识 2.子路由.辅助路由.路由守卫和保护路由 路由守卫: CanActivate:处理导航到某路由的情况 CanDectivate:处理从当前路由离开的情况 Resolv ...
- python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法
python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- React学习-React初识
一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...
- 为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
随机推荐
- JavaScript中事件捕获(Event capturing)-------------->由外向内,事件冒泡(Event bubblin)---------->由内向外
addEventListener("click", function() {}, useCapture:false); <!DOCTYPE html> <html ...
- Swift2.0 中的String(一):常用属性
字符串算是平常用的比较多.花样也比较多的一个类型,昨天有空把相关的一些常用操作都写了一遍,总结出来.其实iOS里面的字符串更复杂,还有NSString系列等等,那些API太多将来需要用的时候再慢慢学. ...
- oc-16-set,get方法
S.h #import <Foundation/Foundation.h> /** 解决方案: 1.不用@public修饰 2.我们对象有访问和设置成员变量的两种操作 1>设置值 p ...
- linux 关闭显示器命令
首先要解释下DPMS的意思,dpms可以认为是一个显示能源管理系统,一般用于计算机功耗的管理.在linux中有几个选项:To control Energy Star (DPMS) features: ...
- FITS 基本格式及其扩展
一.FITS 一般介绍二.FITS 的一般结构三.FITS 基本格式四.FITS 的随机组扩展五.FITS 的表扩展 (ASCII 表扩展)六.FITS 的一般扩展和块因子参考文献 FITS 基本格式 ...
- gridview_RowCommand 获取当前行中的控件
<asp:GridView ID="gvStorglog" runat="server" Width="100%" SkinID=&q ...
- 探索多线程使用同一个数据库connection的后果
在项目中看到有用到数据库的连接池,心里就思考着为什么需要数据库连接池,只用一个连接会造成什么影响?(只用一个connection)? 1 猜想:jdbc的事务是基于connection的,如果多线程 ...
- Android动画 interpolator的用法
1. <?xml version="1.0" encoding="utf-8"?> 2. <set 3. xmlns:Android=&quo ...
- iOS uiscrollView 嵌套 问题 的解决
苹果官方文档里面提过,最好不要嵌套scrollView,特别提过UITableView和UIWebView,因为在滑动时,无法知道到底是希望superScrollView滑动还是subScrollVi ...
- js动态增加表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...