This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

JSX syntax is used in react development projects. The main feature of JSX syntax is that it can insert htML-like syntax wherever JavaScript values are used. React uses JSX instead of regular JavaScript.

JSX is a JavaScript syntax extension that looks a lot like XML.

We don’t have to use JSX, but it has the following advantages:

  • JSX executes faster because it is optimized after being compiled into JavaScript code.
  • It is type-safe and errors can be found during compilation.
  • Using JSX to write templates is much easier and faster.
const lut= <h1>love u, tiantian! </h1>;Copy the code

This tag syntax, which may seem odd, is neither a string nor HTML. It’s called JSX, a syntactic extension to JavaScript.

We know that the element is the smallest unit that makes up the React application. JSX is used to declare the element in React.

Unlike the browser DOM element, the React element is actually a normal object. The React DOM ensures that the browser DOM’s data content is consistent with the React element.

To render the React elements into the root DOM node, we render them onto the page by passing them both to reactdom.render () :

Var myDivEle = <div className="lut"> this is a JSX </div>; ReactDOM.render(myDivEle, document.getElementById('name'));Copy the code

We can use JavaScript expressions in JSX. Expressions are written in curly braces {}. Examples are as follows:

var myDivEle = <div> <h1>{520+1314}</h1> </div>; 
ReactDOM.render( myDivEle, document.getElementById('name') );
Copy the code

There are two points to note when using:

  • All HTML tags must be closed if written as<h1>loveAn error will be reported. If it’s a tag that doesn’t have a closing syntax, you have to put a slash at the end of the tag, for example<img src="" />.
  • Any JSX expression can have only one tag at the top level, that is, only one root element. The following is an error.
  • Since JSX is JavaScript, some identifiers are likeclass 和 forIt is not recommended as an XML attribute name. Instead, React DOM usesclassNameandhtmlForTo do the corresponding properties.
Const lut= <h1>tiantian</h1><h1>520</h1>; Const lut= <div><h1>tiantian</h1><h1>520</h1></div>;Copy the code