This is the 7th day of my participation in the August Text Challenge.More challenges in August

What is JSX syntax?

  • JSX is a JavaScript syntax eXtension, also known in many places as JavaScript XML because it looks like an XML syntax
  • It describes our UI interface and its completion can be used in conjunction with JavaScript
  • Same as module syntax in Vue, you don’t need to learn the instructions in module syntax (such as V-for, V-if, V-else, V-bind).

JSX writing specifications

  • The top layer of X can only have one root element, so we often wrap a div primitive around it (or use the Fragment we’ll learn about later).
  • Easy to read, we usually wrap parentheses () around JSX to make it easy to read, and JSX can be written on a new line
  • The labels in the SX can be single or double labels
  • Note: the signature must end with />

JSX use

JSX embedded variables

  • Case 1: If the variable is Number, String, or Array, it can be displayed directly
  • When a variable is null, undefined, or Boolean, the content is null.
  • Object type not valid as a React child

JSX embedded expression

  • Operational expression
  • Ternary operator
  • Execute a function

React Event binding

  • There are two main differences in React event listening
    • Eact events are named in camelCase rather than pure lowercase
  • We need to pass in an event handler with {}, which will be executed when the event occurs;

This binding problem

  • After the event is executed, we may need to get the related properties of the object of the current class, in which case we need this
    • If we just print this here, we’ll see that it’s undefined as well
  • Why undefined?
    • The reason is that we don’t call the btnClick function actively, and React calls it internally when the button changes
  • How to solve this problem?
    • Bind shows bind this to btnClick
    • Use ES6 Class Fields syntax
    • Pass in the arrow function when the event listens (the method I use)

React conditional rendering

  • Conditional statement
  • The ternary operation
  • The and operator &&

JSX nature

  • ReactElement -> createElement -> ReactElement -> createElement

CreateElement takes three arguments:

  • Parameter 1: type

    • The current ReactElement type;
    • If it’s a tag element, use a string for “div”
    • If it’s a component element, use the component name

  • Parameter 2: config

    • All properties in JSX are stored in Config as properties and values of objects

  • Parameter 3: Children

    • The contents of the tag are stored as an array of children