React-Einführungsleitfaden: Erstelle deine erste Benutzeroberfläche von Grund auf

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Sie wurde von Facebook entwickelt und wird von Facebook gewartet und hat sich zu einem der beliebtesten Tools in der Frontend-Entwicklung entwickelt. Dieser Leitfaden führt dich Schritt für Schritt von Grund auf in die grundlegenden Konzepte von React ein und erstellt eine einfache Benutzeroberfläche.

Warum React wählen?

React hat folgende Vorteile:

• Komponentenbasiert: React zerlegt die Benutzeroberfläche in unabhängige, wiederverwendbare Komponenten. Dies erleichtert die Wartung und das Verständnis des Codes.
• Deklarativ: React verwendet einen deklarativen Programmierstil, d. h. du musst nur beschreiben, was du darstellen möchtest, und React kümmert sich automatisch um Aktualisierungen und das Rendern.
• Effizient: React verwendet ein virtuelles DOM und intelligente Diff-Algorithmen, um die Benutzeroberfläche effizient zu aktualisieren und unnötiges Rendern zu reduzieren.
• Umfangreiche Community-Unterstützung: React verfügt über eine große Community und ein umfangreiches Ökosystem. Du kannst zahlreiche Tutorials, Bibliotheken und Tools finden, die dich bei der Entwicklung unterstützen.
• Plattformübergreifende Fähigkeiten: Mit React Native kannst du native mobile Anwendungen (iOS und Android) mit React entwickeln.

Vorbereitungen

Bevor du beginnst, musst du sicherstellen, dass die folgenden Tools auf deinem Computer installiert sind:

• Node.js: Node.js ist eine JavaScript-Laufzeitumgebung zum Ausführen von React-Entwicklungstools. Du kannst es von https://nodejs.org/ herunterladen und installieren.
• npm oder yarn: npm (Node Package Manager) und yarn sind JavaScript-Paketmanager zum Installieren und Verwalten der React-Abhängigkeiten. Normalerweise wird npm bei der Installation von Node.js mitinstalliert. yarn kann von https://yarnpkg.com/ installiert werden.

Erstelle deine erste React-Anwendung

Wir verwenden create-react-app, um schnell ein React-Projekt zu erstellen.

1. Mit npm erstellen:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Mit yarn erstellen:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Nach der Ausführung der obigen Befehle erstellt create-react-app automatisch ein Verzeichnis namens my-first-react-app und initialisiert ein React-Projekt in diesem Verzeichnis. Der Befehl npm start oder yarn start startet den Entwicklungsserver, und du kannst deine React-Anwendung im Browser unter http://localhost:3000 anzeigen.

Verzeichnisstruktur

Die Projektverzeichnisstruktur, die von create-react-app erstellt wurde, sieht wie folgt aus:

my-first-react-app/
├── node_modules/         # Bibliotheken, von denen das Projekt abhängt
├── public/               # Statische Ressourcen (z. B. HTML-Dateien)
│   ├── index.html        # Die HTML-Einstiegsdatei der Anwendung
│   └── ...
├── src/                  # React-Quellcode
│   ├── App.css           # CSS-Stile der App-Komponente
│   ├── App.js            # App-Komponente
│   ├── App.test.js       # Testdatei der App-Komponente
│   ├── index.css         # Globale CSS-Stile
│   ├── index.js          # JavaScript-Einstiegsdatei der Anwendung
│   ├── logo.svg          # React-Logo
│   └── ...
├── .gitignore            # Git-Ignorierdatei
├── package.json          # Metadaten und Abhängigkeiten des Projekts
├── README.md             # Dokumentation des Projekts
└── yarn.lock             # Datei zur Versionssperrung von Abhängigkeiten (wenn yarn verwendet wird)

React-Komponenten verstehen

React-Anwendungen bestehen aus Komponenten. Komponenten sind unabhängige, wiederverwendbare Codeblöcke, die zum Rendern bestimmter Teile der Benutzeroberfläche verwendet werden.

In der Datei src/App.js sehen Sie eine Standard-App-Komponente:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Code-Erläuterung:

• import React from 'react'; Importiert die React-Bibliothek.
• function App() { ... } Definiert eine Funktionskomponente namens App.
• return ( ... ) Gibt einen JSX-Ausdruck zurück, der beschreibt, was die Komponente rendern soll.
• export default App; Exportiert die App-Komponente, damit sie in anderen Dateien verwendet werden kann.

