Erste Schritte mit React: Ein Anfängerleitfaden

reagt, eine JavaScript -Bibliothek, die in der Entwicklungsindustrie beliebt ist, vereinfacht den Prozess des Erstellens einer interaktiven Benutzeroberfläche, und der Anwendungsbereich deckt Webseiten, mobile Terminals und Desktop -Plattformen ab. Viele Unternehmen auf der ganzen Welt, darunter Riesen wie Netflix und Airbnb, verwenden React.

Mit diesem Leitfaden werden Sie schnell mit React mit React und Erklären der Kernkonzepte erkrankt. Wir werden das Tool Create React App verwenden, um ein Projekt schnell zu erstellen und eine einfache React -Anwendung schrittweise zu erstellen. Nach der Studie werden Sie die Grundlagen von React beherrschen und auf weitere Studien vorbereitet sein.

Vorsichtsmaßnahmen

Vor dem Lernen React ist es am besten, das Grundkenntnis von HTML, CSS und JavaScript zu haben. Das Verständnis von Node.js und NPM -Paketmanagern kann auch beim Lernen helfen.

Dieses Tutorial erfordert die Installation von Knoten und NPM auf Ihrem Computer. Sie können auf die Node.js -Download -Seite zugreifen, um die erforderliche Version herunterzuladen (NPM ist mit Knoten gebündelt). Alternativ können Sie sich auf unser Tutorial verweisen, um den Knoten mit Versionsmanager zu installieren.

Schlüsselpunkte

• React ist eine JavaScript -Bibliothek, die sich auf den Erstellen von Benutzeroberflächen konzentriert und von Unternehmen wie Netflix und Airbnb häufig verwendet wird.
• Bevor Sie anfangen, React zu lernen, müssen Sie über das Grundkenntnis von HTML, CSS, JavaScript, Node.js und NPM verfügen.
• React-Anwendungen basieren auf wiederverwendbaren Komponenten, die klassenbasierte oder funktionsbasiert sein können und aufgrund der Entstehung von Hooks immer beliebter werden.
Die virtuelle DOM von
• React verbessert die Leistung, indem die HTML -DOM gemäß den Änderungen des UI -Komponentenzustands effizient aktualisiert wird.
• JSX ist eine in React verwendete Syntaxverlängerung, mit der das Schreiben von HTML-ähnlichen Code in JavaScript-Dateien zur Verbesserung der Entwicklungserfahrung und der Lesbarkeit ermöglicht wird.
• reagierte Komponenten können direkt unter Verwendung von Inline -Stilen oder externen CSS gestaltet werden.

Was ist reagiert?

React ist eine JavaScript -Bibliothek zum Erstellen von UI -Komponenten. Im Gegensatz zu vollständigeren Frameworks wie Angular oder Vue verarbeitet React nur Ansichtsschichten, sodass Sie andere Bibliotheken für das Routing, das staatliche Management und vieles mehr bearbeiten. Dieser Leitfaden konzentriert sich auf die optimalen Funktionen von React.

React -Anwendungen werden unter Verwendung wiederverwendbarer UI -Komponenten erstellt, die miteinander interagieren können. React-Komponenten können klassenbasierte Komponenten oder sogenannte Funktionskomponenten sein. Klassenbasierte Komponenten werden mit der ES6-Klasse definiert, während Funktionskomponenten grundlegende JavaScript-Funktionen sind. Diese Funktionen werden normalerweise mit Pfeilfunktionen definiert, das Funktionsschlüsselwort kann jedoch auch verwendet werden. Eine klassenbasierte Komponente implementiert eine Renderfunktion, die einige JSX zurückgibt (eine Erweiterung von React auf reguläre JavaScript, um Reaktelemente zu erstellen), während die Funktionskomponente JSX direkt zurückgibt. Wenn Sie noch nie von JSX gehört haben, machen Sie sich keine Sorgen, wir werden später detaillierter eingehen.

React -Komponenten können auch in staatliche Komponenten und Staatlose Komponenten unterteilt werden. Die Aufgabe einer staatenlosen Komponente besteht einfach darin, die von der übergeordneten React -Komponente empfangenen Daten anzuzeigen. Wenn es Ereignisse oder Eingaben empfängt, können diese Ereignisse oder Eingaben einfach an seine übergeordnete Komponente geleitet werden.

Andererseits ist die staatliche Komponente für die Aufrechterhaltung eines bestimmten Anwendungszustands verantwortlich. Dies kann dazu beitragen, dass Daten aus externen Quellen abgerufen werden oder verfolgt, ob der Benutzer angemeldet ist. Statistische Komponenten können ihren Status als Antwort auf Ereignisse und Eingaben aktualisieren.

Nach Erfahrung sollten Sie so weit wie möglich staatenlose Komponenten schreiben. Diese Komponenten sind einfacher in Ihren Anwendungen und anderen Projekten wiederverwenden.

Verständnis des virtuellen Dom

Bevor Sie mit dem Codieren beginnen, müssen Sie wissen, dass React ein virtuelles DOM verwendet, um das Seitenrendern zu verarbeiten. Wenn Sie mit JQuery vertraut sind, wissen Sie, dass es Webseiten direkt über HTML DOM manipulieren kann. In vielen Fällen hat diese direkte Interaktion wenig bis gar kein Problem. In einigen Fällen, wie z. B. einer hoch interaktiven Echtzeit-Webanwendung, kann die Leistung jedoch stark beeinflusst werden.

Um dieses Problem zu lösen, wurde eine virtuelle DOM (Speicherdarstellung von realem DOM) erfunden, die derzeit von vielen modernen UI -Frameworks (einschließlich React) verwendet wird. Im Gegensatz zu HTML DOM ist Virtual DOM einfacher zu bedienen und kann eine große Anzahl von Vorgängen in Millisekunden abwickeln, ohne die Seitenleistung zu beeinträchtigen. React vergleicht regelmäßig Virtual DOM und HTML DOM. Die Differenz wird dann berechnet und auf das HTML -DOM angewendet, um sie mit dem virtuellen DOM zu entsprechen. Auf diese Weise stellt React sicher, dass Ihre Anwendung mit stetigen 60 Bildern pro Sekunde wiedergegeben wird, was bedeutet, dass Benutzer fast keine Verzögerung erleben.

Starten Sie ein leeres React -Projekt

Basierend auf den Voraussetzungen gehe ich davon aus, dass Sie die Knotenumgebung eingerichtet haben und die neueste Version von NPM (oder optionalem Garn) installiert haben.

Als nächstes werden wir die React -App erstellen, um unsere erste React -App zu erstellen, ein offizielles Versorgungsskript zum Erstellen einer einzigen Seiten -React -App.

Lassen Sie es uns jetzt installieren:

<code>npm i -g create-react-app</code>

Verwenden Sie es dann, um eine neue React -App zu erstellen.

<code>create-react-app message-app</code>

Abhängig von Ihrer Internetverbindungsgeschwindigkeit kann dies eine Weile dauern, bis dies zum ersten Mal den Befehl create-react-App ausgeführt wird. Im Prozess sind viele Pakete installiert, die für die Einrichtung einer bequemen Entwicklungsumgebung erforderlich sind - einschließlich Webservern, Compilern und Testwerkzeugen.

Wenn Sie nicht zu viele Pakete global installieren möchten, können Sie auch NPX verwenden, sodass Sie das Paket herunterladen und ausführen können, ohne es zu installieren:

<code>npx i -g create-react-app</code>

Ausführen einer dieser beiden Befehle sollte so etwas wie Folgendes ausgeben:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Führen Sie nach Abschluss des Projekteinrichtungsvorgangs den folgenden Befehl aus, um Ihre React -Anwendung zu starten:

<code>cd message-app
npm start</code>

Sie sollten die folgende Ausgabe sehen:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Ihr Standardbrowser sollte automatisch gestartet werden. Sie sollten einen Bildschirm wie folgt sehen:

Jetzt, da wir bestätigt haben, dass unser Einführungs -React -Projekt ohne Fehler ausgeführt wird, sehen wir sehen, was hinter den Kulissen vor sich geht. Sie können die Ordnernachricht mit Ihrem bevorzugten Code-Editor öffnen. Beginnen wir mit der Datei package.json:

<code>npm i -g create-react-app</code>

Wie Sie sehen, hat die App create react App für uns mehrere Abhängigkeiten installiert. Die ersten drei beziehen sich auf die React -Testbibliothek, die uns (wie Sie vielleicht erraten) ermöglicht, unseren React -Code zu testen. Dann haben wir React und React-DOM, das Kernpaket für jede React-Anwendung und schließlich React-Skripte, die die Entwicklungsumgebung einrichten und den Server starten (Sie haben es gerade gesehen).

Dann gibt es vier NPM -Skripte zur Automatisierung von Wiederholungsaufgaben:

