react的jsx基本用法

组件就是一个集合体，把html、css、js形成一个组件，组件写法就是jsx语法创建一个react（是facebook出的view视图层library（库））组件。

下载react lib文件

去bootCDN官网下载

引入文件

 

创建组件

第一种低版本

function App({      //组件对象首字母必须大写 　　&&    var App=createClass({ render{                         }}

return(　　//返回组件所声明html结构，也就是页面中展示数据内容，注意用的是小括号

<div>　　//只允许被一个标签包裹

<p>hello react</p>

<HelloWorld/>　　//组件之间是可以嵌套的

<Person nikename:"小明"/>

react定义css样式

1.<div className="">css样式</div >

2.行间样式对象{}解析:<div class={{color："red"}}>里面中括号表json对象</div>

3.全局变量:<div style={col}>全局样式</div>，　原型链<div type="this.col">原型样式</div>

</div>

)

})

App.prototype.col={color:"bule"}原型链

 

第二种高版本

const {Connponent}=React;　//结构赋值　class Person extends Component{()}

class Person extends React.Component{(    //通过class定义组件

constructor(props){

super(props)

console.log(props.[ ])

}

render(){　　//展示组件内容

const{nikeNeme}=this.props

return(

<h5>我是{nikeName}</h5>

)

}

)}

 

 

渲染render

ReactDOM.render(<App/>),document.ElementById('box')   //参数一表示组件；参数二表示挂载位置