Basic operation of react (1)

1. Create react component

The first step is to introduce the following three libraries:

  • react.min.js - the core library of react
  • React dom.min.js - provides DOM related functionality
  • babel.min.js - Babel can convert ES6 code to ES5 code, so that we can execute React code on browsers that currently do not support ES6. Babel has built-in support for JSX. By using Babel with Babel sublime package, you can take the syntax rendering of source code to a new level

There are three ways to create react components:

(1).

<script type="text/babel"> //Type must be babel
    var Hello =React.createClass({
        render:function(){
            return <p>hello</p>;
        }
    });
    ReactDOM.render(
        <Hello/>,
        document.getElementById('exp')
    )
</script>

First, create the react component class and render it in the DOM with id exp through react dom. Render()

(2) A function is used to define a component:

function New(props,refs){
                console.log(props,refs)
                return <p>New</p>;
            }
            ReactDOM.render(
                <New class="q"/>,
                document.getElementById('example')
            );

(3) Use ES6 class to define a component:

class New extends React.Component {
        render() {
            return (
        <p>New</p> ) } ReactDOM.render( <New/>, document.getElementById('ex') )

2. React state

React treats a component as a state machine. Through interaction with users, different states are achieved, and then the UI is rendered to keep the user interface and data consistent.

In React, you only need to update the state of the component, and then re render the user interface according to the new state (do not operate DOM).

The following example creates an ES6 class with the name extended to React.Component, and uses this.state in the render() method to modify the current time.

Add a class constructor to initialize the state this.state. Class components should always use props to call the base constructor.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};//Initialize state
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>Now is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

 

3. Use of refs

class New extends React.Component {
        render() {
            return (
                <div ref>//Add on a node label of a component ref
                         //Can be in this.refs See all nodes under this node in,That is data
                    <p>1</p>
                    <span>2</span>
                </div>
            )
        }
        componentDidMount(){
            console.log(this.refs.true.children[0].innerHTML)//adopt refs Get with ref Contents of the first child element of the node
        }
    }
    ReactDOM.render(
        <New/>,
        document.getElementById('ex')
    )

Tags: Javascript React sublime

Posted on Thu, 23 Jan 2020 08:37:39 -0800 by php-coder