react学习一：组件

react组件允许你将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思，从概念上类似于js函数,它接受任意的入参（即props），并返回用于描述页面展示内容的React元素

举例声明组件Welcome,如果React元素是自定义组件时，它会将JSX所接收的属性转换为单个对象传递给组件，这个对象被称之为"props",组件名称必须以大写字母开头，以小写字母开头的组件视为原生DOM标签

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Welcome extends React.Component{
  render(){
    return <h1>Hello,{this.props.name}</h1>
  }
}
ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
)

组件嵌套，组件之间相互嵌套来丰富视图，达到组件复用，这里声明组件App，里面嵌套组件Welcome

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Welcome extends React.Component{
  render(){
    return <h1>Hello,{this.props.name}</h1>
  }
}
class App extends React.Component{
  render(){
    return(
      <div>
        <Welcome name="dingding"/>
        <Welcome name="zxl"/>
        <Welcome name="yz"/>
      </div>
    )
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
)