Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the principle of JSX". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

JSX principle

To understand how JSX works, you need to understand how to use JavaScript objects to represent the structure of a DOM element.

Look at the following DOM structure:

Welcome to the world of React

React.js is a library that helps you build a page UI.

All the information in the above HTML can be represented by the JavaScript object:

{tag: 'paired, attrs: {className:' app', id: 'appRoot'}, children: [{tag:' H2, attrs: {className: 'title'}, children: [' welcome to the world of React']}, {tag: 'paired, attrs: null Children: ['React.js is a library for building page UI']}}

But it's too long to write in JavaScript, and the structure is not clear, so it's convenient to use HTML.

So React.js extends the syntax of JavaScript to allow syntax similar to HTML tag structure to be written in JavaScript code, which is much more convenient, and the compilation process converts the JSX structure similar to HTML into the object structure of JavaScript.

Import React from 'react'import ReactDOM from' react-dom'class App extends React.Component {render () {return (Welcome to the world of React

React.js is a library for building page UI

)}} ReactDOM.render (, document.getElementById ('root'))

Convert to

Import React from 'react'import ReactDOM from' react-dom'class App extends React.Component {render () {return (React.createElement ("p", {className: 'app', id:' appRoot'}, React.createElement ("H2", {className: 'title'}) "Welcome to the world of React"), React.createElement ("p", null, "React.js is a library for building page UI")}} ReactDOM.render (React.createElement (App), document.getElementById ('root')

React.createElement will build a JavaScript object to describe the information about your HTML structure, including tag signatures, attributes, child elements, and so on. The syntax is

React.createElement (type, [props], [... children])

The so-called JSX is actually a JavaScript object, so when using React and JSX, you must go through the process of compilation.

JSX-use react to construct components, bable to compile-> JavaScript object-ReactDOM.render ()-> DOM element-> insert page "what is the principle of JSX" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.