浅谈react+es6+webpack的基础配置
这是模块化开发、主流框架和最新版的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的基础配置就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
利用React-router+Webpack快速构建react程序
本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序,下面话不多说,感兴趣的可以一起学习学习. 初始化项目 我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息. $ npm init 接下来我们开始安装依赖项,我的 package.json 的依赖项如下 "devDependencies": { "babel": "^5.5.6", "babel-core":
-
webpack3+React 的配置全解
webpack3 的配置相对于webpack2 又有了一些新的变化,这里讲其记录下来,备查 . package.json 的完整文件在结尾 . 1. 安装 npm init yarn add webpack webpack-dev-server -D 2. 配置简单输入输出 webpack.config.js module.exports = { entry: { ventor: ['react', 'react-dom'], index: [ 'babel-polyfill', 'react-
-
webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的.所以webpack帮我们省去了那些多余的步骤 webpack 基本安装 开始前还是万万不能缺少的安装: npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文
-
react.js使用webpack搭配环境的入门教程
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称
-
webpack 2的react开发配置实例代码
基于webpack 2.3的标准语法,包含了less变量替换.React组件热加载.第三库单独输出.区分生产与开发环境等常用配置. 'use strict' module.exports = function( env ) { // 生成环境下webpack使用-p参数开启代码压缩 // webpack[-dev-server]使用--env dev参数指定编译环境 var isDev = env == 'dev'; var path = require( 'path' ); var webpa
-
webpack 2.x配置reactjs基本开发环境详解
本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2:react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更).官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件. 如果您之前使用过webpack,需要改动的地方并不大.下文假定您没有接触过类似的打
-
React + webpack 环境配置的方法步骤
本文介绍了React + webpack 环境配置的方法步骤,分享给大家,具体如下: 安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性. babel-preset-react React语法包,专门用于React的优化,在代码中可以使用React ES6 classes的写法,同时直接支持JSX语法格式 安装Babel loader // 安装babel-core核心模块和babel-loader npm install babel-c
-
详解基于webpack搭建react运行环境
最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack
-
浅谈react+es6+webpack的基础配置
这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac
-
浅谈React中组件逻辑复用的那些事儿
基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,
-
浅谈React 的引入
1. CDN 引入 和普通的 JS 库或框架一样,React 也可以从 CDN 引入. 在使用 CDN 引入之前需要了解两种类型的 JS 文件,一个是 cjs ,一个是 umd. cjs:全称为 CommonJS,是 Node.js 支持的模块规范 umd:全称为 Universal Module Definition 是统一模块定义,是包含 Node.js 使用的 cjs 的,兼容包含浏览器.Node.js 的模块规范. 新模块规范:最新的模块规范是使用 import 和 export 关键字
-
浅谈react.js 之 批量添加与删除功能
最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把
-
浅谈React Native打包apk的坑
RN的打包,大家可以根据官网一步一步来,但这里有几个地方注意,一下简单介绍: 生成一个签名密钥 在项目的目录下打开cmd命令窗口输入一下命令运行: keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息.最后它会生成一个叫做my-re
-
浅谈React Router关于history的那些事
如果你想理解React Router,那么应该先理解history.更确切地说,是history这个为React Router提供核心功能的包.它能轻松地在客户端为项目添加基于location的导航,这种对于单页应用至关重要的功能. npm install --save history 存在三类history,分别时browser,hash,与 memory.history包提供每种history的创建方法. import { createBrowserHistory, createHashHi
-
浅谈React Component生命周期函数
React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的class以及create-react-class模块: 分为几个阶段:挂载,更新,卸载,错误处理: 1,挂载:constructor(常用).static getDerivedStateFromProps.render(常用).componentDidMount(常用) constructor是类组件的构造函数,在这可以初始化组件的state或进行方法绑定如:constructor(props){ super(prop
-
浅谈react 16.8版本新特性以及对react开发的影响
目录 react16.8版本更新 useEffect react16.8版本更新解决了什么问题 组件复用更便捷 hooks和reactdiff算法 总结 Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React.creactClass创建组件,之后在ES6推出之后,使用类组件Class构建包含生命周期的组件. react 16.8版本更新 react16
-
浅谈React底层实现原理
目录 1. props,state与render函数关系,数据和页面如何实现互相联动? 2. React中的虚拟DOM 常规思路 改良思路(仍使用DOM) React的思路 深入理解虚拟DOM 3. 虚拟DOM的diff算法 4. React中ref的使用 5. React中的生命周期函数 6. 生命周期函数的使用场景 1. props,state与render函数关系,数据和页面如何实现互相联动? 当组件的state或者props发生改变的时候,自己的render函数就会重新执行.注意:当父组
-
浅谈React useDebounce 防抖原理
目录 1.js防抖 2.React custom Hook useDebounce 1.js防抖 // func 需要去抖动的函数 delay 延时执行时间 const debounce = (func, delay) => { let timeout; //...param es6语法 获取形参数组 argaments return (...param) => { // 每次 进入清除上一个已经执行/未执行的定时器 if (timeout) { clearTimeout(timeout);