从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(这个大大写的确实挺好,最起码不会云里雾里的,像我这种智商的都能看懂)

时间: 2024-10-19 23:41:46

从0开始学习react(二)的相关文章

正式学习react(二)

今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css 讲了module.loaders下关于 css的写法: module: { loaders: [ // Extract CSS during build { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css'), include: paths } ]}, 还讲了

五分钟学习React(二):我的第一个Hello World

我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index.css文件. cd my-app/src rm -rf * touch index.js touch index.css 现在我们编辑index.js文件, import React from 'react'; import ReactDOM from 'react-dom'; import '.

python学习(二)百度爬虫0.1

参照着网上的爬虫案例(点我),先做了一个demo,基本的爬虫项目创建,以及数据抽取,数据分析,数据保存等等过程基本上有所掌握. 我的需求是需要检索指定的百度贴吧,根据指定的关键字库,搜索出含有关键字的链接,并抽取出来,用于后续告警. 因此,基于需求,分如下步骤: 第一:基于Scrapy创建爬虫项目: 第二:新建TieBaSpider爬虫: 第三:新建外部关键字库dictionary.txt文件,贴吧地址配置url.txt文件: 第一步参考晚上案例. 从第二步开始,编写爬虫,同时创建实例对象以及创

学习React前的准备工作

学习React前提必须拥有Javascript和DOM知识.这个门槛已经很低了.但是很多的教程里面都提到npm,nodejs.要先安装nodejs.在零基础的情况,我一度以为学习React的运行必须依靠nodejs环境.其实不是这样子的. 一.常用工具介绍 1.nodejs: Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine.  how to understand?首先node.js是一个JavaScr

HBase-1.0.1学习笔记汇总

欢迎访问:鲁春利的工作笔记,学习是一种信仰,让时间考验坚持的力量. HBase-1.0.1学习笔记(一)集群搭建 http://luchunli.blog.51cto.com/2368057/1682049HBase-1.0.1学习笔记(二)客户端访问 http://luchunli.blog.51cto.com/2368057/1687458 HBase-1.0.1学习笔记(三)启动脚本解析 http://luchunli.blog.51cto.com/2368057/1690619 HBas

Windows API 编程学习记录<二>

恩,开始写Windows API编程第二节吧. 上次介绍了几个关于Windows API编程最基本的概念,但是如果只是看这些概念,估计还是对Windows API不是很了解.这节我们就使用Windows API 让大家来了解下Windows API的用法. 第一个介绍的Windows API 当然是最经典的MessageBox,这个API 的作用就是在电脑上显示一个对话框,我们先来看看这个API的定义吧: int WINAPI MessageBox(HWND hWnd, LPCTSTR lpTe

Caliburn.Micro学习笔记(二)----Actions

Caliburn.Micro学习笔记(二)----Actions 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions,看一下Caliburn.Micro给我们提供了多强大的支持 我们还是从做例子开始 demo的源码下载在文章的最后 例子1.无参数方法调用 点击button把textBox输入的文本弹出来 如果textbox里没有文本button不可点,看一下效果图 看一下前台代码 <Stac

20145209 《信息安全系统设计基础》第0周学习总结

20145209 <信息安全系统设计基础>第0周学习总结 教材学习内容总结 一.师生关系: 最好的师生关系是健身学员与健身教练的关系.这种关系的前提就是学员即学生必须以自己学习为前提,在学习的过程中接受老师的指导,才能真正提高和进步.老师安排任务只能更具大多数人的水平,并不能完全的更具 你自己的能力给你最好的学习模式,只有通过自己对自己的了解,探索出自己的学习方式,在此期间向老师提出疑问与不解才能真正的进步. 二.习而学的要点: 找到学习共同体:因为大量知识存在于学习共同体的实践中,不是书本中

javascript基础学习(二)

javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操作符 typeof操作符用来检测变量的数据类型,操作符可以操作变量也可以操作字面量. 对变量或值运用typeof操作符得到如下值: undefined----如果变量是Undefined类型: boolean-------如果变量是Boolean类型: number-------如果变量是Numbe