• What is the JSX
    • Writing standards
  • In the JSX {}
    • attribute
    • children
    • To prevent XSS
    • Other Matters needing attention
  • JSX with single entry
  • Differences between JSX and a template engine
  • JSX is a description of the real DOM

What is the JSX

JSX is a special feature of React.

This is what it looks like

let jsx = <h1>hello</h1>;
Copy the code

It looks like a normal HTML tag, doesn’t it? B: well… Wait a minute… Look at the left-hand side, we’ve assigned this HTML tag to a JS variable!

what! ? What is this operation?

Hey, that’s what JSX does. We say that the full name of JSX should be translated as Javscript XML, not Javascript and XML, because this is more like extending a function in Javascript than XML/HTML tags, It assigns XML as the value of the variable to the JS variable, which is an extension of javascript syntax.

In addition, if we only consider the looks of JSX, we often refer to it as JSX Tag.

Writing standards

JSX supports line breaks

let jsx = (
    <div>
    	<h1>hello</h1>
    </div>
)
Copy the code

Note that in older versions of React, if you don’t comment with a () on a new line, React will automatically put a = after the comment; , will report an error!

In the JSX {}

{} can help us better describe the attributes and children of a JSX tag.

attribute

A JSX tag can also have as many attributes as an XML/HTML tag element, like this

let jsx = <img src='./xxx... '/>
Copy the code

The value of this property can be a fixed string or a dynamic JS variable, but the JS variable must be wrapped with {}. (The guy in Vue is called Mustache)

let src = './1.jpg';
let jsx = <img src={src} />
Copy the code

children

In addition, {} can contain any JS expression (as long as it returns a value, except for a native JS object), even an extended JSX tag. And {} can be used not only as the value of an attribute, but also as a child Element (text or Element) of a JSX tag.

let className = 'class1';
let src = './1.jpg';
let element2 = <img src={src} alt='1.jpg'/ >;letElement = (<div className={className}> {element2} //<---- look here! </div> );Copy the code

Other Matters needing attention

We said {} can only put expressions, what is not an expression, like this

<div>{leti = 123; I}</div> //<-- error!! complainsCopy the code

In addition, {} does not allow the placement of JS objects, will report an error

But {} is placed in a null is not an error, put null said what all don’t apply colours to a drawing

To prevent XSS

If a JSX is returned in {} and it is a script, {} will automatically convert it to a normal string to prevent script injection.

JSX with single entry

A JS variable does not care if the JSX tag it accepts contains other JSX tags inside it, but it has the principle that it can only accept one JSX tag as an entry.

This means that if you assign js variables to JSX that looks like this, you’ll get an error

let jsx = (
    <div></div>
    <img />
)
Copy the code

Differences between JSX and a template engine

To sum up, {} in JSX gives it similar functionality to a template engine, but is more powerful because it is an extension of javascript syntax:

  • You can use it as the value of a variable in the if and for loops
  • You can also pass it as an argument to the function
  • It can also be returned as the return value of a function.

JSX is a description of the real DOM

So much for that, but what does JSX actually stand for? Does it represent a DOM element?

This is not a safe assumption; it is actually a description of the DOM element, not the DOM element itself.

All the JSX tags mentioned above will be compiled like this

/ / before compilationlet jsx = <h1 className="class1">hello</h1> // react. createElement('h1'/ / type, {className:'class1'} // Tag attribute key value pairs,'hello'/ / the children nodes)Copy the code

The react. createElement function will most likely generate an object, which we’ll call a React object or an even higher name, the virtual DOM.

{
  type: 'h1',
  props: {
    className: 'class1',
    children: 'hello'}}Copy the code

The React element is a description of the actual DOM to be generated. React renders the actual DOM element based on this description.

Note: When there is only one child, the children value is a string or object, but when there are many children, the children value is an array, each containing the corresponding child elements.

ToBeContinue…