preface

Recently, in the process of learning React, I don’t have a clear understanding of JSX. I only know that JSX is a JavaScript syntax extension that can be translated into a function call named React.createElement() through Bable. And why it’s possible to render a React element into the root DOM node by passing a React element and the root DOM node into reactdom.render (). The little head has a big doubt.

Today, I’m going to talk about how JSX wrote things in React, from the syntax that the browser didn’t understand, to become the seed player of page rendering, and display on the page.

I hope you have learned something after reading this article

✍ ️ ✍ ️ ✍ ️ ✍ ️ ✍ ️ ✍ ️ ✍ ️

First, let’s look at the context of our article:

1. JSX definition and usage

JSX is defined as follows in the React official documentation:

It is called JSX and is a syntax extension to JavaScript.

Okay, let’s put it this way. It’s abstract. Let’s look at the following code first:

<body>
  <div id="app"></div>
  // Import the CDN code below the need to import I will not comment on one
  <script type="text/babel">
    ReactDOM.render(
      <h2>hello</h2>.document.getElementById("app"))</script>
</body>
Copy the code

We render the

hello

element to the root node using the reactdom.render () function, and we can do the same: 

   <script type="text/babel">
    const message = <h2>hello</h2>
    ReactDOM.render(
      message,
      document.getElementById("app")
    )
  </script>
Copy the code

hello

outside the function, using the message definition instead, the page will display normally. This code is what we call JSX code 

const message = <h2>hello</h2>
Copy the code

This interesting tag syntax is neither a string nor HTML.

Note a small detail here: our code has a type=”text/ Babel “in the script tag (of course we also introduced babel.min.js above). Without this attribute, the compilation will fail

This is because our browser does not recognize JSX syntax directly; it must be compiled with Babel.

Babel translates JSX into a function call called React. CreateElement ().

Let’s introduce the React. CreateElement () function

JSX is the syntactic sugar for React. CreateElement ()

The following two lines of code display x identically, except that one uses JSX syntax, but it also looks like this when compiled using Bable.

const message = <h2>hello</h2> 
const message = React.createElement("h2".null."hello");
Copy the code

So why use JSX syntax when you can do it both ways, since it’s an extra step to compile Babel?

The truth is, even the React website says that JSX is not mandatory on React. However, as you can see from the code above, there is only one line, so there is not much difference between the two methods. When there is more code, a tag nested within a tag or even multiple tags, not to mention adding components. Obviously there is a lot of code because we need to constantly call the React. CreateElement () method.

Let’s try to write a more complex code to understand:

render() {
       return (
         <div>
          <div className="head1">
            <h1>I'm heading 1</h1>
          </div>
          <div className="head1">
            <h2>I'm heading 2</h2>
          </div> 
          <div className="head3">
            <h3>I'm heading 1</h3>
          </div> 
         </div>)}Copy the code

We can go to the Babel website and compile the above code

Babel’s official website

The following JSX code is compiled with Babel:

"use strict";
/*#__PURE__*/
React.createElement("div".null./*#__PURE__*/React.createElement("div", {
  className: "head1"
}, /*#__PURE__*/React.createElement("h1".null."\u6211\u662F\u6807\u98981")), /*#__PURE__*/React.createElement("div", {
  className: "head1"
}, /*#__PURE__*/React.createElement("h2".null."\u6211\u662F\u6807\u98982")), /*#__PURE__*/React.createElement("div", {
  className: "head3"
}, /*#__PURE__*/React.createElement("h3".null."\u6211\u662F\u6807\u98981")));
Copy the code

As you can see, Babel will translate JSX into a function call called React. CreateElement (), which takes three arguments in our call React. CreateElement ()

  • type

The current reactElement type is “div” if it is a tag element, and the component name if it is a component element

  • config

All properties in JSX are stored in Config as properties and values of objects

  • children

The content stored in the tag is stored as the children array if there are multiple elements

This function actually returns an object:

Here is a snippet of the source code that generates the ReactElement object for reference:

Let’s print out our example above, our ReactElement object, and see what it looks like:

So far we’ve seen that the JSX syntax code is compiled into a function call called React. CreateElement () using Babel, and returns a ReactElement object. What does this object do, and how does it render to our page?

3. How to get from the virtual DOM tree to the rendered page

You may be wondering why the DOM tree is virtual when you say that a ReactElement object is returned.

At the front end, a tree is represented by an object. No doubt about it, because that’s where our HTML DOM tree comes from:

The object we return above is what we call a virtual DOM tree. To render to the root DOM node, simply pass reactdom.render ();

How does reactdom.render () transform a virtual DOM tree into a real DOM tree? This is also the place I do not understand, personally think is not very understand, or to first grope grope.

conclusion

Finally, let’s summarize the whole article

React. CreateElement (Component,props,… All JSX will eventually be converted to a function call called React. CreateElement,

CreateElement returns a ReactElement object,

This object is what we call the virtual DOM, which is mounted via the reactdom.render () method to the root DOM node that we pass in at the same time.

The 💦 💦 💦

Front – end new code word passing, there must be insufficient or write a bad place. Comments and suggestions are welcome. Thanks a million.