Blog

React Tutorial: Dein Anfängerfreundlicher Einstieg

Audrey Lopez

Audrey Lopez

13 June 2025

React Tutorial: Dein Anfängerfreundlicher Einstieg

Willkommen, angehender React-Entwickler! Sie haben eine fantastische Wahl getroffen. React ist eine leistungsstarke und beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, und das Erlernen ist ein sicherer Weg, Ihre Webentwicklungsfähigkeiten zu verbessern. Dieser umfassende Schritt-für-Schritt-Leitfaden führt Sie von Null zum Helden und vermittelt Ihnen das praktische Wissen, das Sie benötigen, um 2025 mit dem Erstellen Ihrer eigenen React-Anwendungen zu beginnen. Wir konzentrieren uns auf das Tun, nicht nur auf das Lesen, also machen Sie sich bereit, Code zu schreiben!

💡
Möchten Sie ein großartiges API-Testtool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform für Ihr Entwicklerteam, um mit maximaler Produktivität zusammenzuarbeiten?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
Schaltfläche

Richten wir Ihre React-Entwicklungsumgebung ein

Bevor wir mit dem Erstellen fantastischer Benutzeroberflächen beginnen können, müssen wir einen Arbeitsplatz einrichten. Stellen Sie sich das wie die Vorbereitung Ihrer Werkstatt vor, bevor Sie ein neues Projekt starten.

Installation der Grundlagen: Node.js und npm

React-Anwendungen werden mit Node.js und seinem Paketmanager npm (Node Package Manager) erstellt und verwaltet.

Besuchen Sie zunächst die offizielle Node.js-Website und laden Sie die neueste Long-Term Support (LTS)-Version herunter. Der Installer ist unkompliziert; folgen Sie einfach den Anweisungen auf dem Bildschirm. Nach der Installation stehen Ihnen sowohl Node.js als auch npm zur Verfügung. Sie können die Installation überprüfen, indem Sie Ihr Terminal oder Ihre Eingabeaufforderung öffnen und Folgendes eingeben:Bash

node -v
npm -v

Diese Befehle sollten die installierten Versionen von Node.js bzw. npm ausgeben.

Ihr erstes React-Projekt mit Vite

Früher war create-react-app das bevorzugte Tool zum Starten eines neuen React-Projekts. Die moderne Webentwicklungslandschaft entwickelt sich jedoch schnell, und 2025 ist Vite die empfohlene Wahl für seine unglaubliche Geschwindigkeit und Effizienz.

Um ein neues React-Projekt mit Vite zu erstellen, öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:Bash

npm create vite@latest my-first-react-app -- --template react

Schauen wir uns diesen Befehl genauer an:

Nachdem der Befehl abgeschlossen ist, haben Sie ein neues Verzeichnis mit dem Namen Ihres Projekts. Navigieren Sie in dieses Verzeichnis:Bash

cd my-first-react-app

Als Nächstes müssen Sie die Abhängigkeiten des Projekts installieren. Dies sind die anderen Pakete, die Ihre React-Anwendung benötigt, um korrekt zu funktionieren. Führen Sie diesen Befehl aus:Bash

npm install

Starten Sie schließlich den Entwicklungsserver, um Ihre brandneue React-Anwendung in Aktion zu sehen:Bash

npm run dev

Ihr Terminal zeigt eine lokale URL an, normalerweise http://localhost:5173. Öffnen Sie diese URL in Ihrem Webbrowser, und Sie sehen die Standard-React-Anwendung, die von Vite erstellt wurde. Herzlichen Glückwunsch, Sie haben gerade Ihr erstes React-Projekt eingerichtet!

Das Herzstück von React: Komponenten und JSX

Nachdem Sie nun eine laufende React-Anwendung haben, tauchen wir in die Kernkonzepte ein, die React so leistungsstark machen: Komponenten und JSX.

Was sind Komponenten?

Im Kern ist eine React-Anwendung eine Sammlung wiederverwendbarer, eigenständiger UI-Teile, die als Komponenten bezeichnet werden. Stellen Sie sich eine Webseite vor, die aus LEGO-Steinen gebaut ist. Jeder Stein ist eine Komponente, und Sie können sie kombinieren, um komplexere Strukturen zu erstellen.

