React Study notes 2

1.build File Introduction

(1) React.js is the core library of react

(2) React-dom.js provides DOM-related functions

(3) Browser.js is the conversion of JSX syntax to JavaScript syntax

2. Continuing learning of components

Note: The first letter of the component must be capitalized, or an error will be added. The usage of the component is identical to the HTML tag and can be arbitrarily added to the attribute. The properties of the component can be obtained through the This.props object.

3.this.props.children

　　

There are three possibilities of This.props.children:

A. The current component has no byte point and returns undefined;

B. If there is a byte point, the data type is object;

C. Data type is array

　　

(1) Code preview

　　

(2) effect in the viewer

　　

(3) Source code

<!    DOCTYPE html>varNoteslist =React.createclass ({render:function() {        return (          <ol>{React.Children.map ( This. Props.children,function(child) {return<li>{child}</li>;            })          }          </ol>        );      },      }); Reactdom.render (<NotesList> <span>hello</span> <span>world</span> </noteslist&gt ;, document.getElementById (' example ')      ); </script> </body>
　　
4.PropTypes
The PropType property of the component class is used to verify that the properties of the component instance meet the requirements.
(1) Code preview
　　
(2) effect in the viewer
　　
(3) Source code
　　
<!    DOCTYPE html>varMyTitle =React.createclass ({proptypes: {title:React.PropTypes.string.isRequired,}, Render:function() {         return This. Props.title}        }    }); vardata = 123; Reactdom.render (<mytitle Title={data}/>document.body); </script> </body>
5. Get the Real DOM node
A component is not a real DOM node, but rather a data structure that exists in memory, called the virtual Dom. Only the inserted document will become the true DOM. According to react's design, all DOM changes now occur on the virtual DOM, and then the actual changes are reflected in the real DOM, which is called Dom diff, which can greatly improve the performance of the Web page.
(1) Code preview
　　
(2) The effect of the tour is as follows:
　　
(3) Source code
　　
<!    DOCTYPE html>varMyComponent =React.createclass ({handleclick:function() {         This. Refs.myTextInput.focus (); }, Render:function() {        return (          <div> <input type= "text" ref= "Mytextinput"/> <input type= "button" value= "Focus the T Ext Input "onclick={ This. Handleclick}/> </div>        );    }    }); Reactdom.render (<mycomponent/>, document.getElementById (' example ')    ); </script> </body>
6.this.state
Both This.state and This.props are used to describe the characteristics of a component. This.props is a feature that, once defined, is no longer changed, while This.state is the heat generated by the user.
　　
(1) Code preview
　　
(2) effect in the viewer (toggle when clicked)
　　
　　
(3) Source code
<! DOCTYPE html>varLikebutton =React.createclass ({getinitialstate:function() {          return{liked:false}; }, Handleclick:function(event) { This. SetState ({liked:! This. state.liked}); }, Render:function() {          varText = This. state.liked? ' Like ': ' haven\ ' t liked '; return (            <p onclick={ This.handleclick}>You {text} This.            Click to toggle. </p>          );      }      }); Reactdom.render (<likebutton/>, document.getElementById (' example ')      ); </script> </body>
7. Forms
　　
React Study notes 2