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 (
      1fb07efbe2524295a719668b214948aa
        345d5db7f2762808d7874072253db7c0欢迎进入React的世界473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846bee
          React.js 是一个构建页面 UI 的库
        94b3e26ee717c64999d7867364b1b4a3
      94b3e26ee717c64999d7867364b1b4a3
    )
  }
}

ReactDOM.render(
    3efbfcf616b81c5b71826e3d65d503c4,
  document.getElementById('root')
)

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!