2017.11.30 react one of the basic grammars JSX

1. Common sense:

React is a JAVASCRIPT library for building user interfaces.

React is primarily used to build the UI, and many people think that React is the V (view) in MVC

2. Introduction of JS File Description:

3.JSX Syntax Description: One of the core mechanisms of react is the ability to create virtual DOM elements in memory. React uses virtual DOM to reduce the operation of the actual DOM to improve performance.

JSX is a format that is combined with JavaScript and XML. React invented JSX, which uses HTML syntax to create virtual DOM. When the <,JSX is encountered, HTML parsing, encountered {as JavaScript parsing.

JSX is just a syntax format for creating virtual DOM, and we can use JS code to create a virtual DOM in addition to JSX.

(1) Compare JS with jsx:

The JSX is converted to pure JS by the translator and then executed by the browser. In real-world development, JSX has been compiled into a pure JAVASCRIPT,JSX grammar at the product packaging stage without any performance impact. Also, since JSX is only a syntax, JavaScript's keyword class, for, and so on cannot appear in XML, and as shown in the example, use classname, htmlfor instead , This is consistent with the creation of native Dom in JavaScript.

(2) Introduction to grammar:

JSX itself is similar to XML syntax, and can define attributes and child elements. The only special thing is that you can use curly braces to add JavaScript expressions

var person = <person Name={window.isloggedin? Window.name: '}/>;

The above code will be compiled after JSX:

var person = react.createelement (person  ,  '});

(3) Array: JSX allows you to insert an array into the template, and the array will automatically expand all Members:

(4) JSX binding event: Jsx The event to bind directly to the element.

<button onclick={checkandsubmit.bind (this)}>submit</button>

The only difference between a native HTML-defined event is that JSX uses hump notation to describe the event name, and the curly braces are still standard JavaScript expressions, returning an event handler function .

React does not actually bind events to each specific element, but instead uses the event broker's pattern: To add a unique listener for each event on the root node document, and then to find the real trigger element through the target of the event. In this way, all nodes from the triggering element to the top-level node, if there is a binding event, react will trigger the corresponding event handler. This is known as the React Simulation event system. Although the entire event system is managed by react, its APIs and usage methods are consistent with native events.

(5) JSX definition style:

The use of styles and real styles in JSX is similar, as defined by the Style property, but unlike the real DOM, the property value cannot be a string and must be an object.

' #ff0000 ' ' 14px '}} >hello world.</div>

Or:

var style = {  '#ff0000',  '  14px'}; var node = <div style={style}>helloworld.</div>;

To remember clearly,{} inside is the JS code, here is passed in the standard JS object. In Jsx, you can use all the styles, basically the conversion specification of the property name is to write it as a camel, such as "Background-color" into "BackgroundColor", "Font-size" to "FontSize", This is consistent with the standard JavaScript operation DOM-style API.

(6) Note: Multiple HTML tags are nested in the code and need to wrap it with a tag element

2017.11.30 react one of the basic grammars JSX