So erstellen Sie Ihre erste React-Seite

Was ist Rract?

React ist eine JavaScript- Bibliothek zum Erstellen von Benutzeroberflächen

Erstellen Sie die Benutzeroberfläche. Unter Benutzeroberfläche versteht man für unser Frontend einfach: HTML-Seite

Javascript-Bibliothek. Es ist kein Framework, es ist eine Bibliothek. Das gesamte React-Paket ist ein Framework.

Eimer der React-Familie:

react: Kernbibliothek react-dom: Dom-Betrieb react-router: Routing, Redux: zentrales Statusmanagement

Hintergrund

Rract ist das Beste! Am häufigsten verwendet auf der Welt

Merkmale

Deklarativ <br /> Verwenden Sie zur Definition der Seite eine HTML-ähnliche Syntax. In React werden Ansichtsänderungen durch Daten gesteuert. Wenn sich die Daten ändern, kann React das DOM effizient aktualisieren und rendern.

Konstante Liste = [
  { id: 1, name: 'Front-end', gehalt: 100000 },
  { id: 2, name: 'Backend', gehalt: 50 }
]

konstanter Titel = (
  <ul>
    {list.map((Element) => (
      <li Schlüssel={item.id}>
        <h3>Klasse {item.name}</h3>
        <p>Gehalt {item.salary}</p>
      </li>
    ))}
  </ul>
)

Komponentenbildung (obwohl jedes Framework diese hat)
Komponenten sind die wichtigsten Inhaltskomponenten in React. Sie werden verwendet, um die Kombination von Teilinhalten auf einer Seite darzustellen. Durch die Wiederverwendung mehrerer Komponenten können Sie die vollständige Seitenfunktionalität erreichen.

Einmal lernen, überall verwenden <br /> Verwenden Sie react/rect-dom zum Entwickeln von Webanwendungen und react/react-native zum Entwickeln nativer mobiler Anwendungen (react-native)
Mit React lassen sich VR-Anwendungen (Virtual Reality) entwickeln

React-Gerüst

Erstellen eines React-Projekts von Grund auf

Installieren Sie zuerst das Gerüstbau-Toolkit global

Befehl: npm i -g create-react-app

Verwenden Sie Gerüstwerkzeuge zum Erstellen von Projekten

Befehl: create-react-app 項目名

Nach der Ausführung erhalten wir einen Ordner wie diesen

Gleich wie Vue-Framework
1. Im src-Verzeichnis schreiben wir Code für die Projektentwicklung
2.index.js ist die Eintragsdatei

Es gibt einen solchen Befehl in package.json

Sie können eingeben

mpn laufen starten
Garnanfang

Ausführen des Projekts

Als nächstes löschen wir alle Dateien unter src und erstellen eine neue index.js
Einführung von React und React-Dom

// React und React-Dom importieren
React von „react“ importieren
ReactDOM von „react-dom“ importieren

Schreiben Sie unsere Struktur in die Mitte

// Element erstellen const title = React.createElement('h1', {}, 'hallo react (geschrieben von createElement)')

Aber createElement ist zu ineffizient, wir können jsx verwenden

Was ist JSX

JSX: ist die Abkürzung für JavaScript XML.

• Schreiben einer XML-Struktur in JS-Code
• Hinweis: JSX ist keine Standard-JS-Syntax, sondern eine Syntaxerweiterung von JS. Das Paket @babel/plugin-transform-react-jsx ist in das Gerüst integriert, um die Syntax zu analysieren.
• React verwendet es, um die UI-Struktur (HTML) zu erstellen

理解：我們之前用html寫頁面，現在是用jsx來寫頁面

const title = <h1>HALLO REACT (geschrieben in jsx)</h1>

Schließlich wird unser Code in public/index.html gerendert, also fügen wir diese Codezeile unten hinzu und rendern sie auf der Seite. Webpack verpackt sie automatisch in Echtzeit, bettet den Code in die Datei public/index.html ein und führt ihn aus.

// React-Element rendern ReactDOM.render(Titel, document.getElementById('root'))

Mit dem obigen Code werden unsere Seiten schließlich im div mit id=root in public/index.html gerendert.

Also haben wir unsere erste React-Seite geschrieben

Dies ist das Ende dieses Artikels zum Erstellen Ihrer ersten React-Seite. Weitere relevante React-Inhalte zum Erstellen Ihrer ersten Seite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!