前端入坑，先入了React坑

一来就入了深坑呢，React系。。。

记录两个点，开发环境配置，React本身。

1，开发环境配置

由于React中可以使用jsx语法，也为了方便以后开发调试，需要装好些个东西，配置环境等等。。。

nodejs必须要装，基本都npm的命令要会。

webpack这玩意儿要装，否则基本不能实现正常的开发。babel解析jsx需要在webpack打包的过程中实现，配合使用webpack-dev-server热加载，方便随改随见效果。

npm init//初始化
//装需要的库
npm install --save-dev webpack webpack-dev-server//webpack相关的
npm install --save react react-dom react-bootstrap//React相关的
npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015 babel-plugin-transform-object-rest-spread babel-preset-react-hmre//babel相关的
npm install --save-dev css-loader style-loader url-loader//用于打包css
//下面的命令是自己在package.json的scripts"中配置的
npm start//实际是热加载命令webpack-dev-server --hot  --inline
接下来是整个项目配置
略╮(╯_╰)╭
//主要就是package.json和webpack.config.js这两个文件

2，React本身

以我现在的理解，最重要的就是jsx和单向数据流动这两样吧。

jsx关键在于自定义的类可以与同名标签等效，这就实现了组件使用最根本的关键。

单向数据流动，方便了React内部实现dom操作，也使得程序的数据流动清晰明了（然而并没有，总会有需要从子到父的数据流动）

另外一些细节的：

两种语法创建react组件

let TextEdit = React.createClass({
getInitialState() {
return {
value: ''
};
},
componentWillReceiveProps(nextProps) {
this.setState({ value: nextProps.value });
},
componentDidUpdate(prevProps,prevState){
ReactDOM.findDOMNode(this.refs.inputtext).focus();
},
handleChange(e) {
this.setState({ value: e.target.value });
this.props.onChange(e.target.value);
// alert(this.state.value);
},

render() {
return (
<form>
<FormControl
ref='inputtext'
type="text"
value={this.state.value}
onChange={this.handleChange}
readOnly="true"
autoFocus="true"
/>
</form>
);
}
});

class SetButton extends React.Component{
constructor(props) {
super(props);
this.state = {"value":this.props.num};
}
handleClick(event) {
this.props.onClick(this.state.value);
}
render() {
return (<Button onClick={this.handleClick.bind(this)}>{this.state.value}</Button>);
}
};

通过回调函数实现子组件传递参数给父组件

父组件把自己的函数传给子组件，子组件调用那个函数的时候传入自己的数据参数。

const Calculator = React.createClass({
getInitialState: function() {
return { expression: ''};
},
handleClick: function(value) {
if(value=='=')
{
this.setState({expression:eval(this.state.expression)+''});
}
else if(value=='b')
{
this.setState({expression:this.state.expression.slice(0,-1)});
}
else if(value=='c')
{
this.setState({expression:''});
}
else
{
this.setState({expression:this.state.expression+=value});
}
},
handleChange: function(value) {
this.setState({expression:value});
},
render: function() {
return <div style={{width:'215px'}}>
<TextEdit onChange={this.handleChange} value={this.state.expression}/>
<ButtonToolbar>
<ButtonGroup bsSize="large">
<SetButton num='1' onClick={this.handleClick}/>
<SetButton num='2' onClick={this.handleClick}/>
<SetButton num='3' onClick={this.handleClick}/>
<SetButton num='/' onClick={this.handleClick}/>
<SetButton num='(' onClick={this.handleClick}/>
</ButtonGroup>
</ButtonToolbar>

<ButtonToolbar>
<ButtonGroup bsSize="large">
<SetButton num='4' onClick={this.handleClick}/>
<SetButton num='5' onClick={this.handleClick}/>
<SetButton num='6' onClick={this.handleClick}/>
<SetButton num='*' onClick={this.handleClick}/>
<SetButton num=')' onClick={this.handleClick}/>
</ButtonGroup>
</ButtonToolbar>

<ButtonToolbar>
<ButtonGroup bsSize="large">
<SetButton num='7' onClick={this.handleClick}/>
<SetButton num='8' onClick={this.handleClick}/>
<SetButton num='9' onClick={this.handleClick}/>
<SetButton num='-' onClick={this.handleClick}/>
<SetButton num='b' onClick={this.handleClick}/>
</ButtonGroup>
</ButtonToolbar>

<ButtonToolbar>
<ButtonGroup bsSize="large">
<SetButton num='0' onClick={this.handleClick}/>
<SetButton num='.' onClick={this.handleClick}/>
<SetButton num='=' onClick={this.handleClick}/>
<SetButton num='+' onClick={this.handleClick}/>
<SetButton num='c' onClick={this.handleClick}/>
</ButtonGroup>
</ButtonToolbar>
</div>;
}
});

以上代码实现里一个简单的计算器的功能。

不完整，前后补上

var React = require('react')
var ReactDOM = require('react-dom')
var ReactBootstrap = require('react-bootstrap')
var Button = ReactBootstrap.Button;
var ButtonGroup = ReactBootstrap.ButtonGroup;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var FormControl = ReactBootstrap.FormControl;

和

export default Calculator;

这就是一个可用的计算器组件了。
使用的例子，把这个计算器放到id为info的div里：

var React = require('react')
var ReactDOM = require('react-dom')
import Calculator from './calculator.jsx'
ReactDOM.render(
<Calculator/>,
document.getElementById('info')
)

初学，献丑了，哈哈。