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:

  1. React must be in scope
  2. User-defined components must begin with an uppercase letter
  3. 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