React attributes and Status learning notes

Knowledge Points:
1. Call This.props of the React property. Called Property name

Common ways to set properties:
var props = {
One: ' 123 ',
two:321
}
Call this property:

Description: {... props}, three points here, representing all the attributes in the props

React call to State this.state

Method of this.getinitialstate default state;
This.setstate How to modify a state (often used)

This.setstate. Modified values

Scenario: Modifies the value of the default property name, name, and displays the effect

1. Initialization state, default state
Getinitialstate:function () {
return {
Name: ' Tim ',
}
}

2, change the status, will change the default value. To add a change to this default value to get an element of the listener event Event.target as long as the default value is changed, you will get the changed value
Handchange:function (event) {
This.setstate ({name:event.target.value});
}

3. Call the property of the changed state to show the changed state
Render:function () {
Return <p> HelloWorld, change the value to {this.props.name} </p>
}

Basic Points of knowledge:

• Must be introduced by JS:

1. React.js
2. Jsxtransformer.js

• Compatible with older versions of browsers (optional)

1. Console-polyfill.js
2. Es5-sham.min.js
3. Es5-shim.min.js
4. Jquery.min.js

• basic points:

1. React default parsing data, method of generating JSX code: Render:function () {...}
2. Methods for rendering components: React.render (JSX code block, JSX where the code is rendered (where the effect is displayed))
3. JSX (JavaScript XML) is the language of XML written in JS, Official document: https//facebook.giuhub.io/jsx/
4. JSX The first letter is a custom component and the first letter lowercase is a DOM element
5. JSX to note 3 points: element name, child node, node attribute
6. All HTML attributes and class names are named by the Camel: HTML to be written as "htmlfor";   Class should be written as "ClassName"; Otherwise it will be an error
7. A CSS style written in the Style tab, referenced in react as an object <div style = {style}></div>
8. You cannot use JavaScript statements in {} curly braces, but you can use an expression. Replace the statement with an expression.
9. The type of the script tag is TEXT/JSX

React attributes and Status learning notes