Hello World React.js Tutorial: Erstellen Sie Ihre Erste React-Anwendung

Willkommen zu unserem “Hello World React.js Tutorial”, in dem wir Sie durch den Aufbau Ihrer ersten React-Anwendung führen werden. React.js ist eine der beliebtesten Frontend-JavaScript-Bibliotheken zur Erstellung von Benutzeroberflächen. Seine komponentenbasierte Architektur und das virtuelle DOM machen es effizient und flexibel. Wenn Sie neu in React.js sind, ist ein “Hello World”-Beispiel der perfekte Ausgangspunkt, um die grundlegenden Konzepte zu verstehen. In diesem Artikel werden wir eine einfache “Hello World”-Anwendung in React.js erstellen.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Node.js und npm (Node Package Manager) auf Ihrem Computer installiert sind. Sie können sie von der offiziellen Node.js-Website herunterladen und installieren.

Einrichtung einer React-App

React bietet ein Tool namens create-react-app, um schnell ein neues React-Projekt einzurichten. Öffnen Sie Ihr Terminal oder die Eingabeaufforderung und führen Sie den folgenden Befehl aus, um eine neue React-App namens hello-world-react zu erstellen:

npx create-react-app hello-world-react

Dieser Befehl erstellt ein neues Verzeichnis namens hello-world-react und richtet eine grundlegende React-Projektstruktur darin ein.

Navigieren Sie als nächstes in das Projektverzeichnis:

cd hello-world-react

Erstellung einer Hello World Komponente

In React ist alles eine Komponente. Wir werden eine einfache funktionale Komponente erstellen, um unsere “Hello World”-Nachricht anzuzeigen.

Öffnen Sie das Verzeichnis src in Ihrem Code-Editor und erstellen Sie eine neue Datei namens HelloWorld.js. Fügen Sie dann den folgenden Code hinzu, um unsere Komponente zu definieren:

// src/HelloWorld.js

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a basic React.js application.</p>
    </div>
  );
}

export default HelloWorld;

In diesem Code:

• Wir importieren React, da jede React-Komponente Zugriff auf die React-Bibliothek haben muss.
• Die Funktion HelloWorld ist eine einfache funktionale Komponente, die JSX (JavaScript XML) zurückgibt.
• JSX ermöglicht es uns, HTML-ähnlichen Code direkt innerhalb von JavaScript zu schreiben.
• Wir exportieren die HelloWorld-Komponente, damit wir sie in anderen Teilen unserer Anwendung verwenden können.

Rendern der Hello World Komponente

Nun lassen Sie uns unsere HelloWorld-Komponente innerhalb der Haupt-App-Komponente rendern.

Öffnen Sie das Verzeichnis src und bearbeiten Sie die Datei App.js. Ersetzen Sie den Inhalt durch den folgenden Code:

// src/App.js

import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HelloWorld />
      </header>
    </div>
  );
}

export default App;

In diesem Code:

• Wir importieren die HelloWorld-Komponente, die wir zuvor erstellt haben.
• Innerhalb der App-Komponente rendern wir die HelloWorld-Komponente.
• Die Attribute className="App" und className="App-header" dienen der Stilgebung. Sie können diese Stile in der Datei src/App.css finden.

Ausführen der React-App

Nun, da wir unsere “Hello World”-Komponente erstellt und gerendert haben, lassen Sie uns unsere React-App ausführen!

Stellen Sie im Terminal sicher, dass Sie sich im Verzeichnis hello-world-react befinden, und führen Sie dann aus:

npm start

Dieser Befehl startet den Entwicklungsserver und öffnet Ihre App im Standardbrowser. Sie sollten die Nachricht “Hello, World!” zusammen mit dem begleitenden Absatz im Browser sehen.

Verständnis des React-Codes

• Komponenten: In React erstellen wir wiederverwendbare UI-Komponenten. Unsere HelloWorld-Komponente ist eine einfache funktionale Komponente, die JSX zurückgibt.
• JSX: JSX ermöglicht es uns, HTML-ähnlichen Code direkt in unseren JavaScript-Dateien zu schreiben. Dies macht unseren Code lesbarer und prägnanter.
• Rendern: In der App-Komponente rendern wir die HelloWorld-Komponente. React verwendet ein virtuelles DOM, um das tatsächliche DOM effizient zu aktualisieren, wenn sich Komponenten ändern.
• npm start: Dieser Befehl startet den Entwicklungsserver. Änderungen, die Sie an Ihrem Code vornehmen, laden die App automatisch im Browser neu.

Fazit

Dieses einfache Beispiel demonstriert die Kernkonzepte von React, einschließlich Komponenten, JSX und Rendern. Während Sie Ihre Reise mit React fortsetzen, werden Sie fortgeschrittenere Themen wie Zustandsverwaltung, Props und Lebenszyklusmethoden erkunden. Die offizielle React-Dokumentation ist eine ausgezeichnete Ressource, um tiefer in diese Themen einzutauchen: React-Dokumentation.

Jetzt, da Sie ein grundlegendes Verständnis haben, können Sie gerne experimentieren, indem Sie weitere Komponenten hinzufügen, Styles anwenden oder sogar Daten von APIs abrufen. Die Flexibilität von React und das umfangreiche Ökosystem von Bibliotheken machen es zu einem leistungsstarken Werkzeug für den Aufbau moderner Webanwendungen.