What is the JSX

JSX, is a syntax extension for JavaScript; You can write HTML markup directly in JavaScript code.

const name = "react";
const element = <h1>hello {name}</h1>;
Copy the code

The essence of JSX: It is not a template engine, but a syntactic sugar for dynamically creating components.

const name = "react";
const element = React.createElement(
  h1, // type
  null.// attribute
  "hello "./ /... children
  name
);
Copy the code

How to use

Expressions: Any valid unit of code that?? Expression: Any valid unit of code that returns a value.

1. JSXIt’s an expression in itself

const element = <h1>hello jsx</h1>;
Copy the code

2. Use expressions in attributes

<h1 foo={1 + 2 + 3 + 4}></h1>
Copy the code

3. Support extended operators (…)

const props = { firstName: "".lastName: "" };
<MyComponent {. props} / >;
Copy the code

4. Expressions as child elements

Like any prop, it can pass any type of data, not just the renderable types known to React.

For example, if you have a custom component, you can pass the callback function as props. Children, but make sure that the return value must be a render node:

// Call the child element callback numTimes to generate the component repeatedly
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}
Copy the code

This usage is uncommon, but can be used to extend JSX.

5. Use dot grammar

This comes in handy when you export many React components in one module. For example, if MyComponents.DatePicker is a component, you can use it directly in JSX:

import React from "react";

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>; }};function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}
Copy the code

convention

Custom components start with a capital letter.

  • ReactDefault lowercasetagAs a nativeDOMNodes, such asdiv;
  • All capital letters are custom components,ReactI’m going to look for its definition andrender.

This is not allowed

You cannot use generic expressions as React element types.

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  / / error! The JSX type cannot be an expression.
  return <components[props.storyType] story={props.story} />;
}
Copy the code

If you need to render different components based on prop, you can assign variables that start with a capital letter

function Story(props) {
  / / right! The JSX type can be a variable beginning with a capital letter.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}
Copy the code

advantages

  • The declarative creation interface is more intuitive (classHTML)
  • Code dynamic creation interface is more flexible
  • Syntax is the same as JS, no need to learn a new template language

The resources

  • JSX introduction: zh-hans.reactjs.org/docs/introd…
  • In-depth JSX:zh-hans.reactjs.org/docs/jsx-in…

Introduction to the React

  • React: What were you thinking before writing components?
  • React: Talk about JSX
  • React: Full lifecycle and methods
  • React: Learn about the Virtual Dom and its policies
  • React: Two techniques for component reuse (High order components & Render Props)