• Starten Sie den Entwicklungsserver
• Erstellen Sie eine produktionsbereite Version der Anwendung
• Testlauf des oben genannten Tests
• Auswurf enthüllt die Entwicklungsumgebung der Anwendung

Der letzte Befehl ist im Detail zu erklären. Das Tool Create React App bietet eine klare Unterscheidung zwischen Ihrem tatsächlichen Code und Ihrer Entwicklungsumgebung. Wenn Sie NPM Run Eject ausführen, versteckt die App Create React -App nicht mehr, was sie hinter den Kulissen tut, und steckt alles in die Paket.json -Datei des Projekts. Dies gibt Ihnen zwar eine stärkere Kontrolle über die Abhängigkeiten Ihrer Anwendung, aber ich empfehle Ihnen, dies nicht zu tun, da Sie alle in Ihren Build- und Testprojekten verwendeten komplexen Code verwalten müssen. Wenn Sie möchten, können Sie den Anpassungs-CRA verwenden, um den Build-Prozess ohne auftauchen zu konfigurieren.

React App erstellen unterstützt auch ESLINT (wie aus der EslintConfig-Eigenschaft hervorgeht) und wird unter Verwendung von React-App-Eslint-Regeln konfiguriert.

Mit der BrowsersList -Eigenschaft der Datei

package.json können Sie eine Liste der Browser angeben, die die Anwendung unterstützt. Diese Konfiguration wird von Konvertern wie POSTCSS -Tools und Babel verwendet.

Eine der coolsten Funktionen der React -App erstellen ist, dass sie ein heißes Nachladen außerhalb der Box bietet. Dies bedeutet, dass Änderungen, die wir am Code vornehmen, den Browser automatisch aktualisiert werden. Änderungen am JavaScript -Code laden die Seite neu, während Änderungen an CSS das DOM ohne Nachladen aktualisieren.

Lassen Sie uns nun den Entwicklungsserver zuerst stoppen, indem Sie Strg c drücken. Nachdem der Server gestoppt wurde, löschen Sie alles außer dem Serviceworker.js und setuptests.js -Dateien im SRC -Ordner. Wenn Sie daran interessiert sind, die Rolle von Dienstangestellten zu verstehen, können Sie hier mehr erfahren.

Andere, dass wir den gesamten Code von Grund auf erstellen, damit Sie alles im SRC -Ordner verstehen können.

Einführung in die JSX -Syntax

React -Dokumentation definiert JSX als "grammatikalische Erweiterung für JavaScript", wodurch es einfach ist, React -Komponenten zu schreiben. Mit JSX können wir HTML -Strukturen übergeben oder Elemente reagieren, wie wir es mit Standard -JavaScript -Werten tun.

Dies ist ein einfaches Beispiel:

<code>create-react-app message-app</code>

achten Sie auf diese Zeile const message = <h1>I'm a heading</h1>;. Dies ist JSX. Wenn Sie versuchen, es in einem Webbrowser auszuführen, gibt es einen Fehler. In React -Anwendungen wird JSX jedoch von einem Konverter (wie Babel) interpretiert und als JavaScript -Code gerendert, den React verstehen kann.

Hinweis: Sie können mehr über JSX in unserem Tutorial "Anfänger von JSX" erfahren.

In der Vergangenheit werden JSX -Dateien reagiert, mit denen die Erweiterung von .jsx -Datei verwendet wird. Jetzt generiert das Tool Create React App React -Dateien mithilfe der .js -Dateierweiterung. Während die .JSX -Dateierweiterung noch unterstützt wird, empfehlen React -Wardierer die Verwendung von .js. Es gibt jedoch auch eine Gruppe von gegnerischen React -Entwicklern (ich eingeschlossen), die es aus folgenden Gründen lieber die .jsx -Erweiterung verwenden:

• In vs Code kann EMMET für .jsx -Dateien nicht in der Box verwendet werden. Sie können jedoch VS -Code so konfigurieren, dass alle .js -Dateien als JavascripTreact behandelt werden, damit EMMET an diesen Dateien arbeiten kann.
• Standard -JavaScript- und React -JavaScript -Code haben unterschiedliche FINT -Regeln.

In diesem Tutorial werde ich jedoch dem folgen, was die Create -React -App bietet und am Ende der .js -Datei festhalten.

"Hallo, Welt!" In React

Beginnen Sie mit dem Schreiben von Code. Erstellen Sie im SRC-Ordner der neu erstellten Nachrichten-App eine Index.js-Datei und fügen Sie den folgenden Code hinzu:

<code>npm i -g create-react-app</code>

