First, what isJSX

JSX is an XML-like syntax that can be converted to legitimate JavaScript, usually understood as JavaScript XML, but its transfer syntax is usually implemented on a different basis, with Bable being the most common front-end implementation. JSX was made popular by the React framework.

ReactJSX

JSX in React is a syntactic sugar that allows you to write HTML tags in JS code, which are eventually translated into createElement syntax via table.js and converted into regular JS objects or React elements.

2.1 the React elements

  • The React element describes the React applicationThe smallest unit ofElements describe what is rendered on the page
  • The React element is essentiallyOrdinary JS objectsIts function is to describeReactDOMAnd make sure it ends up being renderedReal DOM
  • The React element itself is immutable

2.2 JSX expression

Typically when you add attributes to elements in JSX, you can use quotes to specify that the attribute value is a String literal

const element = <div tabIndex="0"></div>;
Copy the code

In most cases we will use {} to insert a JavaScript code into the property value

const element = <img src={user.avatarUrl}></img>;
Copy the code

2.3 JSX properties

Instead of HTML, JSX is more JavaScript oriented in terms of presentation and syntax, so properties in JSX often use small camel names to define property names, which is also better to avoid the occurrence of keywords in programs

  • likeclassNeed to be writtenclassName.forNeed to be writtenhtmlFor

2.4 JSX represents objects

The transition to Babel occurs before the code executes, so JSX is essentially the result of the execution of createElement, the object. So JSX can be assigned to variables, passed in as arguments, or returned as values.

Third, in-depthJSX

  • JSX justReact.createElement(conponent,props,... children)Function syntax sugar
  • UppercaseJSX elementsOn behalf of it isThe React components, user – defined components must start in uppercase
  • ReactMust be in scope, since JSX compiles toReact.createElementCall form, soReactLibraries must also be included in the JSX code scope
  • In the JSXpropsacceptJavaScript expression, pay attention toifandforIt’s not a JS expression
  • PropsThe default value istrue
// The following code is equivalent
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
Copy the code
  • Property expansion: If one already existspropsObject that you can use.The expansion operator passes the entire object toJSX
// The following code is equivalent
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
  const props = {firstName: 'Ben'.lastName: 'Hector'};
  return <Greeting {. props} / >;
}
Copy the code

  • Child elements in JSX

    • A string literal type child element that, when translated, clears leading and trailing Spaces and empty lines
    • JSXMultiple child elements are allowedJSX elementscomposition
    <MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>
Copy the code
    • JavaScriptExpressions can be child elements
    // The following code is equivalent
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
Copy the code
    • Function as a child element, as long as the return value is a validJSX object
    • Boolean type,Null,undefinedIs legal JSX but is ignored during rendering
    • && 和 Ternary operator
    
        
     components will only be rendered if showHeader is true    
<div>
  {showHeader && <Header />}	
  <Content />
</div>

<div>
  {showHeader ? <Header />: null; }<Content />
</div>
Copy the code

React17’s JSX conversion

React17 uses JSX without the need to import React. A new version of JSX transformation is available in partnership with Babel, but it works with TypeScript 4.1+ and Babel 7.9.0+.

React/jsX-uses-react and React/react-In-jsX-scope validates React/jsx-scope