JSX Profile
const element = <h1>Hello, world!</h1>;
The above is a JSX, I understand (simple to understand variable element with HTML tags).
Description: It is a JavaScript syntax extensions. We recommend that in conjunction with JSX React in, 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."
Why JSX?
React think the rendering logic inherent nature coupled with other UI logic, 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 marker and is separated into different logical files which artificially separated manner, but by the two together in the store unit called loosely coupled "component," and to achieve separation of concerns .
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 also enables React to display more useful error and warning messages.
JSX embedded in the expression
In the following example, we declare a named namevariable, and then use it in the JSX, and wrapped it in braces:
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
In JSX syntax, you can place any valid JavaScript expression in braces. For 2 + 2example, , user.firstNameor formatName(user)are valid JavaScript expression.
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')
);
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.
★ JSX objects that represent
Babel will JSX translated into a named React.createElement()function call.
Two completely equivalent sample code:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);