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

Today, the editor would like to share with you what are the relevant knowledge points of JSX in react, the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

1 JSX is an expression

JSX is the grammatical extension of JavaScript and is essentially the grammatical sugar of the React.createElement () method.

Babel translates JSX into a function call called React.createElement (), so it is treated as an expression.

This means that you can use JSX in the code blocks of if statements and for loops, assign JSX to variables, pass in JSX as parameters, and return JSX from functions:

Function getGreeting (user) {if (user) {return Hello, {formatName (user)}!;} return Hello, Stranger.;} 2 JSX attributes 2.1 Hump naming

JSX is an extension of JS, so hump naming is used to define attribute names instead of the naming convention for HTML attribute names

For example:

Class writes className in the above JSX expression.

2.2 style receives an object

Style receives an object instead of a string

For example:

Let style = {width: "100px", height: "100px", background: "red"}; ReactDOM.render (, document.querySelector ("# root")); 3 the JSX tag has no child elements

If there is no content in a tag, you can use / > to close the tag

For example:

Const element =

; 4 JSX prevents injection attacks

User input can be safely inserted in JSX

React DOM escapes by default before rendering all input. It ensures that content that is not explicitly written by you will never be injected into your application. All the content is converted to a string before rendering. This can effectively prevent XSS attacks.

5 unique parent element

A JSX expression must have a parent element

In other words, the following writing will report an error.

ReactDOM.render (, document.querySelector ("# root"))

The correct way to write:

ReactDOM.render (, document.querySelector ("# root"))

If we don't want the parent element to be rendered on the page, we can use React.Fragment

The React.Fragment component can return multiple elements in the render () method without creating additional DOM elements.

Render () {return (Some text. A heading);}

You can also use its shorthand syntax, see React v16.2.0: Fragments support improvements.

Render () {return (Some text. A heading);} these are all the contents of this article entitled "what are the points for attention of JSX in react". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.