Verwenden Sie erneut npm start oder yarn start, um den Entwicklungsserver zu starten. Ihr Browser sollte Folgendes anzeigen:

Dies ist das grundlegendste "Hello World" -Reaktionsbeispiel. Die Index.js -Datei ist das Stammverzeichnis des Projekts, in dem die React -Komponente gerendert wird. Lassen Sie mich erklären, wie der Code funktioniert:

• Zeile 1: Importieren Sie das React -Paket, um die JSX -Verarbeitung zu verarbeiten.
• Zeile 2: Importieren Sie das Reactdom -Paket, um die Root React -Komponente zu rendern.
• Zeile 3: Rufen Sie die Renderfunktion auf, geben Sie in:
  weiter
  • <h1>Hello World</h1>: Ein JSX -Element
  • document.getElementById('root'): Ein HTML -Container (das JSX -Element wird hier gerendert).

HTML -Container befindet sich in der Datei öffentlich/index.html. In Zeile 31 sollten Sie <div> </div> sehen. Dies wird als Root -DOM -Knoten bezeichnet, da alles darin vom React Virtual DOM verwaltet wird.

Während JSX HTML sehr ähnlich aussieht, gibt es einige wichtige Unterschiede. Sie können beispielsweise das Klassenattribut nicht verwenden, da es sich um ein JavaScript -Schlüsselwort handelt. Verwenden Sie stattdessen stattdessen den Klassennamen. Zusätzlich werden Ereignisse wie Onclick in JSX Onclick geschrieben. Ändern wir jetzt unseren Hello World Code:

<code>npm i -g create-react-app</code>

Ich habe meinen JSX -Code in eine konstante Variable bezeichnet, die als Element bezeichnet wird. Ich habe auch das H1 -Tag durch das Div -Tag ersetzt. Damit JSX funktioniert, müssen Sie die Elemente in ein übergeordnetes Tag einwickeln.

Sehen Sie sich das folgende Beispiel an:

<code>create-react-app message-app</code>

Der obige Code funktioniert nicht. Sie erhalten einen Syntaxfehler, der angibt, dass Sie benachbarte JSX -Elemente in das beigefügte Tag einbeziehen müssen. So wie folgt:

<code>npx i -g create-react-app</code>

Wie berechnet man JavaScript -Ausdrücke in JSX? Sehr einfach. Verwenden Sie einfach lockige Zahnspangen wie folgt:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

… oder wie folgt:

<code>cd message-app
npm start</code>

Aktualisieren Sie Ihren Code und bestätigen Sie, dass der Browser "Hallo, Jane Doe" anzeigt. Versuchen Sie andere Beispiele wie {5 2} <code>{5 2}. Nachdem Sie die Grundlagen von JSX haben, lassen Sie uns eine React -Komponente erstellen.

react component

deklarieren

Das obige Beispiel ist eine einfache Möglichkeit, Ihnen zu zeigen, wie Reactdom.render () funktioniert. Typischerweise umfassen wir alle Projektlogik in einer React -Komponente und übergeben sie an die Funktion reactdom.render.

Erstellen Sie im SRC -Ordner eine Datei mit dem Namen app.js und geben Sie den folgenden Code ein:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Hier erstellen wir eine React -Komponente, indem wir eine JavaScript -Klasse definieren, die eine Unterklasse von react.comPonent ist. Wir definieren auch eine Renderfunktion, die ein JSX -Element zurückgibt. Sie können andere JSX -Code in das Tag <div> <code><div> einfügen. Aktualisieren Sie als Nächst <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-json&quot;&gt;{ &quot;name&quot;: &quot;message-app&quot;, &quot;version&quot;: &quot;0.1.0&quot;, &quot;private&quot;: true, &quot;dependencies&quot;: { &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;, &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;, &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;, &quot;react&quot;: &quot;^16.13.1&quot;, &quot;react-dom&quot;: &quot;^16.13.1&quot;, &quot;react-scripts&quot;: &quot;3.4.3&quot; }, &quot;scripts&quot;: { &quot;start&quot;: &quot;react-scripts start&quot;, &quot;build&quot;: &quot;react-scripts build&quot;, &quot;test&quot;: &quot;react-scripts test&quot;, &quot;eject&quot;: &quot;react-scripts eject&quot; }, &quot;eslintConfig&quot;: { &quot;extends&quot;: &quot;react-app&quot; }, &quot;browserslist&quot;: { &quot;production&quot;: [ &quot;&gt;0.2%&quot;, &quot;not dead&quot;, &quot;not op_mini all&quot; ], &quot;development&quot;: [ &quot;last 1 chrome version&quot;, &quot;last 1 firefox version&quot;, &quot;last 1 safari version&quot; ] } }&lt;/code&gt;</pre> Erstens importieren wir die App -Komponente. Dann rendern wir die App im JSX -Format wie folgt: <code> <app></app> <p>. Dies ist erforderlich, damit JSX es in ein Element kompilieren kann, das auf den reagierten Dom gedrückt werden kann. Überprüfen Sie nach dem Speichern der Änderungen Ihren Browser, um sicherzustellen, dass er die richtige Nachricht macht. <code><app></app>

Als nächstes lernen wir, wie man Stile anwendet.

Setzen Sie den Stil von JSX -Elementen

Es gibt verschiedene Möglichkeiten, Reaktionskomponenten zu stylen. In diesem Tutorial werden wir zwei Methoden einführen:

jsx Inline -Stil
externes Stilblatt

Folgendes ist ein Beispiel dafür, wie wir den JSX -Inline -Stil implementieren:

<code class="language-javascript">import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}</code>

reagierte Stile sehen reguläres CSS sehr ähnlich, aber es gibt einige wichtige Unterschiede. Zum Beispiel ist HeaderSyle ein Objektliteral. Wir können Semikolons nicht wie normalerweise verwenden. Darüber hinaus wurden viele CSS -Deklarationen geändert, um sie mit der JavaScript -Syntax kompatibel zu machen. Zum Beispiel verwenden wir Textdekoration anstelle von Textdekoration. Grundsätzlich wird die Kamel -Nomenklatur für alle CSS -Schlüssel verwendet, mit Ausnahme von Anbieterpräfixen wie WebkitTransition, die mit Großbuchstaben beginnen müssen.

Wir können den Stil auch auf diese Weise implementieren:

<code>npm i -g create-react-app</code>

Die zweite Methode besteht darin, ein externes Stylesheet zu verwenden. Standardmäßig werden bereits externe CSS -Stylesheets unterstützt. Wenn Sie einen Präprozessor wie SASS verwenden möchten, wenden Sie sich an die Dokumentation, um zu erfahren, wie Sie ihn konfigurieren.

Erstellen Sie im SRC -Ordner eine Datei namens app.css und geben Sie den folgenden Code ein:

<code>create-react-app message-app</code>

Fügen Sie die folgende Import -Anweisung oben in der Datei src/app.js hinzu:

<code>npx i -g create-react-app</code>

Nach dem Speichern sollten Sie eine große Änderung der Größe des Textinhalts in Ihrem Browser feststellen. Sie können auch CSS -Klassen wie folgt verwenden:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

src/app.js wie folgt aktualisieren:

<code>cd message-app
npm start</code>

Wir können das Klassenattribut von HTML nicht verwenden, da es sich um ein reserviertes JavaScript -Schlüsselwort handelt. Stattdessen verwenden wir Klassenname. Hier ist die Ausgabe, die Sie erwartet haben:

Jetzt, da Sie gelernt haben, wie Sie Ihrem React -Projekt Stile hinzufügen, lernen wir weiterhin staatenlose und staatliche React -Komponenten.

als staatenlose und staatliche Komponenten

Staurosekomponente, auch als dumme Komponente bezeichnet, ist nur eine Komponente, die Informationen anzeigt. Es enthält keine Logik für Betriebsdaten. Es kann Ereignisse vom Benutzer empfangen und sie dann zur Verarbeitung an den übergeordneten Container weitergeben.

Erstellen Sie die Datei message-view.js und kopieren Sie den folgenden Beispielcode in sie. Hier ist ein perfektes Beispiel für eine dumme Komponente (obwohl sie technisch eher einer statischen Komponente ähnelt):

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Verwenden Sie als nächstes den folgenden Code, um SRC/app.css:

einige grundlegende Stile hinzuzufügen.

<code class="language-json">{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</code>

ändern Sie schließlich src/app.js so, dass die gesamte Datei so aussieht:

<code class="language-javascript">import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}</code>

Der Code sollte bisher sehr leicht zu verstehen sein, wie ich die bisherigen Konzepte erklärt habe. Überprüfen Sie nun Ihren Browser und Sie sollten die folgenden Ergebnisse erhalten:

Wir haben früher erwähnt, dass React sowohl klassenbasierte als auch funktionsbasierte Komponenten bereitstellt. Wir können die MessageView mithilfe der Funktionssyntax wie folgt umschreiben:

<code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));</code>

