react项目实战【1】react基本知识

按照惯例，首先是各种参考资料

建议先看看这个学习顺序，不要前后颠倒或者舍本逐末了

关于react

1 一个完整的express react 项目

好吧，这个项目需要你具备node /express 知识才能分析的懂

2 react 的component

3 router
3.1 click see router 1
3.4 click see router 2
4 react官网 【需要翻墙】

5 阮一峰的react入门

关于es6
1 es6 速成

项目分析： 项目全部使用的是es6语法，所以直接分析es6这种写法的react了

webpack是运行react的工具，但是这里不讲，放到下一篇文章中单独分析

1 布局划分

react最重要的一点是组件复用，所以要拆分组件

2

3

1 路由 router

这里使用了react-router
引入路由模块 import {Router ,Route ,hashHistory} from 'react-router'
这个Router 组件本身只是一个容器，具体的路由还是需要Route组件来定义的。

<Router history={histroy}>
   <Route path='/' component={myContent} />
</Router>

1.1 这里面的path 是制定路由的匹配规则

1.2 路由还可以嵌套使用

<Router>
  <Route path='/' component={myApp}> 
    <IndexRoute  component={defaultHome}/>
    <Route path='products' component='productList' />
    <Route path='personal' component='personalBox' />
  </Route>
</Router>

这几行代码表示，当访问 / 的时候，加载组件如下

<myApp>
  <defaultHome />
</myApp>

因为这里使用了indexRoute ，显示指定了defaultHome是根路由 的子组件，就是在默认情况下加载的子组件。

如果不用indexRoute ，用下面的方法

<Router>
  <Route path='/' component='APP'>
    <Route path='per' component='per'></Route>
    <Route path='list' component='list'></Route>
  </Route>
</Router>

这样当访问根路径 / 的时候，那么页面不会加载任何组件，也就是APP组件的 this.children.props 是undefined

1.3 关于history

对于Router组件的history属性，是用来监听浏览器地址栏的变化，并且将URL解析为地址对象
history 属性有三个值分别是 browserHistory hashHistory
createMemoryHistory

本项目代码图中显示的使用的是 history = { browserHistory }

2 分析 一个jsx 页面

import React from 'react';
improt Header from './Header' 
import Footer from './Footer'

class Base extends React.Component {
  render(){
    return (
      <div className='Warp'>
        <Header />
        <Footer />
      </div>
    )
  }

}
export default Base;

这里面用的都是ES6的语法糖
最好是用5和6进行一下对比

引用Module(import)

// i am  6
import React from 'react' ;

// i am 5 

var React = require('react');

输出Module (export)

// i am 6
exprot default myModuleName;

// i am 5

module.exports = myModuleName;

class 类的概念

class Base  extends React.Component {
  // 表示Base 这个类将包含所有的React component 方法
}

事例展示

// i am 6
class Personal{
  constructor(name,years){
    this.name=name;
    this.year=years;
  }
  showInformation(){
    return this.name+this.year
  }
}
let liming =  new Personal(liming,22);
liming.showInformation();

//i am 5
function Personal(name,years){
  this.name=name;
  this.year=years;
}
Personal.prototype.showInformation(){
  return this.name+this.year;
}

var zhangsan = new Personal(zhangsan,23);
zhangsam.showInformation();

其实在React文档中，有引入ES6的概念，详见React文档

class HelloMessage extends React.Component{
  render(){
    return <div> hello {this.props.name}</div>
  }
}

ReactDOM.render( <HelloMessage  name='lisi'/> )

---

react webpack es6

1 资料查看
2 还有react-bootstrap

---

千言万语，不动手亲自练习一下

1 发现一个有意思的

输入框自动光标
ref 可以使用回调函数

<input ref={
   function(input){
      if(input!=null){ input.focus() }
   }
} />

2 bind(this)

在做一个计时器的时候，发现必须bind(this)

componentDidMount(){
        setInterval( function(){
            this.setState({ opacity: this.state.opacity-0.2 })
            if(this.state.opacity<0){
                this.setState({ opacity:1 })
            }
        }.bind(this) , 300)
    }

然后我打印了this
这个是有bind(this) 的结果

这个是没有Bind（this） ，这时候读到的是Windows对象

原因是：setTimeout的执行环境跟调用它的函数的执行环境是分离的，因此setTimeout调用的函数中的this关键字指向window或global对象