Öffnen Sie in Ihrem Projekt my-first-react-app den Ordner src, und Sie finden eine Datei namens App.jsx. Dies ist Ihre Hauptanwendungskomponente. Vereinfachen wir ihren Inhalt, um die Grundlagen zu verstehen:JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;

In diesem Code:

JSX verstehen: JavaScript XML

JSX ist eine Syntaxerweiterung für JavaScript, die es Ihnen ermöglicht, HTML-ähnlichen Code in1 Ihren JavaScript-Dateien zu schreiben. Es ist eigentlich kein HTML, aber es macht das Schreiben von UI-Code viel intuitiver und lesbarer.

Hinter den Kulissen wandelt ein Tool namens Transpiler (in unserem Fall von Vite betrieben) dieses JSX in reguläres JavaScript um, das Browser verstehen können.

Modifizieren wir unsere App.jsx, um die Leistungsfähigkeit von JSX zu sehen. Wir können JavaScript-Ausdrücke direkt in unser JSX einbetten, indem wir geschweifte Klammern {} verwenden.JavaScript

// src/App.jsx

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
    </div>
  );
}

export default App;

Speichern Sie die Datei, und Ihr Browser wird automatisch aktualisiert, um den neuen Inhalt anzuzeigen. Dies ist eine Funktion von Vite namens Hot Module Replacement (HMR) und sorgt für eine fantastische Entwicklungserfahrung.

Erstellen Sie Ihre erste benutzerdefinierte Komponente

Erstellen wir unsere eigene Komponente. Erstellen Sie im Ordner src eine neue Datei namens Greeting.jsx.JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>This is a greeting from my custom component!</h2>
  );
}

export default Greeting;

Verwenden wir nun diese neue Greeting-Komponente in unserer App.jsx-Komponente.JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Import the Greeting component

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
      <Greeting /> {/* Use the Greeting component */}
    </div>
  );
}

export default App;

Durch das Importieren und anschließende Verwenden von <Greeting /> wie ein normales HTML-Tag haben wir unsere Benutzeroberfläche aus mehreren Komponenten zusammengesetzt. Dies ist der grundlegende Baustein von React-Anwendungen.

Daten mit Props übergeben

Unsere Greeting-Komponente ist etwas statisch. Was, wenn wir verschiedene Personen begrüßen möchten? Hier kommen Props (Kurzform für Properties) ins Spiel. Props sind die Art und Weise, wie Sie Daten von einer Elternkomponente an eine Kindkomponente übergeben.

Komponenten mit Props dynamisch machen

Modifizieren wir unsere Greeting.jsx, um eine name-Prop zu akzeptieren.JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Hello, {props.name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

Jetzt können wir in App.jsx eine Name-Prop an unsere Greeting-Komponenten übergeben.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Sie sehen nun drei verschiedene Begrüßungen, jede mit einem eindeutigen Namen. Props ermöglichen es uns, Komponenten mit unterschiedlichen Daten wiederzuverwenden, was unsere Benutzeroberfläche unglaublich flexibel macht.

Eine gängige und moderne JavaScript-Praxis ist die Destrukturierung des props-Objekts direkt in der Parameterliste der Funktion. Überarbeiten wir Greeting.jsx:JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Hello, {name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

Dies erzielt das gleiche Ergebnis, aber mit saubererem und prägnanterem Code.

Verwalten des Komponentenspeichers mit State

Während Props großartig sind, um Daten den Komponentenbaum hinunterzugeben, was passiert, wenn eine Komponente ihre eigenen Daten speichern und verwalten muss? Hier kommt State ins Spiel. State sind Daten, die innerhalb einer Komponente verwaltet werden. Wenn sich der State einer Komponente ändert, rendert React diese Komponente automatisch neu, um den neuen State widerzuspiegeln.

Einführung des useState Hooks

Um State in funktionalen Komponenten zu verwalten, verwenden wir eine spezielle Funktion von React, die als Hook bezeichnet wird. Der grundlegendste Hook ist useState.

Bauen wir eine einfache Zählerkomponente, um zu verstehen, wie useState funktioniert. Erstellen Sie eine neue Datei in Ihrem Ordner src namens Counter.jsx.JavaScript

// src/Counter.jsx
import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Schauen wir uns das genauer an:

  1. count: Der aktuelle Wert des States.
  2. setCount: Eine Funktion, mit der wir den count-State aktualisieren können.

Fügen wir nun diese Counter-Komponente zu unserer App.jsx hinzu:JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>My Awesome React App</h1>
      <Counter />
    </div>
  );
}

