See Github for a full translation of the React documentation and related code

Let’s start with the following code snippet:

const element = <h1>Hello, world! </h1>;Copy the code

This interesting tag expression is neither a string nor an HTML tag. It’s called JSX, and it’s an extension to JavaScript. We recommend using JSX to describe the UI in React. JSX may remind you of a templating language that takes full advantage of JavaScript features. JSX creates the React element. We’ll learn how to render it into the DOM in the next section. Next, we’ll look at the basic usage of JSX.

1. Embed expressions in JSX

In JSX, you can embed any JavaScript expression with {}. Expressions such as 2+2, user.firstName, and formatName(user) are valid:

function formatName(user) {
          return user.firstName + ' ' + user.lastName;
          }
        const user = {
          firstName: 'Harper',
          lastName: 'Perez'
          };
        const element = (
          <h1>
            Hello, {formatName(user)}!
          </h1>
          );
        ReactDOM.render(
          element,
          document.getElementById('root')
          );
        Copy the code

Try it in CodePen

For readability purposes, we split JSX into multiple lines. But it’s not mandatory. When branches are needed, we recommend enclosing them with parentheses () to avoid JS’s automatic insertion mechanism ASI

2.JSX is also an expression

When compiled, JSX expressions become regular JavaScript objects. This means you can use JSX to use if statements and for loops and so on:

function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}! </h1>; } return <h1>Hello, Stranger.</h1>; }Copy the code

3. Use JSX to specify label attributes

You can specify strings as attributes using quotes “” :

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

It is also possible to embed JavaScript expressions as attributes using parentheses {} :

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

However, do not use double quotes when assigning values via JavaScript expressions without attributes. Otherwise, JSX treats it as a string rather than a JavaScript expression. For strings, we can simply use “” as the attribute value; For expressions, we can use {} as an attribute value. But don’t mix them.

4. Specify child elements using JSX

When a tag has no value, you can close it with /> :

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

JSX tags can contain child elements:

const element = ( <div> <h1>Hello! </h1> <h2>Good to see you here.</h2> </div> );Copy the code

Note that since JSX is more similar to JavaScript than HTML, the React DOM uses hump names instead of attribute names in HTML. For example, JSX uses className instead of class and tabIndex instead of tabIndex

5.JSX can protect against injection attacks

Embedding user input directly in JSX is safe:

const title = response.potentiallyMaliciousInput;
        // This is safe:
        const element = <h1>{title}</h1>;
        Copy the code

The React DOM encodes any embedded values by default before rendering. This prevents the application from being injected and can prevent XSS attacks.

6.JSX represents an object

Babel compiles JSX to a react.createElement () call. The following two ways of writing are consistent:

const element = (
          <h1 className="greeting">
            Hello, world!
          </h1>
          );
        Copy the code

const element = React.createElement(
          'h1',
          {className: 'greeting'},
          'Hello, world!'
          );
        Copy the code

React.createelement () does some syntactic checking, but its core function is to create an object that looks like this:

const element = {
          ...
          type: 'h1',
          props: {
            className: 'greeting',
            children: 'Hello, world'
          }
          ...
          };
        Copy the code

These objects are called React elements. We can think of it as a description of what we want to put on screen. React reads these objects and uses them to build the DOM and keep it updated. We’ll learn how to render the React element into the DOM in the next section. For both ES6 and JSX to be highlighted in the editor, we recommend that you set your editor to the “Babel” syntax scheme.

This article was first publishedwww.miaoyunze.com/Please indicate the source

NewerReact tutorial – 1. Hello World
OlderUse JS to judge the current network status on the client