react

1.creat-react-dom脚手架
2.引入react-router-dom替换react-router
3.一级路由：login和layout
4.基本组件：data value绑定 属性绑定 事件绑定 设置data

// data 
constructor () {
  super()
  this.state = {
    username: '',
    password: ''
  }
}

// input value绑定
<input onChange={(e) => { this.inputChange(e, 'username') }} value={ this.state.username } type="text"/>

// 属性绑定
<input disabled={ !this.state.username || !this.state.password } onClick={ this.submit.bind(this) } type="button" value="登录"/>

// 事件绑定 2种方法
<input onChange={(e) => { this.inputChange(e, 'password') }} value={ this.state.password } type="password"/>
<input disabled={ !this.state.username || !this.state.password } onClick={ this.submit.bind(this) } type="button" value="登录"/>

// 设置data
this.setState({
  username: e.target.value
})

5.跳转

1）单纯跳转
// 单纯js跳转
this.props.history.push('/')

// 单纯标签跳转
<Link to="/c/content1/content1">content1</Link>

2）.params
// 传参 params js方式跳转-------------？？？未成功
<li onClick={ this.gotoContent1.bind(this) }>content1（params js跳转）</li>
<Route path="/c/content1/:id" component={ Content1 } />

// 传参 params 标签跳转
<Link to="/c/content1/content1">content1(params Link跳转)</Link>

// 传参 params 获取
this.props.match.params.id

// query
// 传参 query js方式跳转-------------？？？未成功

// 传参 query 标签跳转
<Link to={{ pathname: '/c/content2', query: {id: 'content2'} }}>content2(query Link跳转)</Link>

// 传参 query 获取
this.props.location.query
-------------------------------------link跳转，刷新获取不到？？？

----------------------------------------------------query和params的区别和vue一样吗？？？

6.for列表循环

1)
<ul>
  {numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  )}
</ul>

2)
const listItems = numbers.map((number) =>
  <ListItem key={number.toString()}
            value={number} />
);
return (
  <ul>
    {listItems}
  </ul>
);

7.if条件渲染

1）
render() {
  const isLoggedIn = this.state.isLoggedIn;
  let button;

  if (isLoggedIn) {
    button = <LogoutButton onClick={this.handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={this.handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

2）
return (
  <div>
    <h1>Hello!</h1>
    {unreadMessages.length > 0 &&
      <h2>
        You have {unreadMessages.length} unread messages.
      </h2>
    }
  </div>
);