React組件(3種)
當做自定義標簽使用菱肖,定義的組件名稱首字母必須大寫冲粤,渲染的時候也要首字母大寫楣富,一般組件都是寫成直觀閉的 < /> 組件可以嵌套組件
1.React.createClass
let Hello = React.createClass({
render:function(){
return (
<div>
<h1>我是第一種組件的創(chuàng)建方式占卧,即將廢棄</h1>
</div>
)
}
})
// ReactDOM.render(<Hello></Hello>, document.querySelector('#root'))
ReactDOM.render(<Hello />, document.querySelector('#root'),function(){console.log('回調(diào)函數(shù)');})
2.function(){}
function World() {
return(
<h2>我是 hello World</h2>
)
}
function Hello() {
let x = 666;
return(
<div>
<h1>我是第二種組{x}件的創(chuàng)建方式涣觉,必須有返回值贵涵,而且返回值必須是 JSX elements</h1>
<World></World>
</div>
)
}
ReactDOM.render(<Hello />, document.querySelector('#root'))
3.class 組件名 extends React.Component{render(){}}
class Hello extends React.Component{
render(){
return(
<div>
<h1>我是第三種組件的創(chuàng)建方法</h1>
</div>
)
}
}
render(){} === render:function(){}
引入本地圖片也和引入模塊一樣列肢,把圖片當做模塊引入 例如:import img from './avater.jpg' 網(wǎng)上的圖片直接寫圖片地址
引入css文件可以直接引入 import './xxx.css'