使用es6的class重构react组件

安装yeoman中的react-webpack脚手架

npm install -g yo
npm install -g generator-react-webpack

初始化脚手架

//使用淘宝镜像
cnpm install

创建项目

mkdir es6-component && cd es6-component
yo react-webpack

创建组件

此时会在components 创建NewComponent.js;创建styles/New.css;创建测试文件test/component/NewComponentTest.js;三个文件

yo react-webpack:component new

打开components/NewComponent.js编写组件

'use strict';

import React from 'react';
//由于目前react版本过高，使用此方法引入findDOMNode
import {
	findDOMNode
} from 'react-dom';

require('styles//New.css');

class NewComponent extends React.Component {
	constructor(props) {
			//初始化时，传递props给React.Component
			super(props);
			//初始化状态，也在此定义
			this.state = {
				like: true
			};
		}
		//处理单击的事件，绑定dom对象在render标签中使用bind注入
	handleClick() {
		//alert('you click me');
		this.setState({
			like: !this.state.like
		});
	}
	//通过findDOMNode获取真实dom,触发focus事件
	handleFocus() {
			//获取输入框的的真实dom
			findDOMNode(this.refs.myText).focus();
		}
		//组件自身的render
	render() {
		var text = this.state.like ? 'I like it' : 'I do not like it';
		return (
			<div className="new-component">
			<input type="text" ref="myText"/>
			<p>{text}</p>
				{this.props.name}
				<button onClick={this.handleClick.bind(this)} >click me</button>
				<button onClick={this.handleFocus.bind(this)} >focus on text</button>
			</div>

		);
	}
}


//定义属性在class外部定义
NewComponent.propTypes = {
	name: React.PropTypes.string
};
//默认属性方法也以class属性方式表示
NewComponent.defaultProps = {
	name: 'hello world!'
};

NewComponent.displayName = 'NewComponent';

// Uncomment properties you need
// NewComponent.propTypes = {};
// NewComponent.defaultProps = {};

//在此导出newComponent组件，在某地方输出组件时使用
//import New from './components/NewComponent'; 引入
export default NewComponent;

###运行脚手架

npm start

yeoman react-webpack 文档说明