React-jsx语法与组件

jsx语法与组件

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。

https://reactjs.org/docs/hello-world.html

组件首字母大写

组件首字母是大写 会被认为是自定义组件,首字母是小写，会被认为是 原生dom节点

import App from './App.js'
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<App/>,document.getElementById("root"))
//ReactDOM.render(<div>hello react</div>,document.getElementById("root"))
//只要使用jsx,必须引入React
//babel将上面的<div>hello react</div>转换成 ==> React.createElement('div','hello')

组件标签

组件最外层需要被一个标签包裹，不能有兄弟节点

return (加上小括号,可以回车)

import React,{Component} from 'react'
export default class App extends Component {
    render () {
        return (
            <div> //组件最外层标签
                <ul><li>hello</li></ul>
                <p>world</p>
            </div>
        )
    }
}

组件可以嵌套

import React,{Component} from 'react'
export default class App extends Component {
    render () {
        return (
            <div> //组件最外层标签
                <ul><li>hello</li></ul>
                <p>world</p>
                <Child/>
            </div>
        )
    }
}
class Child extends Component {
    render () {
        return (
            <div>child</div>
        )
    }
}

函数式写法

import React,{Component} from 'react'
export default class App extends Component {
    render () {
        return (
            <div> //组件最外层标签
                <ul><li>hello</li></ul>
                <p>world</p>
                <Child1/>
                <Child2/>
                <Child3/>
            </div>
        )
    }
}
class Child extends Component {
    render () {
        return (
            <div>child1</div>
        )
    }
}
function Child2 () {
    return (<div>child2</div>)
}
const Child3 = ()=>{
    return (<div>child3</div>)
}

样式

class

<div class='box'></div> ==> <div className='box'></div> 

label for

<label for='box'></label> ==> <label htmlFor='box'></label>

行内样式

let styleobj = {
    fontSize:'10px',
    color:'red'
}
...
<div style={styleboj}>111</div>
<div style={{background:'red',color:'yellow'}}>111</div>

引入格式

import './css/index.css'

事件

箭头函数

import React,{Component} from 'react'
export default class App extends Component {
    render () {
        return (
            <input type='text'/>
            <button onClick={()=>{
                console.log('click')
            }}>Add1</button>
              <button onClick={()=>{
                this.handleClick('aaa','bbb')
            }}>Add2</button>
        )
    }
    handleClick (x,y) {
        console.log(x+y)
    }
}

bind改变this指向

import React,{Component} from 'react'
export default class App extends Component {
    render () {
        return (
            <input type='text'/>
            <button onClick={this.handleClick.bind(this,'aaa','bbb')}>Add</button>
        )
    }
    handleClick (x,y) {
        console.log('click',x+y)
    }
}

ES6语法糖

import React,{Component} from 'react'
export default class App extends Component {
    render () {
        return (
            <input type='text'/>
            <button onClick={this.handleClick}>Add</button>
        )
    }
    handleClick = ()=>{
        console.log('click')
    }
}

react组件的数据挂载方式

属性(默认属性与属性验证)

状态

import React,{Component} from 'react'
export default class App extends Component {
    state = {
        myname: 'retr0'
    }
    render () {
        return (
            <div>
                <p>{myname}</p>
            </div>
        )
    }
}