1 JSX文法
JSXはjavascriptの一種の拡張であり、最終的にはオリジナルのjavascript JSX構築のルールとxhtmlルールが一致するラベルをコンパイルします.任意のネストタグは閉じなければなりません.
1.1 JSXコンポーネント
)オリジナルコンポーネント、例えば

function render() {
  return 
Hello World
}

Reactコンポーネントはカスタムコンポーネントです.

class Hello extends React.Component {
  render() {
    return 
Hello World
;
  }
}
function render() {
  return 

}

注:1.カスタムコンポーネントの頭文字は大文字でなければなりません.そうでなければ、解析時にhtml元のタグによって解析します.さらにエラーを報告します.2.Reactコンポーネントの中にはルートが一つしか存在しない必要があります.並列ルートノードは存在しません.

function render() {
  //   
  return (
    

    

  )
}

---

1.2 JSX属性

定义属性的方式和html属性的方式一样，不同之处是采用驼峰形式，如

class Hello extends React.component {
  render() {
    return 
Hello World
  } 
}
function render() {
  return 

}

注:html生のクラススタイルはクラスName形式に書かなければなりません.JSX文法ではjsの生コードに解析されています.classに触れるとキーワードとして処理されますので、時報が間違っています.
1.3 JSX処理js
JSXでは{}小包jsの内容が使えます.jsの内容を正確に解析することができます.

function render() {
  const text="Hello World";
return 
{text}
}

上記のコードは

Hello World

で解析されます.
1.4 JSXコメント
jsの注釈の書き方を採用するには、括弧を入れる必要があります.

function render() {
  return 

    {/*
           
    */}
  
}

1.5 JSXをjsにコンパイルする

Btn

コンパイル

React.createElement({
  'MyButton',
  {type: "normal", data: 22},
  'Btn'
})

要素を閉じるために、サブラベルが存在しない場合、React.creat Elementメソッドの3番目のパラメータはnullです.
1.6 JSX名前空間(JSXに対して点文法を使う)
カスタムコンポーネントに複数のサブコンポーネントが存在する場合、このようにしてサブコンポーネントを取得することができます.

const MyComponent = {
  DatePicker: function(props) {
    return 
     ：{props.currentYear}
  }
}
function PickerContainer() {
  return 
}

antdのmenuコンポーネントのようです.

import {Menu} from 'antd';
const SubMenu = Menu.SubMenu

本文の目的はただ個人のために探して読んでなど便宜を提供するだけです.