浅谈react+es6+webpack的基础配置


Posted in Javascript onAugust 09, 2017

这是模块化开发、主流框架和最新版的ECMAScript语法规范的一个小demo

准备工作

安装 nodeJs

首先进入node官网,去下载最新版的nodeJs

webpack

安装webpack

npm install webpack -g

参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令

webpack 也有一个 web 服务器

npm install webpack-dev-server -g

-g道理同上

配置webpack

1、先确认一下项目的目录结构

|-app
 |--component
  |---component.js
 |--app.js
|-build
 |--css
 |--img
 |--js
 |--index.html
|-webpack.config.js

2、配置webpack.config.js

在使用webpack的时候,需要创建一个名为 webpack.config.js 的配置文件,这个文件在安装webpack的时候,是不会自动创建的,是需要手动创建,文件的位置要放在当前安装webpack根目录下

var path = require('path');

 module.exports = {
   entry: path.resolve(__dirname, './app/app.js'),
   output: {
     path: path.resolve(__dirname, './build'),
     filename: 'js/build.js'
   },
   module: {
     loaders: [{
       test: /\.js|.jsx?$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       query: {
         presets: ['es2015', 'react']
       }
     }]
   }
 }

这是一个简单的webpack的配置,首先先引用了path对象。

entry是一个入口文件,在这个文件中的所有内容,会被打包到output指定目录的指定文件当中。

path.resolve是一个来格式化路径的方法,path.resolve的方法参数有两个path.resolve(from,to),from这里的__dirname是为了获取当前模块文件所在的目录,to这里的./app/app.js是一个相对路径,ouput是出口,ouput中的path和entry的方法同理,这里不做赘述。

filename是指向一个指定文件,入口打包的所有文件,最后代码都会在这个出口文件中看到。

module中添加的loaders这个数组,里面的对象是用来转换模块的,现在这里只添加了一个js的模块,用来转换es6语法和react

这个时候,还需要安装一个 babel-loader

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

3、修改html文件

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>React + Webpack + es6</title>
 </head>
 <body>
   <div id="aaa"></div>
   <script src="js/build.js"></script>
 </body>
 </html>

修改完 index.html 后,开始编写js:

在 app.js 中,添加 alert('hello world')

然后在cmd命令行中,运行 webpack ,打包完成后打开 index.html ,会弹出一个系统弹窗,"hello world"。

这个时候证实了,我们的配置是正确的,可以正常运行。

react

安装react

首先,还是和上面一样,需要安装对应的插件

npm install react react-dom --save-dev

安装完成后,打开component.js,修改为:

import React from 'react';

export class Component extends React.Component {
  render() {
    return ( < div > hello world < /div>)
  }
}

打开 app.js ,修改为:

import React from 'react';
import {Component} from './component/component.js';
import {render} from 'react-dom';

render(<Component />,document.querySelector('#aaa'));

import是es6中的一个新方法,是用来加载模块的,上面的 import 是用来加载React的, export 定义了对外接口,这里要注意,加载模块定义的名称和类的名称首字母必须大写,如果不大写,会报错。

运行 webpack ,这个时候就完成了一个简单的 webpack + react + es6 的模块化开发,可以直接双击打开 index.html 查看演示,也可以运行 webpack-dev-server 打开本地服务器,浏览器打开 http://localhost:8080/build/index.html 查看演示

React组件生命周期

1、getDefaultProps

作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。

2、getInitialState

作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。(es6不支持)

3、componentWillMount

在完成首次渲染之前调用,此时仍可以修改组件的state。

4、render

必选的方法,创建虚拟DOM,该方法具有特殊的规则:

1)只能通过this.props和this.state访问数据

2)可以返回null、false或任何React组件

3)只能出现一个顶级组件(不能返回数组)

4)不能改变组件的状态 5、不能修改DOM的输出

5、componentDidMount

真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

在服务端中,该方法不会被调用。

6、componentWillReceiveProps

组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。

7、shouldComponentUpdate

组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。

在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用

8、componentWillUpdate

接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。

9、componentDidUpdate

完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。

10、componentWillUnmount

组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

React调试( React Developer Tools )

如果直接在浏览器调试的话,我们只能在Element中看到渲染后的DOM分层结构,如果想看到React组件的分层结构,就会需要到一个调试工具,因为本人比较喜欢使用chrome浏览器进行调试,所以这里暂时只拿chrome浏览器来举例。

1、扩展程序商店下载(推荐)

首先,要保证你的浏览器是可以访问谷歌扩展程序商店,接着我们在商店中搜索 React Developer Tools,然后就会出现一个扩展程序,扩展程序商店下载的,直接启用就好。

2、网上安装包下载

如果是网上下载的安装包,就找一下包里面会有一个.crx文件扩展名的文件,拖放到扩展程序中即可。

个人说明

上述所有内容都是本人的个人理解,如果出现不正确的地方,请及时评论方便做出修改

以上这篇浅谈react+es6+webpack的基础配置就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
js中less常用的方法小结
Aug 09 #Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 #Javascript
基于Vue实例对象的数据选项
Aug 09 #Javascript
react-native之ART绘图方法详解
Aug 08 #Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 #Javascript
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
JS判断数组那点事
2017/10/10 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
python 函数传参之传值还是传引用的分析
2017/09/07 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
浅析Python __name__ 是什么
2020/07/07 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
高考寄语大全
2014/04/08 职场文书
医院义诊活动总结
2014/07/04 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
谢师宴家长致辞
2015/07/27 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
如何制作自己的原生JavaScript路由
2021/05/05 Javascript