React组件(3种)

React组件(3种)

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

1.React.createClass

let Hello = React.createClass({
render:function(){
 return (
   

     
我是第一种组件的创建方式，即将废弃
   
 )
}
})
// ReactDOM.render(, document.querySelector('#root'))
ReactDOM.render(, document.querySelector('#root'),function(){console.log('回调函数');})

2.function(){}

function World() {
return(
 
我是 hello World
)
}
function Hello() {
let x = 666;
return(
 

   
我是第二种组{x}件的创建方式，必须有返回值，而且返回值必须是 JSX elements
   
 
)
}
ReactDOM.render(, document.querySelector('#root'))

3.class 组件名 extends React.Component{render(){}}

class Hello extends React.Component{
render(){
 return(
   

     
我是第三种组件的创建方法
   
 )
}
}

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

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