react-学习笔记

1.安装命令：

　　npm install -g create-react-app

　　create-ract-app projectName

　　cd projectName

　　npm start;

2.安装react-router

　　npm isntall -S react-router

　　//引入

　　import {Router,Route,hasHistory} from 'react-router';

　　render((

　　　　<Router history={hasHistory}>

　　　　　　<Route path='/' component={App} />　　

　　　　</Router>

　　),document.getElementById('app'));

3.安装jquery

　　npm install --save-dev jquery

　　import $ from 'jquery'

　　

4.路由嵌套

　　<Router history={hashHistory}>

　　　　<Route  path="/" component={APP}>

　　　　　　<Route  path = '/exm' component={Exam} />

　　　　</Route>

　　</Router>

    在跟路由下，用this.props.children获取

5.Link

　　<Link to="/" activeStyle={{color:'red'}}>首页</Link>

　　或者指定className

　　<Link to="/" activeClassName='acitve'>首页</Link>

6.context

　　

class ParName extends Component{
    constructor(props, context) {
        super(props, context);
        this.context.router; // it works
    }
    // static contextTypes = { router: React.PropTypes.object }
    handleSubmit(event){
        event.preventDefault();
        const username = event.target.elements[0].value;
        const desc = event.target.elements[1].value;
        const path = `/p/${username}/${desc}`;
        this.context.router.push(path);

    }
    render(){
        return(
            <div>
                <h2>Repos</h2>
                <ul>
                  <li><NavLink to="/p/reactjs/react-router">React Router</NavLink></li>
                  <li><NavLink to="/p/facebook/react">React</NavLink></li>
                  <li>
                      <form onSubmit = {this.handleSubmit.bind(this)}>
                          <input type='text' placeholder='username'/> / {' '}
                          <input type='text' placeholder='desc'/>{' '}
                          <button type='submit'>go</button>
                      </form>
                  </li>
                </ul>
                {this.props.children}
          </div>
        )
    }
}
ParName.contextTypes = {
  router: React.PropTypes.object
};

 - -一定要记住bind(this)