JSX (JavaScript XML)

JSX ist eine JavaScript-Syntaxerweiterung, mit der Sie HTML-artigen Code in JavaScript-Code schreiben können. Im obigen Beispiel ist ... ein JSX-Ausdruck. JSX-Code wird von Babel in Standard-JavaScript-Code umgewandelt, damit der Browser ihn verstehen kann.

Ändern der App-Komponente

Lassen Sie uns die App-Komponente ändern, um einen einfachen Zähler zu erstellen.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Zähler

      Aktueller Zählerstand: {count}

      +
      -
    
  );
}

export default App;

Änderungserklärung:

• import React, { useState } from 'react'; Importiert den useState Hook. useState ist ein React Hook, der verwendet wird, um Funktionskomponenten einen Zustand hinzuzufügen.
• const [count, setCount] = useState(0); Erstellt mit dem useState Hook eine Zustandsvariable namens count und initialisiert sie mit 0. setCount ist eine Funktion zum Aktualisieren des count-Zustands.
• const increment = () => { setCount(count + 1); }; Definiert eine Funktion namens increment, die den count-Zustand um 1 erhöht.
• const decrement = () => { setCount(count - 1); }; Definiert eine Funktion namens decrement, die den count-Zustand um 1 verringert.
• Aktueller Zählerstand: {count} Zeigt den Wert des count-Zustands auf der Seite an. {count} ist ein JSX-Ausdruck, der zum Einfügen von JavaScript-Variablen in JSX-Code verwendet wird.
• + und - Erstellen Sie zwei Schaltflächen, die jeweils an die Funktionen increment und decrement gebunden sind. onClick ist ein Ereignishandler, der verwendet wird, um die angegebene Funktion auszuführen, wenn auf die Schaltfläche geklickt wird.

Nach dem Speichern der Datei src/App.js wird der Browser automatisch aktualisiert und Sie sehen einen einfachen Zähler. Durch Klicken auf die Schaltfläche "+" wird der Zähler erhöht, durch Klicken auf die Schaltfläche "-" wird der Zähler verringert.

Verwenden von CSS-Stilen

Sie können CSS verwenden, um Ihre React-Anwendung zu verschönern. create-react-app unterstützt CSS-Module und normale CSS-Dateien.

Verwenden von CSS-Modulen:

Mit CSS-Modulen können Sie separate CSS-Stile für jede Komponente erstellen, um Stilkonflikte zu vermeiden. Um CSS-Module in einer Komponente zu verwenden, müssen Sie eine Datei mit der Endung .module.css erstellen.

Erstellen Sie beispielsweise eine Datei namens App.module.css und fügen Sie die folgenden CSS-Stile hinzu:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Importieren Sie dann CSS-Module in die Datei src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importiert CSS-Module

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Verwende das styles-Objekt, um auf CSS-Klassen zu verweisen */}
      

# Zähler

      Aktueller Zählerstand: {count}

      +
      -
    
  );
}

export default App;

Verwendung einer normalen CSS-Datei:

Du kannst auch eine normale CSS-Datei verwenden, um globale Stile zu definieren. In der Datei src/index.css kannst du globale Stile definieren.

Füge beispielsweise die folgenden CSS-Stile hinzu:

body {
  font-family: sans-serif;
}

Dieser Stil wird auf das gesamte body-Element der Anwendung angewendet.

Nächste Schritte

Herzlichen Glückwunsch, du hast deine erste React-Anwendung fertiggestellt! Als Nächstes kannst du mehr über React lernen, zum Beispiel:

• Kommunikation zwischen Komponenten: Lerne, wie verschiedene Komponenten miteinander kommunizieren können.
• Formularverarbeitung: Lerne, wie man Formulare erstellt und verarbeitet.
• Routing: Lerne, wie man mit React Router eine Mehrseitenanwendung erstellt.
• Redux oder Context API: Lerne, wie man den Zustand der Anwendung verwaltet.
• Hooks: Vertiefe dein Wissen über React Hooks, wie z. B. useEffect, useContext usw.

Denke daran, dass React eine Technologie ist, die ständiges Üben und Lernen erfordert. Viel Spaß beim Lernen!