React ist eine der beliebtesten JavaScript-Bibliotheken zur Erstellung von Benutzeroberflächen.
Wenn du ein Front-End-Entwickler werden oder einen Job in der Webentwicklung finden willst, würdest du wahrscheinlich davon profitieren, React gründlich zu lernen.
In diesem Beitrag wirst du einige der Grundlagen von React lernen, wie das Erstellen einer Komponente, die JSX-Syntax und Props. Wenn Sie keine oder nur wenig Erfahrung mit React haben, ist dieser Beitrag für Sie geeignet.
Für den Anfang erfahren Sie 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 etwas HTML-Code zurückgibt:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Das ist eine spezielle und gültige Syntaxerweiterung für React, die JSX (JavaScript XML) genannt wird. Normalerweise halten wir in Frontend-bezogenen 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 JSX uns erlaubt, HTML und JavaScript zusammen in einer Datei zu schreiben, wie im obigen Beispiel. Sie können jedoch Ihr CSS in einer anderen Datei abtrennen.
Am Anfang mag JSX ein wenig seltsam erscheinen. Aber keine Sorge, Sie werden sich daran gewöhnen.
JSX ist sehr praktisch, denn wir können auch jeden JavaScript-Code (Logik, Funktionen, Variablen usw.) direkt im HTML-Code ausführen, indem wir geschweifte Klammern { } verwenden, wie hier:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Außerdem können Sie HTML-Tags JavaScript-Variablen zuweisen:
const message = <h1>React is cool!</h1>;Oder Sie können HTML innerhalb der JavaScript-Logik zurückgeben (z. B. if-else-Fälle):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Ich werde nicht auf weitere Details von JSX eingehen, aber stellen Sie sicher, dass Sie die folgenden Regeln beim Schreiben von JSX beachten:
- HTML- und Komponenten-Tags müssen immer geschlossen werden < />
- Einige Attribute wie „class“ werden zu „className“ (weil sich class auf JavaScript-Klassen bezieht), „tabindex“ wird zu „tabIndex“ und sollte in camelCase geschrieben werden
- Wir können nicht mehr als ein HTML-Element auf einmal zurückgeben, also stellen Sie sicher, dass sie in einen übergeordneten Tag eingeschlossen sind:
return ( <div> <p>Hello</p> <p>World</p> </div>);- oder alternativ kannst du sie mit leeren Tags einpacken:
return ( <> <p>Hello</p> <p>World</p> </>);Du kannst dir auch mein React for Beginners Tutorial für weitere Informationen ansehen:
Was sind funktionale & Klassenkomponenten?
Nachdem man sich mit der JSX-Syntax vertraut gemacht hat, ist das nächste, was man verstehen muss, die komponentenbasierte Struktur von React.
Wenn Sie sich den Beispielcode oben in diesem Beitrag noch einmal ansehen, werden Sie sehen, dass der JSX-Code von einer Funktion zurückgegeben wird. Aber die Funktion App( ) ist keine gewöhnliche Funktion – sie ist eine Komponente. Was ist also eine Komponente?
Was ist eine Komponente?
Eine Komponente ist ein unabhängiger, wiederverwendbarer Codeblock, der die Benutzeroberfläche in kleinere Teile unterteilt. Wenn wir zum Beispiel die Benutzeroberfläche von Twitter mit React bauen:
Anstatt die gesamte Benutzeroberfläche in einer einzigen Datei zu bauen, können und sollten wir alle Abschnitte (rot markiert) in kleinere unabhängige Teile aufteilen. Mit anderen Worten, das sind Komponenten.
React hat zwei Arten von Komponenten: funktionale und Klassen. Schauen wir uns nun beide im Detail an.
Funktionale Komponenten
Der erste und empfohlene Komponententyp in React sind funktionale Komponenten. Eine funktionale Komponente 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 funktionale Komponente:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternativ können Sie auch eine funktionale Komponente mit der Pfeil-Funktionsdefinition erstellen:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Diese Funktion ist eine gültige React-Komponente, da sie ein einzelnes „props“-Objektargument (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, muss man sie zunächst exportieren, damit man sie an anderer Stelle importieren kann:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Nach dem Importieren kann man die Komponente wie in diesem Beispiel aufrufen:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Also eine funktionale Komponente in React:
- ist eine JavaScript/ES6-Funktion
- muss ein React-Element (JSX) zurückgeben)
- beginnt immer mit einem Großbuchstaben (Namenskonvention)
- nimmt ggf. props als Parameter
Was sind Klassenkomponenten?
Der zweite Typ von Komponenten 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 <h1>Hello, {this.props.name}</h1>; }}Im Unterschied zu funktionalen Komponenten müssen Klassenkomponenten eine zusätzliche render( )-Methode haben, um JSX zurückzugeben.
Warum Klassenkomponenten?
Wir haben früher Klassenkomponenten wegen des „Zustands“ verwendet. In den älteren Versionen von React (Version < 16.8) war es nicht möglich, Zustände innerhalb von funktionalen Komponenten zu verwenden.
Daher brauchten wir funktionale Komponenten nur für die Darstellung der Benutzeroberfläche, während wir Klassenkomponenten für die Datenverwaltung und einige zusätzliche Operationen (wie Lebenszyklusmethoden) verwenden würden.
Das hat sich mit der Einführung von React Hooks geändert, und jetzt können wir auch Zustände in funktionalen Komponenten verwenden. (Ich werde Zustände und Hooks in meinen folgenden Beiträgen behandeln, also beachten Sie sie vorerst nicht).
Eine Klassenkomponente:
- ist eine ES6-Klasse und wird zu einer Komponente, sobald sie eine React-Komponente „erweitert“.
- nimmt Props (im Konstruktor) wenn nötig
- muss eine render( ) Methode haben, um JSX zurückzugeben
Was sind Props in React?
Ein weiteres wichtiges Konzept von Komponenten ist, wie sie kommunizieren. React hat ein spezielles Objekt namens prop (steht für property), das wir verwenden, um Daten von einer Komponente zu einer anderen zu transportieren.
Aber Vorsicht – props transportieren Daten nur in eine Richtung (nur von Eltern- zu Kindkomponenten). Es ist nicht möglich, mit Props Daten von einer untergeordneten Komponente zu einer übergeordneten Komponente oder zu Komponenten auf derselben Ebene zu übertragen.
Schauen wir uns noch einmal die obige Funktion App( ) an, um zu sehen, wie man Daten mit Props übertragen kann.
Zunächst müssen wir eine Requisite für die Willkommenskomponente definieren und ihr einen Wert zuweisen:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Props sind benutzerdefinierte Werte und sie machen Komponenten dynamischer. Da die Willkommenskomponente hier das Kind ist, müssen wir Props auf ihrem Elternteil (App) definieren, damit wir die Werte übergeben und das Ergebnis einfach durch Zugriff auf den Prop „name“ erhalten können:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props sind wirklich nützlich
So verwenden React-Entwickler Props, um Daten zu übergeben, und sie sind nützlich für diese Aufgabe. Aber was ist mit der Verwaltung von Daten? Props werden verwendet, um Daten zu übergeben, nicht um sie zu manipulieren. Ich werde die Verwaltung von Daten mit React in meinen zukünftigen Beiträgen hier auf freeCodeCamp abdecken.
In der Zwischenzeit, wenn Sie mehr über React & Web-Entwicklung erfahren möchten, können Sie gerne meinen YouTube-Kanal abonnieren.
Danke fürs Lesen!