前端入坑，先入了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')
)

初学，献丑了，哈哈。