React-Tutorial: Einfaches Hello-World-Code-Beispiel

In diesem Tutorial wirst du lernen, wie man eine einfache React-App erstellt und sie Schritt für Schritt aufbaut. Du wirst das NPM-Package create-react-app verwenden, um ein neues Projekt zu erzeugen, und du wirst lernen, wie man React-Komponenten erstellt und verwendet, um deine App modular und wiederverwendbar zu gestalten.

Eine Sache noch bevor es losgeht: Du solltest auf jeden Fall Grundkenntnisse im Umgang mit dem Terminal haben. Falls du damit noch nicht vertraut sein solltest, empfehlen ich dir, zunächst diesen Artikel zu lesen.

Vorbereitung 💻

Bevor wir mit dem Tutorial beginnen können, müssen wir sicherstellen, dass wir die benötigte Software installiert haben. Folgende Dinge benötigst du:

• Node.js: React ist eine JavaScript-Bibliothek, die auf Node.js aufbaut. Du kannst die neueste Version von Node.js auf der offiziellen Website https://nodejs.org/en/download/ herunterladen und installieren.
• create-react-app: create-react-app ist ein einfaches Werkzeug, das uns dabei hilft, eine React-App schnell und einfach zu erstellen. Du kannst es mit dem folgenden Befehl installieren:

npm install --save create-react-app

Neue App erstellen 🚀

Nun, da wir alle benötigten Werkzeuge installiert haben, können wir endlich mit dem Erstellen unserer React-App beginnen. Öffne dein Terminal und navigiere zu dem Verzeichnis, in dem du deine App speichern möchtest. Dann führe den folgenden Befehl aus:

npx create-react-app hello-world

Dieser Befehl erstellt ein neues Verzeichnis mit dem Namen "hello-world" und initialisiert eine neue React-App darin. Es kann eine Weile dauern, bis der Prozess abgeschlossen ist. Wenn die App erstellt wurde, solltest du die folgende Projektstruktur sehen:

hello-world
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
├── src
│   └── App.css
│   └── App.js
│   └── App.test.js
│   └── index.css
│   └── index.js
│   └── logo.svg
│   └── serviceWorker.js

Die Projektstruktur 📂  von React ist ein wichtiger Bestandteil der Entwicklung von React-Apps. Sie hilft uns, unsere App in logische und wiederverwendbare Teile zu unterteilen, die wir leicht verwalten und warten können.

Ein typisches React-Projekt hat folgende Hauptverzeichnisse und Dateien:

• 📁 public: Dieses Verzeichnis enthält statische Dateien wie das HTML-Startdokument und Bilder, die in der App verwendet werden.
• 📁 src: Dieses Verzeichnis enthält den Quellcode unserer App, einschließlich JavaScript-Dateien, CSS-Dateien und Bilder.
• 📄 package.json: Diese Datei enthält Metadaten zu unserem Projekt, wie den Projektnamen, die abhängigen Pakete und Skripte, die wir verwenden.
• 📄 .gitignore: Diese Datei enthält eine Liste von Dateien und Verzeichnissen, die von Git ignoriert werden sollen.
• 📁 src: Das Verzeichnis src ist der Hauptteil unseres React-Projekts und enthält den Quellcode unserer App. Es ist in weitere Unterverzeichnisse unterteilt, die verschiedene Teile unserer App enthalten:
• 📁 components: Dieses Verzeichnis enthält die React-Komponenten, die wir in unserer App verwenden. Jede Komponente hat ihre eigene Datei, die den Namen der Komponente trägt. Zum Beispiel könnte es eine Datei Button.js für eine Button-Komponente geben.
• 📁 pages: Dieses Verzeichnis enthält die Hauptseiten unserer App, wie z.B. die Startseite oder das Login-Formular. Jede Seite hat ihre eigene Datei, die den Namen der Seite trägt. Zum Beispiel könnte es eine Datei Home.js für die Startseite geben.
• 📁 styles: Dieses Verzeichnis enthält CSS- oder andere Stylesheets, die wir in unserer App verwenden. Jedes Stylesheet hat seine eigene Datei, die den Namen des Stylesheets trägt. Zum Beispiel könnte es eine Datei global.css für allgemeine Styles geben.
• 📄 App.js: Diese Datei enthält die "App"-Komponente, die das Hauptelement unserer App darstellt. Sie enthält normalerweise den Hauptrouter und importiert andere Komponenten und Seiten, die wir in unserer App verwenden.
• 📄 index.js: Diese Datei ist der Einstiegspunkt unserer App. Sie importiert die "App"-Komponente und rendert sie in das HTML-Startdokument, das sich im Verzeichnis public befindet.

