This is the sixth day of my participation in the August Text Challenge.More challenges in August

Hello everyone, today we are going to learnreactReact, react, react, react One of the three main frameworks for the front end

Introduce the react

React makes creating interactive UIs easy. Design a simple view for each state in your application, and React will effectively update and render the correct components as the data changes. Declarative views make your code more predictable, easier to understand, and easier to debug.

Without further ado, let’s experience it

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<body>
    <div id="app"></div>

    <script type="text/babel">
    ReactDOM.render(<h2>hello</h2>.document.getElementById("app"))
    </script>
</body>
Copy the code

I believe that you are familiar with the above code, want to know how he is compiled? usebabelTo compile it, you can useBabelLet’s try it out

// What it looks like after compiling

ReactDOM.render( /*#__PURE__*/React.createElement("h2".null."hello"), document.getElementById("app"));
Copy the code

Let’s do a small example, let’s say we want to click a button and then modify the text, which is probably familiar to you

// This is the original way of writing

<body>
    <div id="app">
        hello react
    </div>

    <button>Modify the text</button>


    <script>
        const button = document.querySelector("button")
        const html = document.getElementById("app")
        
        button.addEventListener("click".() = > {
            html.innerHTML = "Hello, faint"
        })
        </script>
</body>
Copy the code

Define a render function, execute react in it, call that function for the first render, define a click function to change the name, and re-call the render function for the second render.

/ / the react of writing

<div id="app"></div>

    <script type="text/babel">
        let name = "hello react"

        render()

        function btnClick() {
            name = "Hello, faint"
            render()
        }

        function render() {
            ReactDOM.render((
            <div>
                <h2>{name}</h2>
                <button onClick={btnClick}>Modify the</button>
            </div>
        ), document.getElementById("app"))}</script>
Copy the code

I don’t know if you feel that this is a bit of a hassle, because when you write JSX code, everything is together and it’s not easy to read. I’m going to teach you how to use component-based development.

<div id="app"></div>

    <script type="text/babel">

        class App extends React.Component {

            render() {
                return (<div>hello react</div>)
            }
        }

        ReactDOM.render(<App />.document.getElementById("app"))
    </script>
Copy the code

Data management, we can not like the above, render into a function, and then after each change of data, manually call again, right? This is very performance consuming, so without further ado, let’s see, how is the data managed, and how do we change it, and then automatically refresh

<div id="app"></div>

    <script type="text/babel">

        class App extends React.Component {

            constructor() {
                super(a)this.state = {
                    magges: "hello react"}}render() {
                return (
                    <div>
                        {this.state.magges}
                        <button onClick={e= >Enclosing btnClick ()} > modification</button>
                    </div>)}btnClick() {
                this.setState({
                    magges: "Hello, faint"
                })
            }
        }

        ReactDOM.render(<App />.document.getElementById("app"))
    </script>
Copy the code

In this case, we store all the data in this.state, and then we want to modify the data, so we use this.setState to modify the data, and this will tell us react, we changed the data, we need to rerender it. I’m using the arrow function here, and this is calling this, which is the global app component

Finally, let’s do an example (counter) to reinforce this

<div id="app"></div>

    <script type="text/babel">

        class App extends React.Component {

            constructor() {
                super(a)this.state = {
                    num: 0}}render() {
                return (
                    <div>
                        {this.state.num}
                        <button onClick={e= > this.inbtn()}>+</button>
                        <button onClick={e= > this.debtn()}>-</button>
                    </div>)}inbtn() {
                this.setState({
                    num: this.state.num + 1})}debtn() {
                this.setState({
                    num: this.state.num -1
                })
            }
        }

        ReactDOM.render(<App />.document.getElementById("app"))
    </script>
Copy the code