What is JSX in react

react JSX is a JavaScript syntax extension that is used in the React architecture. Its format is more like a template language, but in fact it is completely implemented within JavaScript; JSX is a set developed for react.js Syntactic sugar is also the basis for react.js.

The operating environment of this article: windows10 system, react 16, thinkpad t480 computer.

Recommended: "react video tutorial"

What is JSX in react?

JSX is JavaScript XML, which is a format that combines Javascript and XML.

JSX is a syntax extension of JavaScript that is used in the React architecture. Its format is more like a template language, but in fact it is completely implemented within JavaScript. Elements are the smallest unit that constitutes a React application. JSX is used to declare elements in React. React uses JSX to describe the user interface.

JSX is a set of syntactic sugar developed for react.js and is also the basis for react.js. React can still work without using JSX. However, using JSX can improve the readability of components, so it is recommended to use JSX.

This is the official website: http://facebook.github.io/jsx/

Features of JSX

You can write HTML language directly in In the JavaScript language, without any quotation marks, this is the syntax of JSX, which allows the mixing of HTML and JavaScript.

JSX allows JavaScript variables to be inserted directly into templates. If this variable is an array, all members of the array are expanded.

Anti-injection attacks

It is safe to embed user input in JSX;

React DOM will filter all incoming values ​​by default before rendering. It ensures that the application is not vulnerable to injection attacks. All content is converted to strings before rendering. This can effectively prevent XSS (cross-site scripting attacks)

The Babel translator will convert JSX into a method call called React.createElement().

If you want to write jsx syntax in ordinary html, you need to change the script type to text/jsx. This is because React’s unique JSX syntax is incompatible with JavaScript. Wherever JSX is used, type="text/jsx" must be added. Secondly, React provides two libraries: react.js and JSXTransformer.js, which must be loaded first. Among them, the function of JSXTransformer.js is to convert JSX syntax into JavaScript syntax. This step is very time consuming and should be done on the server when it is actually online.

The above is the detailed content of What is JSX in react. For more information, please follow other related articles on the PHP Chinese website!