Diese Struktur ist nur ein Beispiel und kann je nach Bedarf angepasst werden. Du kannst zusätzliche Verzeichnisse und Dateien hinzufügen oder bestehende entfernen, je nachdem, wie deine App wächst und sich entwickelt.

Erste Schritte 🚶

Jetzt, da wir unser Projekt erstellt haben, können wir damit beginnen, es zu bearbeiten. Öffne das Verzeichnis "hello-world" in deinem Lieblings-Texteditor und schau dir die vorhandenen Dateien an. Du wirst bemerken, dass ein Großteil der Dateien bereits für uns erstellt wurde und wir uns nur noch auf den Code in der Datei "src/App.js" konzentrieren müssen.

Öffne die Datei "src/App.js" und lösche den vorhandenen Code. Füge stattdessen den folgenden Code ein:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

Dieser Code definiert eine einfache Funktion namens "App", die ein h1-Element mit dem Text "Hello World!" zurückgibt.

Um unsere Änderungen zu sehen, müssen wir unsere App starten. Öffne das Terminal und navigiere zum Verzeichnis "hello-world". Dann führe den folgenden Befehl aus:

npm start

Dieser Befehl startet einen lokalen Development Server und öffnet automatisch ein Browserfenster mit unserer App. Wenn alles wie erwartet läuft, solltest du unsere "Hello World!"-Nachricht im Browser sehen.

React-Komponente erstellen 🧩

Neben der Funktion "App", die wir in dem vorherigen Abschnitt erstellt haben, können wir in React auch Komponenten erstellen. Komponenten sind wiederverwendbare Bausteine, die wir in unserer App verwenden können, um sie modular und wiederholbar zu gestalten.

Um eine Komponente zu erstellen, müssen wir zunächst eine neue Datei erstellen. Öffne das Verzeichnis "src" und erstelle einen neuen Ordner namens "components, dort wiederum ertellst du eine neue Datei "Hello.js". Öffne die Datei und füge den folgenden Code ein:

import React from 'react';

function Hello() {
  return (
    <div>
      <h1>Hello from a component!</h1>
    </div>
  );
}

export default Hello;

Dieser Code erstellt eine neue Funktion namens "Hello", die ein h1-Element mit dem Text "Hello from a component!" zurückgibt. Wir exportieren die Funktion, damit wir sie später in anderen Teilen unserer App verwenden können.

Um die Komponente zu verwenden, müssen wir sie zunächst importieren. Öffne die Datei "src/App.js" und füge den folgenden Import-Befehl am Anfang der Datei ein:

import Hello from './Hello';

Dieser Befehl importiert die "Hello"-Funktion aus der Datei "Hello.js". Nun können wir die Komponente in unserer "App"-Funktion verwenden, indem wir sie wie jedes andere HTML-Element verwenden:

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

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <Hello />
    </div>
  );
}

export default App;

Wenn du nun deine App startest, solltest du neben der "Hello World!"-Nachricht auch unsere neue Komponente sehen, die den Text "Hello from a component!" anzeigt.

Fazit & Ausblick 💡

In diesem Tutorial hast du gelernt, wie man eine einfache React-App erstellt und sie Schritt für Schritt aufbaut. Du hast create-react-app verwendet, um ein neues Projekt zu erstellen und es zu starten, und du hast gelernt, wie man React-Komponenten erstellt und verwendet, um deine App modular und wiederverwendbar zu gestalten.

Wie geht es weiter?

Nun, da du die Grundlagen von React verstehst, kannst du dein neu erworbenes Wissen ausprobieren und deine eigenen Apps erstellen. Versuche, neue Seiten und Komponenten zu erstellen und sie in deiner App zu verwenden. Es gibt viele Möglichkeiten, wie man React nutzen kann, von der Erstellung von Web-Apps und mobilen Apps bis hin zur Datenvisualisierung. Die Grenzen sind nur durch deine Vorstellungskraft gesetzt.

Hat dir dieser Beitrag gefallen oder fehlt dir etwas? Oder hast du vielleicht Feedback? Dann schreibe mir auf Twitter! Außerdem würde ich mich sehr freuen, wenn du diesen Beitrag teilst. Damit hilfst du mir meine Seite noch bekannter zu machen, damit ich noch mehr Menschen auf ihrem Weg zum Web Developer unterstützen kann. ❤️