React组件(3种)

React组件(3种)

当做自定义标签使用，定义的组件名称首字母必须大写，渲染的时候也要首字母大写，一般组件都是写成直观闭的 < /> 组件可以嵌套组件

1.React.createClass

let Hello = React.createClass({
render:function(){
 return (
   <div>
     <h1>我是第一种组件的创建方式，即将废弃</h1>
   </div>
 )
}
})
// ReactDOM.render(<Hello></Hello>, document.querySelector('#root'))
ReactDOM.render(<Hello />, document.querySelector('#root'),function(){console.log('回调函数');})

2.function(){}

function World() {
return(
 <h2>我是 hello World</h2>
)
}
function Hello() {
let x = 666;
return(
 <div>
   <h1>我是第二种组{x}件的创建方式，必须有返回值，而且返回值必须是 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>我是第三种组件的创建方法</h1>
   </div>
 )
}
}

render(){} === render:function(){}
引入本地图片也和引入模块一样，把图片当做模块引入 例如：import img from './avater.jpg' 网上的图片直接写图片地址

引入css文件可以直接引入 import './xxx.css'