React.js starting from scratch (iii) JSX grammar and characteristics Introduction

What is JSX?

JSX = JavaScript + xml

JSX is a new standard of Ecmascript.

JSX is a structured grammar.

Features of JSX:

1. The class XML syntax is easy to understand.

2. Enhance JS semantics.

3. Clear structure.

4. High degree of abstraction, easy to cross the platform.

5. Modularity of the code.

How do I use JSX?

var Holleworld = React.createclass ({
　　　　　　        function () {          return <p style={style}>holle World {this. Props.name}

{
/* Here is a multiline comment */
Here is a single-line comment

}
　　　　
</p>;         }      });        React.render (                    container        );

Above is a section of JSX syntax, we should pay attention to when using the time.

1. Holleworld is the first letter of the element name must be capitalized. JSX will parse the first lowercase label as the default HTML tag.

2. Nested through {this.props.name}, you can add a text node to the JSX component.

3. Note Comments can refer to JS default annotation method, but enclosed in curly braces.

4. Using styles in Jsx, JSX styles can be added by way of direct incoming objects.

5. JSX internal can use JS various expressions, functions, operations, etc...

JSX non-dom properties?

In addition to the differences with DOM, REACT provides some attributes that do not exist in the DOM.

• key: An optional unique identifier. When components 渲染 are disrupted during the process, they may be destroyed and recreated because of the differential detection logic. Binding a key to a component can continue to ensure that the component still exists in the DOM.
• ref: Parent component references subcomponents.
• dangerouslySetInnerHTML: Provides the ability to insert a plain HTML string, primarily for the library to be integrated with the generation of DOM strings.

Summarize:

About JSX simple understanding and use of the method is introduced here. If you are interested in this can read JSX parser source code.

I'll see you next time, please.

React.js starting from scratch (iii) JSX grammar and characteristics Introduction