浅谈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 相关文章推荐
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
比较搞笑的js陷阱题
2010/02/07 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
英语专业学生的自我评价
2013/12/30 职场文书
初中作文评语大全
2014/04/23 职场文书
关于教师节的广播稿
2014/09/10 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
小英雄雨来观后感
2015/06/09 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书