In our daily React development work, we are used to using JSX to describe the React component content. The JSX syntax itself is familiar to every React developer

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <HelloMessage name='Taylor' />.document.getElementById("hello-example"));Copy the code

What exactly is JSX

What is JSX? React defines JSX as JSX.

JSX is a syntactic extension of JavaScript that is close to the template language, but has full JavaScript capabilities.

What does it mean to have JavaScript capability?

Expressions can be embedded in JSX

In the following example, we declare a variable named name, then use it in JSX and wrap it in braces:

const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(element, document.getElementById("root"));
Copy the code

In JSX syntax, you can place any valid JavaScript expression inside curly braces. For example, 2 + 2, user.firstName, or formatName(user) are valid JavaScript expressions.

JSX is also an expression

After compilation, the JSX expression is turned into a normal JavaScript function call and evaluated to get a JavaScript object.

That is, you can use JSX in blocks of code in if statements and for loops, assign JSX to variables, pass JSX as an argument, and return JSX from functions:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
Copy the code

The essence of the JSX

JSX just React. CreateElement (Component, props,… The syntactic sugar of the children function.

The following JSX code:

Online Babel editor

The JSX format is resolved to react. createElement, where the createElement function takes multiple arguments

  • The first parameter is thetatype(Element type)
  • The second parameter isprops
  • The third and NTH parameters arechildren

By comparison, you can clearly see that JSX code is more concise and has a clearer hierarchy of code structures.

Because React needs to convert components into a virtual DOM tree, we’re actually writing a structure tree by hand when we write the code. XML, on the other hand, has an inherently readable advantage in describing tree structures.

But this readable code is just for programmers. At runtime, the Babel plugin restores the JSX syntax to the react.createElement code.

You will find that JSX code is hierarchical and nested in a way that is consistent with actual functionality.

The React.createElement code, on the other hand, is a very confusing mix that is not only unfriendly to read but also hard to write.

Why use JSX

  1. Create a virtual DOM through JSX
  2. JSX syntactic sugar allows front-end developers to use similarHTMLTag syntax to create the virtual DOM inReduce the cost of learningAt the same time, alsoImproved r&d efficiency and r&d experience.

JSX is a syntactic extension of JavaScript that is close to the template language, but has the full power of JavaScript

React source JSX workflow

  1. JSX intoReact.createElementfunction
  2. React.createElementReturn after executionReact.Element(DOM)
  3. The last callReactDOM.render()Convert to the real DOM

How is JSX converted to React. CreateElement? Welcome to the comments section

The last

This article is shallow, you are welcome to see the officer comments left your opinion!

Feel the harvest of the students welcome to like, pay attention to a wave!

Past oliver

  • 15 front-end hd knowledge map, strongly recommended collection
  • What is the principle of qr code scanning login
  • Let me tell you about some awesome NPM packages
  • The most complete ECMAScript walkthrough
  • Front end developers should know Centos/Docker/Nginx/Node/Jenkins (🍡 long)