浅谈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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
jquery 学习笔记一
Apr 07 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
深入讲解Python编程中的字符串
2015/10/14 Python
解决Python requests 报错方法集锦
2017/03/19 Python
PyCharm代码格式调整方法
2018/05/23 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
煤矿班组长的职责
2013/12/25 职场文书
网络维护中文求职信
2014/01/03 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis