Detaillierte Hinweise zu React für Einsteiger

1. Grundlegendes Verständnis von React

1. Einleitung

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen (mit Fokus auf die Ansicht), die von Facebook als Open Source bereitgestellt wird.

2. Funktionen von React

• Deklarativ
• Komponentenbasiert
• Einmal lernen, überall schreiben (unterstützt Client- und Server-Rendering)
• Effizient
• Einweg-Datenfluss

3. Gründe, warum React effizient ist

• Virtueller DOM, DOM nicht immer direkt manipulieren
• DOM-Diff-Algorithmus, Seitenneuaufbau minimieren

2. Grundlegende Verwendung von React

1. Verwandte JS-Bibliotheken

• `react.js`: Die Kernbibliothek von React
• `react-dom.js`: bietet eine React-Erweiterungsbibliothek zur Manipulation von DOM
• `babel.min.js`: Eine Bibliothek, die JSX-Syntaxcode in reinen JS-Syntaxcode analysiert

2. Importieren Sie die js-Bibliothek in die Seite

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

3. Kodierung

<script type="text/babel"> //Muss babel deklarieren
  // 1. Erstelle ein virtuelles DOM-Element const vDom = <h1>Hello React</h1> // Füge keine Anführungszeichen hinzu // 2. Rendere das virtuelle DOM in den realen DOM-Container der Seite ReactDOM.render(vDom, document.getElementById('test'))
</Skript>

Reagiere mit JSX

1. Virtueller DOM

React bietet einige APIs zum Erstellen eines speziellen allgemeinen JS-Objekts

var element = React.createElement('h1', {id:'meinTitel'},'hallo')

Was oben erstellt wird, ist ein einfaches virtuelles DOM-Objekt

Virtuelle DOM-Objekte werden schließlich von React in echtes DOM umgewandelt

Wenn wir codieren, müssen wir grundsätzlich nur die virtuellen DOM-bezogenen Daten von React bedienen, und React konvertiert sie in echte DOM-Änderungen und aktualisiert die Schnittstelle

2. JSX

• Vollständiger Name: „JavaScript XML“
• React definiert eine XML-ähnliche JS-Erweiterungssyntax: `XML+JS`
• Funktion: Wird zum Erstellen virtueller DOM-Objekte (Elemente) verwendet.

var ele = <h1>Hallo JSX!</h1>

Hinweis 1: Es handelt sich weder um eine Zeichenfolge noch um ein HTML/XML -Tag.

Hinweis 2: Es wird letztendlich ein JS對象generiert

• Beliebiger Tag-Name: HTML-Tag oder anderer Tag
• Beliebiges Tag-Attribut: HTML-Tag-Attribut oder anderes
• Grundlegende Grammatikregeln

Wenn Sie auf einen Code stoßen, der mit < beginnt, analysieren Sie ihn gemäß der Tag-Syntax: HTML-Tags mit demselben Namen werden in HTML-Elemente mit demselben Namen konvertiert, und andere Tags erfordern eine spezielle Analyse

Wenn Sie auf Code stoßen, der mit { beginnt, analysieren Sie ihn mit JS-Syntax: Der JS-Code im Tag muss in { } eingeschlossen sein

• Die Rolle von „babel.js“

Der Browser kann JSX-Code nicht direkt analysieren und muss von Babel in reinen JS-Code übersetzt werden, bevor er ausgeführt werden kann.

Wenn Sie JSX verwenden, müssen Sie type="text/babel" hinzufügen, um anzugeben, dass es von Babel verarbeitet werden muss

3. Rendern virtueller DOM-Elemente

Grammatik:

ReactDOM.render(virtuellerDOM, ContainerDOM)

• Parameter 1: virtuelles Dom-Objekt, erstellt durch reines js oder jsx
• Parameter 2: Das reale DOM-Elementobjekt, das das virtuelle DOM-Element enthält (normalerweise ein Div)

Wirkung:
Rendern Sie die virtuellen DOM-Elemente zur Anzeige in den realen Container-DOM auf der Seite.

4. So erstellen Sie einen virtuellen DOM

Reine JS-Methode

React.createElement('h1',{id:'myTitle'}, Titel

Der JSX-Weg

<h1 id='meinTitel'>{Titel}</h1>

Codebeispiel

<div id="app"></div>
const test1 = 'MEIN TEST 1'
// 1. Virtuelles Dom erstellen: zwei Methoden var element = React.createElement('h3',{id:app},test1)
var element2 = <h3 id={test1}>{test1}</h3>
// 2. Virtuellen Dom rendern
ReactDOM.render(Element, Dokument.getElementById('App'))
ReactDOM.render(element2, document.getElementById('app'))

5. Hallo Welt mit React

Schritt 1: Einführung von react.js-bezogenen Bibliotheken

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

Schritt 2: Definieren Sie das Stammelement

<div id="app"></div>

Schritt 3: React-Code in der Babel-Umgebung schreiben

<Skripttyp="text/babel">
// 1. Erstelle ein virtuelles DOM-Elementobjekt var vDOM = <h1>Hallo W</h1> //Kein String// 2. Rendere das virtuelle DOM in den realen DOM-Container der Seite ReactDOM.render(vDOM,document.getElementById('app'))
</Skript>

Dies ist das Ende dieses Artikels mit ausführlichen Hinweisen für Anfänger von React. Dieser Artikel beschreibt die grundlegenden Konzepte und die grundlegende Verwendung von React sowie einige häufig verwendete JS-Bibliotheken im Zusammenhang mit React. Ich hoffe, er kann Ihnen hilfreich sein.