组件介绍
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>組件介紹</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">// 這不叫組件，只是一個變量，沒有狀態// const header = (// <div className="header">// <h1>頭部</h1>// </div>// )// 組件的名字首字母必須大寫function AppHeader () {return (<div className="header"><h1>頭部</h1></div>)}function AppAside () {return (<div className="aside"><ul><li>正在熱映</li><li>即將上映</li></ul></div>)}function Welcome (props) {return <h1>Hello, {props.name}</h1>}// EcmaScript 6 Classclass AppFooter extends React.Component {constructor () {super()// state 就是組件的狀態，也就是把數據驅動視圖的數據初始化到 state 中// state 類似于 Vue 中的 datathis.state = {foo: 'bar'}setTimeout(() => {// 這樣不行// this.state.foo = 'baz'// 這才是正確的修改 state 數據的方式this.setState({foo: 'baz'})}, 2000)}render () {return (<div className="footer"><p>底部 {this.state.foo}</p></div>)}}const element = (<div><AppHeader /><div className="main"><AppAside /><div className="content"><Welcome name="張三" /><Welcome name="李四" /><Welcome name="Jack" /></div></div><AppFooter /></div>)ReactDOM.render(element, document.getElementById('app'))
</script>
</body>
</html>
?
總結
