React引入

//必须顺序引入 
<script src="./react.development.js"></script>
//操作DOM
<script src="./react-dom.development.js"></script>
//jsx语法转换
<script src="./browser.min.js"></script>

jsx添加类型

 <script type="text/babel">

Hello world

ReactDOM.render(
    <h1>hello world</h1>,document.getElementById('app')
)

//Main
class Main extends React.Component{
    render(){
    return <div>hello world</div>
    }
}
//render参数(插入内容,挂载根元素)
ReactDOM.render(
    <Main></Main>,document.getElementById('app')
)

jsx插入表达式用 { } 引入变量 jsx标签必须有结束标签 /

let name = 'xiaoming'
ReactDOM.render(
    <h1>hello {name}</h1>,document.getElementById('app')
)

组件定义

函数创建

const Welcome = () => {
    return <h1>hello world</h1>
}
ReactDOM.render(
    <Welcome/>,document.getElementById('app')
)

组件传值

const Welcome = (props) => {
    return <h1>hello {props.name}</h1>
}
ReactDOM.render(
    <Welcome name="xiaoming"></Welcome>,document.getElementById('app')
)

class创建

class Welcome extends React.Component{
    render() {
        return (
            <h1>hello world</h1>
        )
    }
}
ReactDOM.render(
    <Welcome/>,document.getElementById('app')
)

组件传值

//class 传值 通过props接受传值 使用this.props
class Com extends React.Component{
    render() {
        return (
            <h1>hello {this.props.name}</h1>
        )
    }
}
ReactDOM.render(
    <Com name="xiaoming"></Com>,document.getElementById('app')
)

注意！！！

组件名称首字母大写

props参数是Object 取到父组件的传值

绑定事件名称驼峰式

State

state是组件对象最重要属性，用于改变组件中的值

class Com extends React.Component{
    constructor(params){
        super(params)
        this.state = {
            num: 1
        }
    }
    render() {
        return (
            <div>
                <h1>{this.state.num}</h1>
            </div>
        )
    }
}
ReactDOM.render(
    <Com></Com>,document.getElementById('app')
)

更新组件值

class Com extends React.Component{
    constructor(params){
        super(params)
        this.state = {
            num: 1
        }
        this.add = this.add.bind(this)
    }
    add() {
        console.log(this)
        console.log(this.state.num)
        this.state.num ++
        this.setState({
            num: this.state.num
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.num}</h1>
                <button onClick={this.add}></button>
            </div>
        )
    }
}
ReactDOM.render(
    <Com></Com>,document.getElementById('app')
)

ref

//Com组件
class Com extends React.Component{
    constructor(params){
        super(params)
        this.click = this.click.bind(this)
    }
    click() {
        console.log('click')
        //ref属性绑定数据
        console.log(this.refs.myInput.value)
        //自定义属性绑定数据
        console.log(this.myInput1.value)
    }
    render() {
        return (
            <div>
                <input type="text" ref="myInput"/>
                <input type="text" ref={input => this.myInput1 = input}/>
                <button onClick={this.click}>buttton</button>
            </div>
        )
    }
}

双向数据绑定

两种双向数据绑定方法

class Main extends React.Component{
    constructor(params) {
        super(params)
        this.change = this.change.bind(this)
    }
    //event事件源
    change(event) {
        console.log(123)
        console.log(event.target.value)
        //ref
        console.log(this.refs.myInput.value)
    } 
    render() {
        return (
            <div>
                <input type="text" onChange={this.change} ref="myInput"/>
            </div>
        )
    }
}
ReactDOM.render(
    <Main></Main>,document.getElementById('app')
)

组件样式

设置样式方式

//设置样式方式在标签内 设置className id 样式写在<style>中
class Main extends React.Component{
    render() {
        let style = {
            color: 'red',
            background: 'blue'
        }
        return (
            <div>
            //方法一：设置样式方式在标签内 设置className id 样式写在<style>中
                <p className="active">hello xiaoming</p>
                //方法二
                <h1 style={style}>hello world</h1>
                //方法三
                <p style={
                    {
                        color: 'red',
                        background: 'blue'
                    }
                }
               >hello</p>
            </div>
        )
    }
}
ReactDOM.render(
    <Main></Main>,document.getElementById('app')
)

条件判断与循环

条件判断

class Main extends React.Component{
    constructor(params) {
        super(params)
        this.state = {
            isShow: true
        }
        this.change = this.change.bind(this)
    }
    change() {
        console.log(this.state.isShow)
        this.setState({
            isShow: !this.state.isShow
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.isShow ? <p>hello world</p> : null
                }
                //点击按钮isShow取反
                <button onClick={this.change}>button</button>
            </div>
        )
    }
}
ReactDOM.render(
    <Main></Main>,document.getElementById('app')
)

循环

class Main extends React.Component{
    constructor(params) {
        super(params)
        this.state = {
            showList: [1,2,3]
        }
    }
    render() {
        return (
            <ul>
                {
                    this.state.showList.map((index,value) => {
                        return <li key={index}>{value}</li>
                    })
                }
            </ul>
        )
    }
}
ReactDOM.render(
    <Main></Main>,document.getElementById('app')
)