This is the 14th day of my participation in Gwen Challenge

What is React?

React: React React: React React: React React React is a declarative, efficient and flexible JavaScript library for building user interfaces.

What exactly is declarative programming? To accurately understand the declarative programming, we first need to know what is imperative programming, imperative programming is refers to the detailed tell the computer what to do, to achieve our goal, declarative programming is imperative programming ways, only tell the computer what we want results, as to how the underlying implementation, is not what we care about, This is a generic understanding of declarative programming.

What is a component?

Official definition: The combination of short, independent pieces of code called “components” into a complex UI.

Interpretation: We can be understood as a UI interface can be composed of each individual code fragments, such as a form of code set, the code set of the wheel map, these can constitute a specific function of the code set we call components.

React.com ponent subclass

Let’s take the following code as an example for a detailed analysis:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>); }}Copy the code

ShoppingList is a component class for React. A component receives parameters, called props (” props “is short for” properties “), and then returns the hierarchy of views that need to be displayed on the screen through the Render method. The return value of the Render method describes what you want to see on the screen. React according to the description and show the result. More specifically, Render returns a React element, which is a lightweight description of what is being rendered. Most React developers use a special syntax called “JSX” that makes it easier to write these structures.

Reading:

  1. The parameter that the component receives is called props.
  2. The render method returns the result we see rendered to the screen.
  3. The render function contains JSX syntax, which is different from JS syntax.

JSX grammar

Official description: You can use any JavaScript expression in JSX, just enclose the expression in curly braces. Each React element is actually a JavaScript object that you can pass in your application as a variable or as a parameter.

Reading:

  • It is officially stated that you can use any JS expression in JSX, but you need to enclose it in braces.
  • Note that we are officially talking about JS expressions, so we need to clarify what is a JS expression first. Is an if statement a JS expression? Let’s look at the following example.React generates an error because the if statement isn’t an expression. What is? Keep reading.
  • Definition of an expression: The following definition is excerpted from MDN. An expression is a collection of code that returns a value. See JS expressions (MDN) for a detailed explanation.