From a React user’s perspective, one of React’s biggest features is JSX
In JSX syntax, you can place any valid JavaScript expression within curly braces {}; In other words, React executes the code in {}.
CreatElement (Component, props,… Children), so you can write JSX inside {}; So the React component has a natural advantage in rendering dynamic components.
- In-depth JSX
Tips: JSX use precautions:
- React must be in scope
- User-defined components must begin with an uppercase letter
- Attributes are named in small camelCase rather than pure lowercase
function
const user = {
firstName: 'react'.lastName: 'jsx',}function getName({ firstName, lastName }) {
return firstName + ' ' + lastName
}
return (
<div>{getName(user)}</div>
)
Copy the code
object
const great = <p>good</p>
return (
<div>{great}</div>
)
Copy the code
Conditional statements
const show = true;
const greet = <div>good</div>;
const jsx = (
<div>{/* Conditional statement */} {show? greet : "Welcome to JSX"} {show && greet}</div>
);
Copy the code
An array of
const a = [0.1.2];
const jsx = (
<div>{/ * * /} array<ul>{/* diff (type => key) {/* diff (type => key) {/* diff (type => key);<li key={item}>{item}</li>
))}
</ul>
</div>
);
Copy the code
- codepen