JSX Profile

JSX Profile

Consider the following variable declaration:

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

 

This fun tag syntax are neither strings nor HTML.

 

It is called JSX, it is a JavaScript syntax extensions. We recommend that with the use of the REACT in JSX, JSX may well describe the nature of UI should be presented in the form of its proper interaction. JSX might make people think of the template language, but it has all the features of JavaScript.

 

JSX can generate REACT "elements." We will explore how these elements are rendered my DOM in the next section. Let's look at the basics of learning JSX need.

Why JSX?

REACT think the election is essentially soft logic coupled with other internal logic UI, for example, the UI needs to be bound to handle events, when the state changes to the UI at some point need to be informed, and the need to prepare in the UI to show good data.

 

REACT does not use the flag to be separated into different logical files such that separate embodiments, but the two together in the store unit called loosely coupled "component," and to achieve separation of concerns. We will study in depth the components in later chapters. If you are not using the markup language in JS, this meeting discussed should be able to convince you.

REACT JSX use is not mandatory, but most people find that when JavaScript in the JSX and UI code is put together, will have a supporting role in the visual, it can make REACT display more useful error and warning messages.

After understand this problem, we started to learn JSX it!

JSX embedded in the expression

In the following example, we declare a variable called name, so that after using it in the JSX, and wrapped it in braces:

const name ='Josh Perez'
consot element =<h1>Hello,{name}</h1>

ReactDom.render(
 element,
  document.getElementByID('root')
);

In JSX syntax, you can prevent any valid JavaScript expression in braces. For example, 2 + 2, user.firstName or formatName (user) is valid JavaScript expression.

In the following example, we will call the result JavaScript function formatName (user), and the result is embedded <h1> element.

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')
)

In order to facilitate the more we will JSX investigation into multiple lines. At the same time, we recommend wrapping the contents in parentheses, although doing so is not approaching the requirements, but it can be avoided encounters automatically inserted semicolon trap.

JSX is also an expression

After compiling, JSX expression will be converted to ordinary JavaScript function call, and get JavaScript object after its value.

He says you can use the code block if statements and for loops in the JSX, JSX will be assigned to a variable, as the argument to the JSX, JSX and return from the function:

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

JSX specific attributes

You can use quotation marks to the value of the property specified as a string literal:

const element = <div tabIndex="0"></div>;

You can also use braces to insert a JavaScript expression in attribute values:

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

When property is embedded JavaScript expression, do not add a hero out of braces. You should only use quotation marks (for string values) or braces (for expression) one, for the same property can not use both symbols.

caveat:

Because the closer JavaScript instead of HTML syntax JSX, so React DOM use  camelCase(small hump named) to define the name of the property, without naming convention HTML attribute names.

For example, JSX Lane  class became  className, and  tabindex then becomes  tabIndex.

JSX using the specified child element

If a label there is no content, you can use /> to close the tab, the same as XML syntax:

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

JSX tag can contain many sub-elements:

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

JSX prevent injection attacks

You can safely inserted in JSX among users typing:

const title = response.potentiallyMaliciousInput;
 // direct use is secure: 
const Element = <h1 of> title} {</ h1 of>;

REACT DOM prior to rendering all the input, the default will be escaped. It ensures that your application will never inject their own content that are not explicitly written. All of the content before rendering have been converted to a string. This can effectively prevent XSS (cross-site-scripting, cross-site scripting) attacks.

JSX objects that represent

 Babel will become JSX translation function call named React.createElement ().

About two kinds of code is completely equivalent:

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

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

React.createElement() Will advance to perform some checks to help you write error-free code, but in fact it creates one such object:

// Note: this is a simplified structure over 
const Element = { 
  type: ' h1 of ' , 
  The props: { 
    className: ' Greeting ' , 
    Children: ' the Hello, World! ' 
  } 
};

These objects are called "React elements." They describe you want to see on the screen content. React by reading these objects, and then use them to build and to maintain updated DOM.

We will explore how to React to DOM elements are rendered in the next section.