React Functional Components, Requisiten und JSX - React.js Tutorial für Anfänger

React ist eine der beliebtesten JavaScript-Bibliotheken zum Erstellen von Benutzeroberflächen.

Wenn Sie ein Front-End-Entwickler werden oder einen Webentwicklungsjob finden möchten, würden Sie wahrscheinlich davon profitieren, React eingehend zu lernen.

In diesem Beitrag lernen Sie einige der Grundlagen von React kennen, z. B. das Erstellen einer Komponente, die JSX-Syntax und Requisiten. Wenn Sie keine oder nur wenig Erfahrung mit React haben, ist dieser Beitrag für Sie.

Für den Anfang ist hier, wie Sie React installieren können.

Was ist JSX?

Das erste, was Sie nach der Installation Ihres ersten React-Projekts feststellen werden, ist, dass eine JavaScript-Funktion HTML-Code zurückgibt:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Dies ist eine spezielle und gültige Syntaxerweiterung für React, die als JSX (JavaScript XML) bezeichnet wird. Normalerweise speichern wir in Frontend-Projekten HTML-, CSS- und JavaScript-Code in separaten Dateien. In React funktioniert dies jedoch etwas anders.

In React-Projekten erstellen wir keine separaten HTML-Dateien, da wir mit JSX HTML und JavaScript zusammen in derselben Datei schreiben können, wie im obigen Beispiel. Sie können Ihr CSS jedoch in einer anderen Datei trennen.

Am Anfang scheint JSX ein bisschen komisch zu sein. Aber keine Sorge, Sie werden sich daran gewöhnen.

JSX ist sehr praktisch, da wir auch jeden JavaScript-Code (Logik, Funktionen, Variablen usw.) direkt im HTML-Code ausführen können, indem wir geschweifte Klammern {} verwenden, wie folgt:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Sie können JavaScript-Variablen auch HTML-Tags zuweisen:

const message = 

React is cool!

;

Oder Sie können HTML innerhalb der JavaScript-Logik zurückgeben (z. B. wenn-sonst-Fälle):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Ich werde nicht weiter auf JSX eingehen, aber stellen Sie sicher, dass Sie beim Schreiben von JSX die folgenden Regeln berücksichtigen:

  • HTML- und Komponenten-Tags müssen immer geschlossen sein
  • Einige Attribute wie "Klasse" werden zu "Klassenname" (da Klasse auf JavaScript-Klassen verweist), "Tabindex" wird zu "TabIndex" und sollte camelCase geschrieben werden
  • Wir können nicht mehr als ein HTML-Element gleichzeitig zurückgeben. Stellen Sie daher sicher, dass Sie sie in ein übergeordnetes Tag einschließen:
return ( 

Hello

World

);
  • Alternativ können Sie sie mit leeren Tags umschließen:
return (  

Hello

World

);

Sie können sich auch mein Tutorial "Reagieren für Anfänger" ansehen, um weitere Informationen zu erhalten:

Was sind Funktions- und Klassenkomponenten?

Nachdem Sie sich an die JSX-Syntax gewöhnt haben, müssen Sie als Nächstes die komponentenbasierte Struktur von React verstehen.

Wenn Sie den Beispielcode oben in diesem Beitrag erneut aufrufen, werden Sie feststellen, dass der JSX-Code von einer Funktion zurückgegeben wird. Die App () -Funktion ist jedoch keine gewöhnliche Funktion, sondern eine Komponente. Was ist eine Komponente?

Was ist eine Komponente?

Eine Komponente ist ein unabhängiger, wiederverwendbarer Codeblock, der die Benutzeroberfläche in kleinere Teile unterteilt. Wenn wir beispielsweise die Benutzeroberfläche von Twitter mit React erstellen:

Anstatt die gesamte Benutzeroberfläche unter einer einzigen Datei zu erstellen, können und sollten wir alle Abschnitte (rot markiert) in kleinere unabhängige Teile unterteilen. Mit anderen Worten, dies sind Komponenten.

React besteht aus zwei Arten von Komponenten: funktionalund Klasse. Schauen wir uns das jetzt genauer an.

Funktionskomponenten

Der erste und empfohlene Komponententyp in React sind Funktionskomponenten. Eine Funktionskomponente ist im Grunde eine JavaScript / ES6-Funktion, die ein React-Element (JSX) zurückgibt. Laut den offiziellen Dokumenten von React ist die folgende Funktion eine gültige Funktionskomponente:

