React ist zu einem Eckpfeiler der modernen Webentwicklung geworden und wird für seine Effizienz, Flexibilität und sein robustes Ökosystem gefeiert. React wurde von Facebook entwickelt und vereinfacht den Prozess der Erstellung interaktiver Benutzeroberflächen, indem es Entwicklern ermöglicht, wiederverwendbare UI-Komponenten zu erstellen.

Egal, ob Sie komplexe Single-Page-Anwendungen erstellen oder einfach Ihre Webentwicklungsfähigkeiten verbessern möchten, die Beherrschung von React ist ein wertvoller Vorteil.

In diesem Leitfaden führen wir Sie durch die wesentlichen Konzepte und Schritte für den Einstieg in React, einschließlich der Einrichtung Ihrer Entwicklungsumgebung, dem Verständnis der React-Grundlagen und der Erstellung Ihrer ersten Komponente.

Was ist Reagieren?

React ist eine JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird, insbesondere für Einzelseitenanwendungen, bei denen Sie ein dynamisches und interaktives Benutzererlebnis benötigen. Im Kern ermöglicht React Entwicklern, gekapselte Komponenten zu erstellen, die ihren eigenen Zustand verwalten, und diese zu komplexen Benutzeroberflächen zusammenzusetzen. Der deklarative Charakter von React erleichtert das Nachdenken über Ihre Anwendung, während die komponentenbasierte Architektur die Wiederverwendbarkeit und Wartbarkeit fördert.

Kurze Geschichte und Entwicklung der Reaktion

React wurde erstmals 2013 von Facebook veröffentlicht und erlangte aufgrund seines innovativen Ansatzes zur Erstellung von Benutzeroberflächen schnell Anklang. Im Gegensatz zu herkömmlichen Bibliotheken und Frameworks, die das DOM direkt manipulieren, führte React das Konzept des virtuellen DOM ein. Diese Abstraktion ermöglicht es React, das Rendering zu optimieren, indem nur Teile der Benutzeroberfläche aktualisiert werden, die sich geändert haben, was zu einer effizienteren Leistung führt.

Seit seiner Einführung hat sich React erheblich weiterentwickelt und Funktionen wie Hooks, Kontext-API und gleichzeitiges Rendering eingeführt. Die Bibliothek verfügt über ein lebendiges Ökosystem mit zahlreichen Tools, Bibliotheken und Frameworks, die ihre Fähigkeiten weiter verbessern.

Hauptmerkmale von React

1. Komponentenbasierte Architektur: Der komponentenbasierte Ansatz von React ermöglicht es Entwicklern, komplexe Benutzeroberflächen in kleinere, wiederverwendbare Teile zu zerlegen, jedes mit seiner eigenen Logik und seinem eigenen Rendering.

2. Virtuelles DOM: Das virtuelle DOM ist eine speicherinterne Darstellung des realen DOM. React nutzt dieses virtuelle DOM, um die Benutzeroberfläche effizient zu aktualisieren, indem es sie mit dem vorherigen Status vergleicht und nur die notwendigen Änderungen anwendet.

3. Deklarative Syntax: Die deklarative Syntax von React erleichtert das Entwerfen von Benutzeroberflächen, indem sie beschreibt, wie die Benutzeroberfläche für einen bestimmten Status aussehen soll, anstatt anzugeben, wie die Benutzeroberfläche geändert werden soll.

4. Unidirektionaler Datenfluss: React erzwingt einen unidirektionalen Datenfluss, was bedeutet, dass Daten von übergeordneten Komponenten zu untergeordneten Komponenten fließen, was die Verfolgung und Verwaltung von Statusänderungen erleichtert.

Einrichten der Entwicklungsumgebung

Bevor Sie sich mit React befassen, sollten Sie über grundlegende Kenntnisse in HTML, CSS und JavaScript verfügen. Wenn Sie mit diesen Technologien vertraut sind, können Sie React-Konzepte besser verstehen, da React auf diesen grundlegenden Webtechnologien aufbaut.

Node.js und npm installieren

React-Entwicklung erfordert Node.js und npm (Node Package Manager), die zum Verwalten von Projektabhängigkeiten und zum Ausführen von Entwicklungstools verwendet werden.

So installieren Sie Node.js und npm:

1. Node.js herunterladen und installieren: Gehen Sie zur offiziellen Website von Node.js und laden Sie die neueste LTS-Version (Long Term Support) für Ihr Betriebssystem herunter. Dieses Installationspaket enthält npm.

2. Installation überprüfen: Öffnen Sie nach der Installation ein Terminal (oder eine Eingabeaufforderung) und führen Sie die folgenden Befehle aus, um zu überprüfen, ob Node.js und npm korrekt installiert sind:
   

   node -v
   npm -v

Sie sollten Versionsnummern sowohl für Node.js als auch für npm sehen, um zu bestätigen, dass die Installation erfolgreich war.

Erstellen einer Reaktionsanwendung

Der einfachste Weg, mit React zu beginnen, ist die Verwendung des Create-React-App-Tools, das ein neues React-Projekt mit einer sinnvollen Standardkonfiguration einrichtet.

Schritt-für-Schritt-Anleitung zum Initialisieren eines neuen React-Projekts:

1. create-react-app global installieren: Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

   npx create-react-app my-app

