浅谈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与asp.net(c#)互相调用方法
Dec 13 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
微信小程序实现留言板
Oct 31 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 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
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php+highchats生成动态统计图
2014/05/21 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
Document 对象的常用方法
2009/07/31 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
js中判断控件是否存在
2010/08/25 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
gearman的安装启动及python API使用实例
2014/07/08 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
python 全局变量的import机制介绍
2017/09/07 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
党支部对转正的意见
2015/06/02 职场文书
公司岗位说明书
2015/10/08 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
导游词之上海豫园
2019/10/24 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang