What is JSX and how to understand it?

Babel converter for JSX to JS objects

Official:

  • JSX is an extended syntax of javascript. We recommend using this syntax in React to describe UI information. JSX may remind you of a template language, but it has all the capabilities of javascript.
  • JSX just React. CreateElement (Component, props,… The syntactic sugar of the children function.

To understand:

  • The front-end in the browser can parse and recognize the content is HTML, CSS, JS. JSX No matter what a JSX object is, it still needs to be rendered into HTML structure.
  • React is also known as declarative UI programming, where front-end developers are used to writing the UI in an HTML style. This is also because better generalization, without JSX syntax, writing tags would still need to be generated by calling methods, which would probably abort.
  • With all the power of javascript, React translates JSX syntax into JS objects. This is a lexical analysis of react syntax. React.createElement
  • React uses a virtual DOM mechanism. JSX objects are a compromise that allows developers to use Babel to convert them to JS objects.


What are the benefits of JSX?

React compiles and executes

  • JSX executes faster (not fast, react’s virtual DOM is fast) because it is optimized when compiled into JavaScript code
  • JSX is type-safe and errors can be found during compilation
  • React Element creation process abstract;
  • Using JSX to write templates is easier and faster

For developers to use

  • Allows you to define HTML element trees using familiar syntax;
  • Provide more semantic and mobile tags;
  • The program structure is easier to visualize;
  • You can control HTML tags and the code that generates them at any time;
  • It’s native JavaScript.

What are the caveats to using JSX syntax?

  • Render HTML tags and declare variables in lower case
  • The class and for attributes of the tag should be written as className and htmlFor. Tabindex becomes tabIndex. Because the two attributes are JavaScript reserved words and keywords
  • JSX is a hybrid HTML and JavaScript syntax. When < is encountered, JSX is treated as HTML parsing, and when {is treated as JavaScript parsing
  • Expressions are wrapped in {} without quotation marks, which are treated as strings
  • Style ={{color:’red’}}
  • DangerouslySetInnerHTML ={{__html: content}}
  • The label must be closed
  • Custom attributes


Custom attributes

In addition to tag specific attributes, we can also customize some attributes. However, whether these custom properties are displayed on the actual page after rendering is determined by the following rules:

  • Any custom property starting with data- can be displayed on the page after rendering.
  • A custom property that does not start with data- and is not displayed after the page is rendered.


What is an element?

The element is the smallest brick that makes up the React application. The React element is a simple JavaScript object. A React element corresponds to a part of the DOM on the interface and describes the structure and rendering effect of that part of the DOM.

React internally renders the final page DOM based on the React element. More specifically, the React element describes the structure of the React virtual DOM, from which React renders the actual DOM of the page.


Several ways to create elements

  • jsx
  • react.createElement
  • react.cloneElement


Relationships between elements and components?

The React component’s core function is to return the React element. The React component is responsible for calling the React.createElement(), which returns the React element for internal rendering into the final page DOM.


How does the element render?

The React element describes the structure of the virtual DOM. React renders the actual DOM of the page based on the virtual DOM. React Render process

  • (1) Call react.createElement () to compile the js object.
  • (2) Then call ReactDOMComponent(vdom).mountComponent() to turn the virtual DOM into the real DOM
  • Insert DOM tree with appendChild(domNode).

To render React elements to a root DOM node, we need to pass them to the reactdom.render () method


JSX conversion JS

The HTML element

<div></div>
Copy the code
React.createElement("div".null);
Copy the code

The HTML element contains the child text

<div>span</div>
Copy the code
React.createElement("div".null."span");
Copy the code

HTML elements contain attributes

<div id="id" key="key1" style={{display: 'none'}} ref="123">span</div>
Copy the code
React.createElement("div", {
  id: "id".key: "key1".style: {
    display: 'none'
  },
  ref: "123"
}, "span");

Copy the code

HTML elements contain child elements

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

Copy the code
React.createElement(
  "div", 
  {
    id: "id".key: "key1".style: {
      display: 'none'
    },
    ref: "123"
  }, 
  React.createElement("span".null."1"),
  React.createElement("span".null."2"),
  React.createElement("span".null."3"));Copy the code

HTML elements contain component elements

function Component () {
  return <div>component</div>
}

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <Component key="key2" name="rodchen" />
  <span>2</span>
  <span>3</span>
</div>
Copy the code
function Component() {
  return /*#__PURE__*/React.createElement("div".null."component");
}

/*#__PURE__*/
React.createElement(
  "div", 
  {
    id: "id".key: "key1".style: {
      display: 'none'
    },
    ref: "123"
  },

  React.createElement(Component, {
    key: "key2".name: "rodchen"
  }),
  React.createElement("span".null."2"),
  React.createElement("span".null."3"));Copy the code

The HTML element contains the component element contains children

function Component (props) {
  return <div>{props.children}</div>
}

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <Component key="key2" name="rodchen"><span>children</span></Component>
  <span>2</span>
  <span>3</span>
</div>
Copy the code
function Component() {
  return /*#__PURE__*/React.createElement("div".null."component");
}

/*#__PURE__*/
React.createElement(
  "div", 
  {
    id: "id".key: "key1".style: {
      display: 'none'
    },
    ref: "123"
  },

  React.createElement(
    Component, 
    {
      key: "key2".name: "rodchen"
    },
    React.createElement("span".null."children")
  ),
  React.createElement("span".null."2"),
  React.createElement("span".null."3"));Copy the code

Suppose we change the component name to lowercase

Uppercase component name

function Component () {
  return <div></div>
}

<div>
  <Component />
</div>

Copy the code
function Component() {
  return /*#__PURE__*/React.createElement("div".null);
}

/*#__PURE__*/
React.createElement("div".null./*#__PURE__*/React.createElement(Component, null));
Copy the code

Lowercase component name

function component () {
  return <div></div>
}

<div>
  <component />
</div>
Copy the code
function component() {
  return /*#__PURE__*/React.createElement("div".null);
}

/*#__PURE__*/
React.createElement("div".null./*#__PURE__*/React.createElement("component".null));
Copy the code

The component name is uppercase because createElement will parse the component as an HTML element if it is lowercase.