Ersetzen Sie my-app durch den gewünschten Projektnamen. Dieser Befehl erstellt ein neues Verzeichnis mit dem angegebenen Namen und richtet darin ein React-Projekt ein.

1. Navigieren Sie zu Ihrem Projektverzeichnis:

   cd my-app

1. Starten Sie den Entwicklungsserver:

   npm start

Dieser Befehl führt den Entwicklungsserver aus und öffnet Ihre neue React-Anwendung in Ihrem Standard-Webbrowser. Sie sollten eine Standard-React-Willkommensseite sehen, die anzeigt, dass alles korrekt eingerichtet ist.

React-Grundlagen verstehen

Komponenten sind die Bausteine ​​einer React-Anwendung. Sie kapseln UI-Elemente und Logik und erleichtern so die Verwaltung und Wiederverwendung von Code. Komponenten können in zwei Typen eingeteilt werden:

1. Funktionskomponenten: Dies sind JavaScript-Funktionen, die React-Elemente zurückgeben. Sie werden häufig für einfache, zustandslose Komponenten verwendet.

Beispiel:

   function Welcome(props) {
     return 
Hello, {props.name}
;
   }

1. Klassenkomponenten: Dies sind ES6-Klassen, die React.Component erweitern und eine Rendermethode enthalten. Sie werden für komplexere Komponenten mit lokalen Status- und Lebenszyklusmethoden verwendet.

Beispiel:

   class Welcome extends React.Component {
     render() {
       return 
Hello, {this.props.name}
;
     }
   }

JSX (JavaScript XML)

JSX ist eine Syntaxerweiterung für JavaScript, mit der Sie HTML-ähnlichen Code in JavaScript schreiben können. Es erleichtert die Erstellung von React-Elementen und -Komponenten.

Wie JSX in JavaScript umgewandelt wird:

JSX ist kein gültiges JavaScript für sich. Während des Build-Prozesses wandelt ein Tool wie Babel JSX in normales JavaScript um. Zum Beispiel:

JSX:

const element = 
Hello, world!
;

Transformiertes JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

Requisiten (Eigenschaften)

Requisiten werden verwendet, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben. Sie sind schreibgeschützt und helfen dabei, Komponenten wiederverwendbar zu machen.

Beispiel für die Übergabe von Requisiten an eine Komponente:

function Greeting(props) {
  return 
Welcome, {props.username}!
;
}

function App() {
  return ;
}

In diesem Beispiel empfängt die Greeting-Komponente eine Benutzernamen-Requisite von der App-Komponente und zeigt sie an.

Zustand

State ermöglicht es Komponenten, ihre eigenen Daten zu verwalten und auf Benutzerinteraktionen zu reagieren. In Funktionskomponenten wird der useState-Hook zum Verwalten des Status verwendet.

Einführung in den useState Hook:

Der useState-Hook ist eine Funktion, die ein Array mit zwei Elementen zurückgibt: dem aktuellen Statuswert und einer Funktion, um ihn zu aktualisieren.

Beispiel für die Statusverwaltung mit useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

In diesem Beispiel verwaltet die Counter-Komponente einen Zählstatus. Durch Klicken auf die Schaltfläche wird der Status aktualisiert und die Benutzeroberfläche spiegelt den neuen Zählwert wider.

Erstellen Sie Ihre erste Reaktionskomponente

Lassen Sie uns eine einfache Funktionskomponente erstellen, um eine Begrüßungsnachricht anzuzeigen.

Schritt-für-Schritt-Beispiel:

1. Erstellen Sie eine neue Datei: Erstellen Sie im src-Verzeichnis Ihres Projekts eine Datei mit dem Namen Greeting.js.

2. Definieren Sie die Komponente:
   

   import React from 'react';

   function Greeting() {
     return 
Hello, React!
;
   }

   export default Greeting;

1. Rendern Sie die Komponente: Öffnen Sie src/App.js und rendern Sie die Greeting-Komponente.

   import React from 'react';
   import Greeting from './Greeting';

   function App() {
     return (
       

         
     );
   }

   export default App;

Grundlegende Stile hinzufügen

Sie können Ihre Komponenten mithilfe von Inline-Stilen oder externen CSS-Dateien formatieren. So fügen Sie grundlegende Stile hinzu:

1. Inline-Stile:

   function StyledGreeting() {
     const style = {
       color: 'blue',
       textAlign: 'center'
     };

     return 
Hello, styled React!
;
   }

1. Externes CSS: Erstellen Sie eine CSS-Datei (Greeting.css) im src-Verzeichnis.

   .greeting {
     color: green;
     text-align: center;
   }

Importieren Sie die CSS-Datei in Greeting.js und wenden Sie die Klasse an:

   import React from 'react';
   import './Greeting.css';

   function Greeting() {
     return 
Hello, styled React!
;
   }

   export default Greeting;

Abschluss

React ist eine leistungsstarke Bibliothek, die es Entwicklern ermöglicht, dynamische und interaktive Benutzeroberflächen effizient zu erstellen. In diesem Leitfaden haben wir die Grundlagen von React behandelt, einschließlich seiner Kernkonzepte, dem Einrichten der Entwicklungsumgebung, dem Verständnis von Komponenten, JSX, Requisiten und Status sowie dem Erstellen Ihrer ersten Komponente. Wir haben auch Styling-Optionen untersucht, um Ihre Komponenten aufzuwerten.