Kennen Sie die JSX-Prinzipien in einem Artikel (empfohlen)

JSX-Prinzipien

Um die Prinzipien von JSX zu verstehen, müssen Sie zunächst verstehen, wie Sie JavaScript-Objekte verwenden, um die Struktur eines DOM-Elements auszudrücken.
Sehen Sie sich die DOM-Struktur unten an:

<div class=&#39;app&#39; id=&#39;appRoot&#39;>
  <h1 class=&#39;title&#39;>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

Wir können JavaScript-Objekte verwenden, um alle Informationen im obigen HTML darzustellen:

{
  tag: 'p',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

Aber das ist zu lang, um es in JavaScript zu schreiben, und die Struktur ist nicht klar HTML ist sehr praktisch.
Daher hat React.js die Syntax von JavaScript erweitert, um das Schreiben einer Syntax ähnlich der HTML-Tag-Strukturen in JavaScript-Code zu ermöglichen, was viel praktischer ist. Der Kompilierungsprozess konvertiert JSX-Strukturen ähnlich wie HTML in JavaScript-Objektstrukturen.

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      <p className=&#39;app&#39; id=&#39;appRoot&#39;>
        <h1 className=&#39;title&#39;>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </p>
    )
  }
}

ReactDOM.render(
    <App />,
  document.getElementById(&#39;root&#39;)
)

Konvertieren in

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "p",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(App),
  document.getElementById('root')
)

React.createElement erstellt ein JavaScript-Objekt, um die Informationen Ihrer HTML-Struktur zu beschreiben, einschließlich Tag-Namen, Attributen, Unterelementen usw. Die Syntax lautet

React.createElement(
  type,
  [props],
  [...children]
)

Das sogenannte JSX ist eigentlich ein JavaScript-Objekt, also müssen Sie bei Verwendung von React und JSX den Kompilierungsprozess durchlaufen

JSX – Verwenden Sie React, um Komponenten zu erstellen, und kompilieren Sie mit Babel –> JavaScript-Objekt – ReactDOM.render() –> DOM-Element –> In die Seite einfügen

Empfohlenes Lernen: „ js-Grundlagen-Tutorial》

Das obige ist der detaillierte Inhalt vonKennen Sie die JSX-Prinzipien in einem Artikel (empfohlen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!