function Welcome(props) { return 

Hello, {props.name}

; }

Alternativ können Sie auch eine Funktionskomponente mit der Pfeilfunktionsdefinition erstellen:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Diese Funktion ist eine gültige React-Komponente, da sie ein einzelnes Objektargument "Requisiten" (das für Eigenschaften steht) mit Daten akzeptiert und ein React-Element zurückgibt. - reactjs.org

Um eine Komponente später verwenden zu können, müssen Sie sie zuerst exportieren, damit Sie sie an einen anderen Ort importieren können:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Nach dem Importieren können Sie die Komponente wie in diesem Beispiel aufrufen:

import Welcome from './Welcome'; function App() { return ( ); }

Also eine funktionale Komponente in Reaktion:

  • ist eine JavaScript / ES6-Funktion
  • muss ein React-Element (JSX) zurückgeben
  • beginnt immer mit einem Großbuchstaben (Namenskonvention)
  • nimmt bei Bedarf Requisiten als Parameter

Was sind Klassenkomponenten?

Der zweite Komponententyp ist die Klassenkomponente. Klassenkomponenten sind ES6-Klassen, die JSX zurückgeben. Unten sehen Sie dieselbe Willkommensfunktion, diesmal als Klassenkomponente:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

Im Gegensatz zu Funktionskomponenten müssen Klassenkomponenten über eine zusätzliche render () -Methode verfügen, um JSX zurückgeben zu können.

Warum Klassenkomponenten verwenden?

Wir haben früher Klassenkomponenten wegen "state" verwendet. In den älteren Versionen von React (Version <16.8) war es nicht möglich, den Status innerhalb von Funktionskomponenten zu verwenden.

Daher benötigten wir Funktionskomponenten nur zum Rendern der Benutzeroberfläche, während wir Klassenkomponenten für die Datenverwaltung und einige zusätzliche Operationen (wie Lebenszyklusmethoden) verwendeten.

Dies hat sich mit der Einführung von React Hooks geändert, und jetzt können wir Zustände auch in Funktionskomponenten verwenden. (Ich werde in meinen folgenden Beiträgen auf Status und Hooks eingehen, also kümmere dich vorerst nicht darum).

Eine Klassenkomponente:

  • ist eine ES6-Klasse und wird eine Komponente sein, sobald sie eine React-Komponente 'erweitert'.
  • Nimmt bei Bedarf Requisiten (im Konstruktor)
  • muss ein render haben ()Methode zur Rückgabe von JSX

Was sind Requisiten in Reaktion?

Ein weiteres wichtiges Konzept von Komponenten ist die Art und Weise, wie sie kommunizieren. React hat ein spezielles Objekt namens prop (steht für property), mit dem wir Daten von einer Komponente zur anderen transportieren.

Aber seien Sie vorsichtig - Requisiten transportieren Daten nur in einer Richtung (nur von übergeordneten zu untergeordneten Komponenten). Mit Requisiten ist es nicht möglich, Daten vom Kind zum Elternteil oder zu Komponenten auf derselben Ebene zu übergeben.

Lassen Sie uns die App () - Funktion oben erneut besuchen, um zu sehen, wie Daten mit Requisiten übergeben werden.

Zuerst müssen wir eine Requisite für die Willkommenskomponente definieren und ihr einen Wert zuweisen:

import Welcome from './Welcome'; function App() { return ( ); }

Requisiten sind benutzerdefinierte Werte und machen Komponenten dynamischer. Da die Willkommenskomponente hier das untergeordnete Element ist, müssen wir Requisiten für das übergeordnete Element (App) definieren, damit wir die Werte übergeben und das Ergebnis erhalten können, indem wir einfach auf den Namen der Requisite zugreifen:

function Welcome(props) { return 

Hello, {props.name}

; }

React Requisiten sind wirklich nützlich

Daher verwenden React-Entwickler Requisiten, um Daten weiterzugeben, und sie sind für diesen Job nützlich. Aber wie sieht es mit der Datenverwaltung aus? Requisiten werden zum Übergeben von Daten verwendet, nicht zum Bearbeiten. Ich werde mich in meinen zukünftigen Beiträgen hier auf freeCodeCamp mit der Verwaltung von Daten mit React befassen.

Wenn Sie in der Zwischenzeit mehr über React & Web Development erfahren möchten, können Sie meinen YouTube-Kanal abonnieren.

Danke fürs Lesen!