浅谈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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
Node.js的特点详解
2017/02/03 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python和shell获取文本内容的方法
2018/06/05 Python
用Python实现数据的透视表的方法
2018/11/16 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
python处理document文档保留原样式
2019/09/23 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
高三自我鉴定范文
2013/10/19 职场文书
金融管理应届生求职信
2014/02/20 职场文书
师德建设实施方案
2014/03/21 职场文书
小学一年级学生评语
2014/04/22 职场文书
软件售后服务承诺书
2014/05/21 职场文书
会议室标语
2014/06/21 职场文书
小学语文教研活动总结
2014/07/01 职场文书
房屋转让协议书
2014/10/18 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书