Interview question-React (5): Babel's process of parsing JSX?

In React development, JSX has become an important syntax for building user interfaces. However, browsers cannot directly understand JSX, and need to convert it into browser-executable JavaScript code through tools such as Babel.

1. Introduction to Babel and AST

Babel is a widely used JavaScript compilation tool, which is used to convert the new version of JavaScript code into the old version of the code to ensure normal operation in different browsers and environments. AST is an acronym for Abstract Syntax Tree, which is a tree-like data structure used to represent code structures.

2. The process of converting JSX to AST

The process of converting JSX to AST can be divided into two main steps: Parsing and Transformation.

JSX code:

const element = <div className="container">Hello, world!</div>;

1. Parsing:

In the parsing phase, Babel will use the parser to decompose the JSX code into tokens (Tokens), and then build a corresponding AST. This AST is able to represent the structure and syntax of the source code and is the basis for further processing.

2. Transformation:

During the transformation phase, Babel uses plugins to convert JSX-related syntax into plain JavaScript code. This process includes converting JSX elements into React.createElementcalls and handling JSX attributes, etc. Through transformations, Babel converts JSX from a specific syntax into generic JavaScript code that browsers can understand.

Here is the code to compile JSX to AST:

{
    
    
  type: 'JSXElement',
  openingElement: {
    
    
    type: 'JSXOpeningElement',
    name: {
    
    
      type: 'JSXIdentifier',
      name: 'div',
    },
    attributes: [
      {
    
    
        type: 'JSXAttribute',
        name: {
    
    
          type: 'JSXIdentifier',
          name: 'className',
        },
        value: {
    
    
          type: 'StringLiteral',
          value: 'container',
        },
      },
    ],
    selfClosing: false,
  },
  children: [
    {
    
    
      type: 'JSXText',
      value: 'Hello, world!',
      raw: 'Hello, world!',
    },
  ],
  closingElement: {
    
    
    type: 'JSXClosingElement',
    name: {
    
    
      type: 'JSXIdentifier',
      name: 'div',
    },
  },
}

3. The process of converting AST to JavaScript code

The process of converting AST to JavaScript code involves the stage of Code Generation.

In the generation phase, Babel will use the generator to traverse the AST and generate corresponding JavaScript code based on the AST nodes. The generator maps AST nodes to appropriate JavaScript code, including variables, function calls, operators, and more. Through the generation phase, Babel turns the transformed AST into final JavaScript code.

Here is the code to convert the AST to JavaScript code:

const element = /*#__PURE__*/React.createElement("div", {
    
    
  className: "container"
}, "Hello, world!");