Beachten Sie, dass ich den Komponentenimport entfernt habe, da er in der Funktionssyntax nicht benötigt wird. Dieser Stil mag zunächst verwirrend sein, aber Sie werden bald erfahren, dass das Schreiben von React -Komponenten schneller ist.

Darüber hinaus ist diese Art der Schreibreakt -Komponenten mit der Entstehung von React -Hooks immer beliebter geworden.

Daten über Props

übertragen

Sie haben erfolgreich eine staatenlose React -Komponente erstellt. Es ist jedoch nicht vollständig, da einige zusätzliche Arbeiten erforderlich sind, um sich in staatliche Komponenten oder Container ordnungsgemäß zu integrieren. Derzeit zeigt MessageView statische Daten an. Wir müssen es so ändern, dass es Eingabeparameter akzeptieren kann. Wir verwenden sogenannte Requisiten, um dies zu erreichen - die Daten, die wir aus der übergeordneten Komponente übergeben.

Ändern Sie zunächst die MessageView -Komponente wie folgt:

<code>npm i -g create-react-app</code>

Die Hauptsache, die hier zu beachten ist, ist, wie wir Nachrichtenvariablen definieren. Wir weisen es this.props.message zu und geben es von der statigen übergeordneten Komponente ab. Dann können wir in unserem JSX unsere Nachrichtenvariable verweisen und auf die Seite ausgeben.

Erstellen wir nun eine übergeordnete Komponente für die MessageView. Erstellen Sie eine neue Datei mit dem Namen message-list.js und fügen Sie den folgenden Code hinzu:

<code>create-react-app message-app</code>

Hier verwenden wir Status, um ein Objekt zu speichern, das unsere Nachricht enthält. Die Magie von React ist, dass die Komponente, wenn sich das Statusobjekt ändert, die Komponente neu geführt wird (und somit die Benutzeroberfläche aktualisieren).

In unserem JSX übergeben wir dann die Nachrichteneigenschaft des Statusobjekts an die MessageView -Komponente.

Der letzte Schritt besteht darin, unsere App -Komponente zu aktualisieren, um eine neue staatliche Messagelist -Komponente anstelle der staatslosen MessageView -Komponente zu rendern:

<code>npx i -g create-react-app</code>

Überprüfen Sie nach dem Speichern der Änderungen Ihren Browser, um die Ergebnisse anzuzeigen.

Nehmen Sie sich einen Moment Zeit, um sicherzustellen, dass Sie verstehen, was los ist. Wir deklarieren ein staatliches Objekt in der (staatlichen) Messagelist -Komponente. Die Nachrichteneigenschaft dieses Objekts enthält unsere Nachricht. In unserer Renderfunktion können wir diese Nachricht mit sogenannten Requisiten an unsere (staatenlosen) untergeordneten Komponenten weitergeben.

In der (staatenlosen) MessageView -Komponente können wir mit this.props.message auf die Nachricht zugreifen. Wir können diesen Wert dann an unseren JSX weitergeben, um auf die Seite zu rendern.

Huh!

prop check

Wenn die Anwendung wächst und die Daten als Requisiten weitergegeben werden, ist es nützlich zu überprüfen, ob die Komponenten den erwarteten Datentyp empfangen.

Zum Glück können wir das Prop-Type-Paket verwenden, um dies zu erreichen. Um das tatsächliche Beispiel schnell zu sehen, ändern Sie unsere MessageView -Komponente wie folgt:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Wenn die Meldungstufe fehlt, wird dies dazu führen, dass Ihre React -Anwendung einen Fehler meldet. Wenn das von der Komponente empfangene Objekt kein Objekt ist, verursacht es auch einen Fehler.

Sie können versuchen, indem Sie den Status der übergeordneten Komponente wie folgt ändern:

<code>cd message-app
npm start</code>

Gehen Sie zurück zu Ihrem Browser und öffnen Sie die Konsole. Sie sollten die folgenden in der Konsole dokumentiert sehen:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Komponentenwiederverwendung

Lassen Sie uns nun sehen, wie mehrere Nachrichten mithilfe der MessingView -Instanz angezeigt werden. Hier beginnt React zu blinken, da die Wiederverwendung von Code sehr einfach macht (Sie werden sehen).

Erstens ändern wir den Status.Message in Array und benennen sie es in Nachrichten um. Wir werden dann die Kartenfunktion von JavaScript verwenden, um mehrere MessageView -Komponenteninstanzen zu generieren, die jeweils einer Nachricht im Status des Status.Messages -Arrays entsprechen.