export default App;

Sie sollten nun einen Zähler in Ihrem Browser sehen. Jedes Mal, wenn Sie auf den Button klicken, erhöht sich die Zahl. React rendert die Counter-Komponente jedes Mal neu, wenn sich ihr State ändert.

Auf Benutzeraktionen reagieren: Ereignisse behandeln

Interaktivität ist das Herzstück moderner Webanwendungen. React bietet eine einfache und konsistente Möglichkeit, Ereignisse wie Klicks, Formularübermittlungen und Tastatureingaben zu behandeln.

Wir haben bereits einen grundlegenden Ereignishandler in unserer Counter-Komponente mit onClick gesehen. Erforschen wir dies weiter, indem wir ein einfaches Formular erstellen, das Benutzereingaben entgegennimmt.

Erstellen Sie eine neue Komponentendatei namens NameForm.jsx.JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Prevents the default form submission behavior
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default NameForm;

Analysieren wir diese Formular-Komponente:

Fügen Sie dieses NameForm zu Ihrer App.jsx hinzu, um es in Aktion zu sehen.

Informationen anzeigen: Bedingtes Rendering und Listen

Echte Anwendungen müssen oft Inhalte basierend auf bestimmten Bedingungen anzeigen oder ausblenden, und sie müssen häufig Listen von Daten anzeigen.

Anzeigen und Ausblenden mit bedingtem Rendering

Erstellen wir eine Komponente, die eine andere Nachricht anzeigt, je nachdem, ob ein Benutzer angemeldet ist. Erstellen Sie eine Datei namens LoginMessage.jsx.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  }
  return <h2>Please log in.</h2>;
}

export default LoginMessage;

Wir können auch den ternären Operator für prägnanteres bedingtes Rendering verwenden.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>}
    < /div>
  );
}

export default LoginMessage;

Sie können diese Komponente dann in App.jsx verwenden und die isLoggedIn-Prop übergeben, um die verschiedenen Nachrichten zu sehen.

Anzeigen von Datenlisten

Um eine Liste von Elementen zu rendern, verwenden Sie typischerweise die Array-Methode map(). Erstellen wir eine Komponente, um eine Liste von Früchten anzuzeigen. Erstellen Sie eine Datei namens FruitList.jsx.JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Hier mappen wir über das fruits-Array und geben für jede Frucht ein <li>-Element zurück.

Sie werden die key={index}-Prop bemerken. Wenn Sie eine Liste von Elementen rendern, benötigt React einen eindeutigen key für jedes Element, um die Liste effizient zu aktualisieren, wenn sie sich ändert. Die Verwendung des Array-Index als Key ist für einfache, statische Listen akzeptabel. Bei dynamischen Listen, bei denen Elemente hinzugefügt, entfernt oder neu angeordnet werden können, ist es jedoch am besten, eine eindeutige ID aus Ihren Daten zu verwenden, falls verfügbar.

Ihrer Anwendung Stil verleihen

Eine großartige Anwendung muss gut aussehen. Es gibt verschiedene Möglichkeiten, Ihre React-Komponenten zu stylen.

CSS-Stylesheets

Der einfachste Weg ist die Verwendung regulärer CSS-Dateien. Im Ordner src finden Sie eine Datei App.css. Dort können Sie Ihre Stile hinzufügen.

Um beispielsweise unsere FruitList-Komponente zu stylen, könnten Sie dies zu App.css hinzufügen:CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

Dann können Sie in Ihrer FruitList.jsx diese CSS-Klassen verwenden.JavaScript

