React组件

// 创建组件的第一种方式(组件名称首字母必须大写)
function Hello() {
    return <div>这是Hello组件</div>
}
ReactDOM.render(<Hello></Hello>, document.getElementById(‘app‘))

// 为组件传递props数据
function Hello2(props) { // props只读
　　return <div>这是Hello2组件, {props.id} + "--" + {props.name} + "--" + {props.age}</div>
}
var user = {id: 1, name: ‘张三‘, age: 20}
// ReactDOM.render(<Hello2 id={user.id} name={user.name}></Hello2>, document.getElementById(‘app‘))
ReactDOM.render(<Hello2 {...user}></Hello2>, document.getElementById(‘app‘))

import React from ‘react‘

// 为组件传递props数据
export default function Hello3(props) { // props只读
    return <div>这是Hello3组件, {props.id} + "--" + {props.name} + "--" + {props.age}</div>
}
// export default Hello3

import React from ‘react‘
import ReactDOM from ‘react-dom‘
// 默认，如果不做配置，不能省略.jsx后缀
import Hello3 from ‘./components/Hello3.jsx‘

// 将组件抽离为单独的jsx文件
ReactDOM.render(<Hello3 {...user}></Hello3>, document.getElementById(‘app‘))