Wir müssen auch einen eindeutigen Wert mit einem speziellen Attribut namens Key wie ID füllen. React erfordert dies, um zu verfolgen, welche Elemente in der Liste geändert, hinzugefügt oder gelöscht wurden.

Aktualisieren Sie den Messagelist -Code wie folgt:

<code class="language-json">{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</code>

Überprüfen Sie Ihren Browser, um die Ergebnisse zu sehen:

Wie Sie sehen können, ist es einfach, Bausteine ​​mit React zu definieren, um eine leistungsstarke und komplexe Benutzeroberfläche zu erstellen.

neu gestaltet, um React Hooks

zu verwenden

Hooks sind die neueste Version von React, aber sie fegen die React -Welt. Einfach ausgedrückt, ermöglichen sie es, Status (und andere Funktionen) für die Reaktionsfunktionskomponenten hinzuzufügen.

Ich werde dieses Tutorial beenden, indem ich die MessageView -Komponente in eine Funktionskomponente umgestaltet, die ihren Zustand mithilfe von React -Hooks verwaltet. Bitte beachten Sie, dass es nur bei der Verwendung von React v16.8 und später möglich ist.

<code>npm i -g create-react-app</code>

Im obigen Beispiel habe ich das Statusobjekt durch den Usestate React Hook ersetzt. Wie der Name schon sagt, können Sie den Stand der Komponenten verwalten.

Verwenden von Hooks hilft Ihnen, bei der Arbeit an großen Projekten sogenannte Prop-Bohrungen zu vermeiden. Mit ProP -Bohrungen können Sie Requisiten an mehrere Komponenten übergeben (die diese Daten letztendlich nicht benötigen), nur um an eine tief verschachtelte Komponente zu gelangen.

Wir können die MessageView -Komponente auch in eine Funktionskomponente konvertieren:

<code>create-react-app message-app</code>

Beachten

<code>npx i -g create-react-app</code>

Hierbei wird eine Technik namens Objektzerstörung verwendet, mit der Sie einzelne Elemente aus einem Array oder Objekt extrahieren und sie unter Verwendung einer abgekürzten Syntax in Variablen einsetzen können.

Wir verwenden hier die gleiche Technik, erhalten die Werte, die wir vom Nachrichtenobjekt benötigen

Das ist es!

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Ich beabsichtige nicht, React -Hooks in diesem Beitrag weiter vorzustellen. Lassen Sie Sie einfach wissen, dass sie existieren und dass sie in der React -Community immer beliebter werden. Wenn Sie mehr über Hooks erfahren möchten, lesen Sie unseren Leitfaden für die Erste Schritte, um Hooks zu reagieren.

Demo

Dies ist eine Live -Demonstration, die Sie verwenden können:

Codepen Demo Link

Umfrage -Lernen

Wir haben diesen Einführungshandbuch jetzt abgeschlossen. Es gibt viele reagierte Konzepte, die ich nicht abdecke, z. B. Datenerfassung, Fehlerbehandlung, Routing, Nutzungsform, Debuggen usw. Die Liste geht weiter ...

Die gute Nachricht ist, dass wir in SitePoint Premium viele großartige Inhalte sowie viele großartige Artikel in unserem Blog haben. Ich ermutige Sie, sie zu überprüfen und etwas Großartiges zu bauen.

FAQs über den Einstieg mit React

Was sind die Voraussetzungen für das Lernen von Reaktionen?

Bevor Sie anfangen, React zu lernen, ist es sehr wichtig, solides JavaScript -Wissen zu beherrschen, da React eine JavaScript -Bibliothek ist. Sie sollten mit Konzepten wie ES6 -Funktionen, Schließungen, asynchronem Programmieren und diesen Schlüsselwörtern vertraut sein. HTML- und CSS -Kenntnisse sind ebenfalls von wesentlicher Bedeutung, da Sie JSX verwenden, eine JavaScript -Syntax -Erweiterung ähnlich wie HTML. Es ist auch vorteilhaft, mit Node.js und NPM (Node Paket Manager) vertraut zu sein, da sie häufig für Paketverwaltungs- und Ausführungsskripte in der React -Entwicklung verwendet werden.

Wie richten Sie eine Entwicklungsumgebung für React ein?

Um eine Entwicklungsumgebung für React einzurichten, müssen Sie zunächst node.js und npm installieren. Nach Abschluss der Installation können Sie eine neue React -Anwendung über das Befehlszeilen -Tool für Erstellen von React App erstellen. Es richtet Ihre Entwicklungsumgebung so ein, dass Sie die neuesten JavaScript -Funktionen verwenden, ein gutes Entwicklungserlebnis bieten und Ihre Anwendungen für die Produktion optimieren können. Sie benötigen auch einen Texteditor wie Visual Studio Code und einen Webbrowser, um Ihre Anwendung zu testen.

Was ist JSX und warum ist es wichtig in React?

JSX steht für JavaScript XML. Es handelt sich um eine von Facebook entwickelte JavaScript -Syntax -Erweiterung, mit der wir HTML in React schreiben können. JSX erleichtert das Schreiben und Hinzufügen von HTML in React. Ohne sie ist Ihr JavaScript -Code schwer zu lesen und zu schreiben. Es hilft auch, den Code modular und leichter zu verstehen und zu warten.

Was sind die Komponenten in React?

Komponenten sind Bausteine ​​für jede Reaktionsanwendung. Eine Komponente in React ist ein wiederverwendbares Code -Stück, das einen Teil der Benutzeroberfläche steuert. Jede Komponente ist unabhängig und kann kombiniert werden, um eine komplexe Benutzeroberfläche zu erstellen. React -Komponenten werden normalerweise in JSX geschrieben und können ihren eigenen Zustand und ihre eigenen Requisiten aufrechterhalten.

Was ist der Unterschied zwischen Zustand und Requisiten in React?

In React sind Status und Requisiten JavaScript -Objekte. Obwohl beide Informationen enthalten, die die Renderausgabe beeinflussen, tun sie sich in Bezug auf Komponenten unterschiedlich. Requisiten (Abkürzung von Eigenschaften) sind eine Möglichkeit, Daten von übergeordneten Komponenten an untergeordnete Komponenten zu übergeben. Andererseits wird der Status in der Komponente verwaltet und kann in der Komponente geändert werden.

Wie geht React mit Ereignissen um?

React -Ereignisse werden mit Camelcase genannt, nicht mit Kleinbuchstaben. Wenn Sie JSX verwenden, übergeben Sie die Funktion als Ereignishandler, nicht als Zeichenfolge. Das HTML -Klickereignis wird beispielsweise als Onclick in JSX geschrieben. React verfügt auch über ein synthetisches Ereignissystem, was bedeutet, dass es über ein eigenes Ereignissystem verfügt, das vollständig mit dem W3C -Ereignissystem kompatibel ist.

Was bedeutet React Middle Key?

Die Schlüssel in React werden verwendet, um das eindeutige virtuelle DOM -Element ihrer entsprechenden Treiber -Rendering -Daten zu identifizieren. Sie helfen dabei, das Rendering zu optimieren, indem sie durch vorhandene DOM -Elemente geschoben werden. Der Schlüssel muss eine eindeutige Nummer oder eine eindeutige Zeichenfolge sein, und die Verwendung von doppelten Schlüssel kann Ihre Anwendung brechen.

Was ist die Kontext -API in React?

Kontext -API ist eine von React bereitgestellte Komponentenstruktur, mit der wir bestimmte Datenformen auf allen Ebenen unserer Anwendung freigeben können. Sein Ziel ist es, das Problem der Prop -Bohrung zu lösen.

Was ist Redux und was hat es mit React zu tun?

Redux ist ein vorhersehbarer Zustandsbehälter, mit dem Sie JavaScript -Anwendungen schreiben können, die konsistent auf Clients, Servern und nativen Umgebungen ausführen und einfach zu testen sind. Während es hauptsächlich als staatliches Management -Tool für React verwendet wird, können Sie es mit jedem anderen JavaScript -Framework oder einer anderen Bibliothek verwenden.

Was sind Haken in React?

Hooks ist eine neue Funktion in React 16.8, mit der Sie Status und andere React -Funktionen ohne Schreiben von Klassen verwenden können. Hooks sind Funktionen, mit denen Sie sich in Funktionen und Lebenszyklusfunktionen aus Funktionskomponenten "an den Reaktionszustand einstellen können. Sie arbeiten nicht im Unterricht - sie ermöglichen es Ihnen, React ohne Klassen zu verwenden.

Bitte beachten Sie, dass der obige Inhalt den Originaltext neu geschrieben und poliert hat und sich um die Verbesserung der Lesbarkeit und der Fließfähigkeit bemüht hat, ohne die ursprüngliche Bedeutung zu ändern. Das Bildformat bleibt gleich. Da auf die Netzwerkbilder nicht direkt zugegriffen werden können, bleibt die Bildverbindung gleich.