What is a JSX?

I got to know JSX for the first time when I was learning React. At first glance, I thought the syntax was similar to JS, and then I thought it was similar to HTML. Later, with project experience, I confirmed that JSX was indeed related to those two. Now I’m going to explain how it works.

React component Components

How does JSX relate to React? Simply put, JSX makes React easier to componentize the View layer, which takes over HTML’s responsibility for building pages. React manages the Virtual DOM by creating and updating Virtual elements.

Virtual elements are created and updated in memory and are not rendered into the real DOM. Virtual elements are divided into virtual DOM and virtual components, corresponding to native DOM elements and custom components.

---

Next, explain from DOM elements and custom components:

1. The DOM elements

A very common label:

<button class="btn btn-blue">
   <em>Confirm</em>
</button>
Copy the code

The button tag contains the element’s type and attributes, which can be seen more clearly when converted into JSON objects. That is, the tag is a DOM element:

{
  type: 'button',
  props: {
    className: 'btn btn-blue',
    children: {
      type: 'em',
      props: {
        children: 'Confirm'}}}}Copy the code

Component elements

The above example is represented by the custom method as:

const Button = ({color,text}) => {
  return (
    type: 'button',
    props: {
      className: `btn btn-${color}`,
      children: {
        type: 'em',
        props: {
          children: text
        }
      }
    }
  )
}
Copy the code

The method uses JSON structure to describe it as follows, that is, the method name of the component method corresponds to the type of the element, and the parameter corresponds to the attribute of the element, which satisfies the two necessary conditions for constructing the element (element type and element attribute). It concludes that the custom method is also an element

{
  type: Button,
  props: {
    color: 'blue',
    text: 'Confirm'}}Copy the code

Two examples are used to illustrate one thing —- whether a normal tag or a custom component method can be represented as an element. This is one of the core ideas of React: because there is a common expression, we can nest or mix elements in layers. These nested component elements are called React components, and we can render an entire DOM tree recursively.

Two. JSX origin

Build a complex React component (a Button component instead)

(1). First define a component element:

const DanderButton = ({text}) => {
  type: Button,
  props: {
    color: 'blue',
    text: text
  }
}
Copy the code

(2). Continue to encapsulate a new component with the above component

const DeleteButton = () => {
  return (
    type: 'div',
    props: {
      children: [
        {
          type: 'p',
          props: {
            children: 'Are you sure? '
          }
        },{
          type: DanderButton,
          props: {
            children: 'Confirm'
          }
        },{
          type: 'Button',
          props: {
            color: 'blue',
            children: 'Cancel'}}]})}Copy the code

This is a relatively simple React nested components, DeleteButton components clearly express the function of a module (the outer div), a period of the clues, said a confirm button, a cancel button, such a simple function are already feel tedious, so if in this way to programming, the feeling will be very bad, This reminds us of the joy of using HTML to write pages, JSX writing method came into being.

See how JSX implements the same functionality as above:

const DeleteButton () => ( <div> <p>Are you sure? </p> <DanderButton> Confirm </DanderButton> <Buton color="blue">Cancel</Buutton>
  </div>
);
Copy the code

JSX adds HTML syntax to Javascript code and converts it into pure Javascript for the browser to execute. The packaging phase of actual development has been compiled into pure Javascript code, so there are no side effects, making the code more intuitive and easier to maintain.

Most compilers that parse JSX syntax today use Babel

The above code can be parsed by Babel into code that React can execute

var DeleteButton = function DeleteButton () {
  return React.createElement(
    'div', null, React.createElement( ... ) , React.createElement( ... ) , React.createElement( ... ) )}Copy the code

As you can see, the structure of the element is the same as that of JSON, except that it is created using React. CreateElement.

Conclusion:

In summary, JSX is essentially a componentalization of the View layer for React, which takes on the responsibility of building pages by adding HTMl syntax to Javascript code.