Introduced the React

// Must be introduced sequentially
<script src="./react.development.js"></script>
/ / DOM operation
<script src="./react-dom.development.js"></script>
// JSX syntax conversion
<script src="./browser.min.js"></script>
Copy the code

JSX add type

 <script type="text/babel">
Copy the code

Hello world

ReactDOM.render(
    <h1>hello world</h1>.document.getElementById('app'))Copy the code

//Main
class Main extends React.Component{
    render(){
    return <div>hello world</div>}}// Render argument (insert content, mount root element)
ReactDOM.render(
    <Main></Main>.document.getElementById('app'))Copy the code

JSX insert expression introduces variable with {} JSX tags must have an end tag /

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

Component definition

Function creates

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

Components by value

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

The class to create

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

Components by value

// Class props accepts the props using this.props
class Com extends React.Component{
    render() {
        return (
            <h1>hello {this.props.name}</h1>
        )
    }
}
ReactDOM.render(
    <Com name="xiaoming"></Com>.document.getElementById('app'))Copy the code

Attention!!

The component name starts with an uppercase letter

The props parameter is the Object passed to the parent component

The binding event name is humped

State

State is the most important property of a component object and is used to change the value in the component

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'))Copy the code

Updating component values

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'))Copy the code

ref

/ / Com components
class Com extends React.Component{
    constructor(params){
        super(params)
        this.click = this.click.bind(this)
    }
    click() {
        console.log('click')
        // the ref attribute binds data
        console.log(this.refs.myInput.value)
        // Custom attribute binding data
        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>
        )
    }
}
Copy the code

Two-way data binding

Two bidirectional data binding approaches

class Main extends React.Component{
    constructor(params) {
        super(params)
        this.change = this.change.bind(this)}/ / the event event source
    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')
)
Copy the code

Component style

Set style mode

class Main extends React.Component{
    render() {
        let style = {
            color: 'red'.background: 'blue'
        }
        return (
            <div>// Set the className id style in the tag<style>In the<p className="active">hello xiaoming</p>/ / method 2<h1 style={style}>hello world</h1>/ / method 3<p style={
                    {
                        color: 'red',
                        background: 'blue'}} >hello</p>
            </div>
        )
    }
}
ReactDOM.render(
    <Main></Main>,document.getElementById('app')
)

Copy the code

Conditional judgment and loop

conditional

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} // click the button isShow to invert<button onClick={this.change}>button</button>
            </div>
        )
    }
}
ReactDOM.render(
    <Main></Main>.document.getElementById('app'))Copy the code

cycle

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'))Copy the code