React组件

• 组件名首字母必须大写，区分原生html标签
• 会使用到JSX语法

1. function方式创建组件

function Func(props){
  return (
    <div ><h1>测试函数组件{props.name}</h1></div>
  )
}

2. ES6 class方式

class Cls extends React.Component{
  render(){
    return (
    <div ><h1>测试class组件{this.props.nickname}</h1></div>
    )
  }
}

3. 用户自定义方式

const element = <div name=">用户自定义组件</div>;

4. 复合组件：

function Mix(props){
  return (
    <div>
        <Func name={props.name}/>
        <Cls nickname={props.nickname}/>
    </div>
  )
}

render渲染：

ReactDOM.render(
  <Mix name="lhx" nickname="lucy"/>,
  document.getElementById('root')
)