// src/FruitList.jsx
import './App.css'; // Make sure to import the CSS file

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Beachten Sie, dass wir in JSX className anstelle von class verwenden, da class ein reserviertes Schlüsselwort in JavaScript ist.

CSS-Module

Für größere Anwendungen bieten CSS-Module eine Möglichkeit, Stile auf eine bestimmte Komponente zu beschränken und Stilkonflikte zu vermeiden. Eine CSS-Moduldatei wird mit der Erweiterung .module.css benannt.

Erstellen wir FruitList.module.css:CSS/* src/FruitList.module.css */ .list { list-style-type: square; } .item { color: blue; }

Importieren Sie nun in FruitList.jsx die Stile als Objekt:JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits (Styled with CSS Modules):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Vite generiert automatisch eindeutige Klassennamen, um sicherzustellen, dass die Stile in FruitList.module.css nur auf die FruitList-Komponente angewendet werden.

Die meisten Webanwendungen haben mehrere Seiten. Um die Navigation zwischen diesen "Seiten" in einer Single-Page Application (SPA) wie einer mit React erstellten Anwendung zu handhaben, verwenden wir eine Bibliothek namens React Router.

React Router einrichten

Zuerst müssen Sie React Router installieren:Bash

npm install react-router-dom

Erstellen Sie Ihre Seiten

Erstellen wir zwei einfache Seitenkomponenten: HomePage.jsx und AboutPage.jsx.JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page of our amazing app!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is all about our incredible application.</p>
    </div>
  );
}

export default AboutPage;

Konfigurieren des Routers

Nun konfigurieren wir unsere Routen in App.jsx.JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Schauen wir uns die neuen Komponenten von React Router genauer an:

Wenn Sie nun auf die Links "Home" und "About" klicken, ändert sich der Inhalt, ohne dass die Seite komplett neu geladen wird. Sie haben erfolgreich Client-Side Routing implementiert!

Weiterführend: Der useEffect Hook

Der useState Hook dient zur Verwaltung von State, der sich direkt auf das gerenderte Element auswirkt. Aber was ist mit Side Effects, wie dem Abrufen von Daten von einer API, dem Einrichten von Abonnements oder dem manuellen Ändern des DOM? Dafür verwenden wir den useEffect Hook.

Der useEffect Hook wird standardmäßig nach jedem Render ausgeführt. Sehen wir ihn in Aktion, indem wir eine Komponente erstellen, die Daten von einer Fake-API abruft.

Erstellen Sie eine neue Datei DataFetcher.jsx.JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // This function will be called after the component renders
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // The empty dependency array is important!

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h3>Fetched Data:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

Der Schlüssel zum Verständnis von useEffect hier ist das zweite Argument: das Dependency Array.

Fügen Sie DataFetcher zu Ihrer App.jsx hinzu, um zu sehen, wie Daten abgerufen und angezeigt werden, wenn die Komponente geladen wird.

Fazit und nächste Schritte

Sie haben einen langen Weg zurückgelegt! Sie haben gelernt, wie man:

Dies ist eine enorme Leistung, und Sie haben nun eine solide Grundlage, auf der Sie aufbauen können. Die Welt von React ist riesig und aufregend. Hier sind einige Themen, die Sie als Nächstes erkunden könnten:

Das Wichtigste, was Sie jetzt tun können, ist, weiterhin zu bauen. Übung ist der Schlüssel. Versuchen Sie, eine einfache Website oder Anwendung nachzubauen, die Sie täglich verwenden. Fordern Sie sich mit neuen Funktionen heraus. Je mehr Sie coden, desto sicherer und geschickter werden Sie.

Willkommen in der React-Community. Viel Spaß beim Codieren!

💡
Möchten Sie ein großartiges API-Testtool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform für Ihr Entwicklerteam, um mit maximaler Produktivität zusammenzuarbeiten?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
Schaltfläche

Praktizieren Sie API Design-First in Apidog

Entdecken Sie eine einfachere Möglichkeit, APIs zu erstellen und zu nutzen

Kostenlos registrierenDownload