react+webpack+es6详细配置教程

来源：互联网发布：js怎么获取时间戳编辑：程序博客网时间：2024/06/11 17:19

环境搭建

创建一个空文件夹, 进入当前文件夹下命令行窗口, git bush here也可以. 输入命令npm init, 通通按回车, 最后会输出一个package.json, 现在打开该文件, 接着刚刚生成那些东西, 下面写上这些devDependencies里的那些依赖.

{  "name": "reacthome",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "babel": "^6.23.0",    "babel-core": "^6.26.0",    "babel-loader": "^7.1.2",    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "css-loader": "^0.28.7",    "file-loader": "^1.1.5",    "less": "^2.7.3",    "less-loader": "^4.0.5",    "react": "^16.0.0",    "react-dom": "^16.0.0",    "style-loader": "^0.19.0",    "url-loader": "^0.6.2",    "webpack": "^3.8.1"  }}

将devDependencies添加进package.json之后, 继续在当前目录下输入命令npm install, 网速不好得等一会不要着急. (如果之前没有用过webpack的同学, 要额外输入两个命令npm install webpack -g 和 npm install webpack-dev-server -g, 第一个是全局webpack命令, 第二个是开启服务器命令)
在该文件夹下创建文件webpack.config.js以及项目结构如下图

根目录下的src, src下还有三个文件夹, 分别为img, js, 和less.
根目录下的home.html(主页), webpack.config.js(webpack配置文件)
在webpack.config.js下写入如下内容

const webpack = require('webpack');const providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery, 便于ajax请求module.exports = {  entry : {    home: './src/js/home.js',//如果文件, 如果有多个页面在下面多写几项就是了  },  output : {//打包输出文件    filename: '[name].js',    publicPath: 'http://localhost:8080/out',    path: __dirname + '/out',  },  module : {    rules: [//打包规则      {test : /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},      {        test : /\.js$/,         loader : 'babel-loader',        exclude : /node_modules/,        query : {          presets : [            require.resolve('babel-preset-es2015'),            require.resolve('babel-preset-react'),          ]        }      },      {test: /\.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']}    ],  },  devServer: {//服务器端口地址    port: 8080,    inline: true,//自动刷新  },  plugins: [//jquery插件    providePlugin  ],}

这里不对webpack配置做太多介绍, 有兴趣的同学可以看看我的这篇博客

webpack超详细配置, 使用教程(图文)

在src文件夹下创建home.js文件

至此环境搭建完毕!!!!!, 下面是react es6基本用法

react es6

home.html主页上写上基本框架

//home.html<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>主页</title></head><body>  <div id="demo"></div>  <script src="http://localhost:8080/out/home.js"></script></body></html>

home.js上正式使用react

例子1: 基本用法

//home.jsimport React from 'react';import ReactDom from 'react-dom'; class HelloMessage extends React.Component{   render(){     return <h1>Hello {this.props.name}</h1>;   } } class Output extends React.Component{   render(){            return (       <div>           <HelloMessage name="John" />       </div>     );   } } ReactDOM.render(<Output />, document.getElementById('demo'));

例子2: this.props.children

import React from 'react';import ReactDom from 'react-dom';class NotesList extends React.Component {        render() {    return (      <ol>        {          React.Children.map(this.props.children, (child) => {return <li>{child}</li>})        }      </ol>    )  }}ReactDOM.render(  <NotesList>    <span>hello</span>    <span>world</span>  </NotesList>,  document.getElementById('demo'));

例子3: PropTypes和defaultProps 定义组件的属性类型和默认属性，统一使用static成员来实现

import React from 'react';import ReactDom from 'react-dom';class Video extends React.Component {    static defaultProps = {        autoPlay: false,        maxLoops: 10,    };  // 注意这里有分号    static propTypes = {        autoPlay: React.PropTypes.bool.isRequired,        maxLoops: React.PropTypes.number.isRequired,        posterFrameSrc: React.PropTypes.string.isRequired,        videoSrc: React.PropTypes.string.isRequired,    };  // 注意这里有分号    render() {        return (            <View />        );    } // 注意这里既没有分号也没有逗号}

例子4: ref属性从组件获取真实 DOM节点

import React from 'react';import ReactDom from 'react-dom';class MyComponent extends React.Component {  constructor(props){    super(props);    this.handleClick = this.handleClick.bind(this)  }  handleClick(){    this.refs.myTextInput.focus()  }  render(){    return(      <div>        <input type="text" ref="myTextInput" />        <input type="button" value="Focus the text input" onClick={this.handleClick} />      </div>    )  }}ReactDOM.render(  <MyComponent />,  document.getElementById('demo'));

注意上面的.bind(this), 如果不使用会出现获取不到this, 用箭头函数改写也可以

例子5: 组件状态机 this.state 将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

import React from 'react';import ReactDom from 'react-dom';class LikeButton extends React.Component {  constructor(props){    super(props);    this.state = {//state初始化不必使用getInitialState函数, 直接在constructor函数中即可      liked: false,      value: "crlin"    }  }  handleClick(){    this.setState({      liked: !this.state.liked    })  }  handleChange(event){    this.setState({      value: event.target.value    })  }  render(){    let text = this.state.liked ? 'like' : 'haven\'t liked',        value = this.state.value;    return (         <div>         <p onClick={this.handleClick.bind(this)}>You {text} this. Click to toggle.</p>        <input type="text" value={value} onChange={this.handleChange.bind(this)} />        <p>{value}</p>      </div>    );  }}ReactDOM.render(  <LikeButton />,  document.getElementById('demo'));

最后附上一张react生命周期便于大家理解

这里写图片描述

阅读全文

0 0