React组件化学习入门教程讲解

function HelloPerson(){
 return <h1>你好，我是函数式组件!</h1>;
 
}
ReactDOM.render(<HelloPerson/>,document.getElementById('root'));

function HelloPerson(person){
      console.log(this);//此处undefined babel编译后采取严格模式
  return (
  <ul>
  <li>姓名：{person.name}</li>
  <li>年龄：{person.age}</li>
  </ul>
  )
 }
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));

 function GetName(props){
 return <li>姓名：{props.name}</li>
 }
 function GetAge(props){
 return <li>年龄：{props.age}</li>
 }
function HelloPerson(person){
 return (
 <ul>
 <GetName name={person.name}/>
 <GetAge age={person.age}/>
 </ul>
  )
  }
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));

//创建类组件 1:继承react中的Component类 2：需要render
class Person extends React.Component{
 render(){
 return (
     <h1>你好，我是类式组件！</h1>
 )
 }
}
ReactDOM.render(<Person/>,document.getElementById("root"));

const element = <Person/>
ReactDOM.render(element,document.getElementById("root"));