React from o Hero: Lesson Getting Started

Hallo Entwickler,

Willkommen zur ersten Lektion unserer React from 0 to Hero-Serie! In diesem Tutorial behandeln wir die absoluten Grundlagen, die Sie für den Einstieg in React benötigen. Am Ende dieser Lektion haben Sie React auf Ihrem Computer installiert und ausgeführt und Sie werden die Kernkonzepte verstehen, die React zu einer so leistungsstarken Bibliothek für die Erstellung moderner Webanwendungen machen.

---

Was ist Reagieren?

React ist eine von Facebook erstellte JavaScript-Bibliothek zum Erstellen dynamischer, interaktiver Benutzeroberflächen. Der Schwerpunkt liegt auf der Erstellung wiederverwendbarer Komponenten – kleine, in sich geschlossene Codeteile –, die in Ihrer gesamten Anwendung wiederverwendet werden können. Der deklarative Charakter von React macht die Erstellung komplexer Benutzeroberflächen einfach und effizient und ist in der Webentwicklungs-Community weit verbreitet.

---

Warum Reagieren lernen?

• Wiederverwendbare Komponenten: Einmal schreiben, überall verwenden. React-Komponenten machen Ihren Code wartbarer und skalierbarer.
• Schnell und effizient: React verwendet ein virtuelles DOM, um effizient zu aktualisieren und nur die Teile der App zu rendern, die geändert werden müssen.
• Starke Community: Mit einem riesigen Ökosystem an Tools und Bibliotheken ist React heute eines der beliebtesten Front-End-Frameworks.

---

Schritt 1: Node.js und npm installieren

Bevor wir in React eintauchen, müssen wir Node.js und npm (Node Package Manager) installieren. Diese helfen uns, Abhängigkeiten zu verwalten und React auszuführen.

So installieren Sie Node.js und npm:

1. Node.js herunterladen: Gehen Sie zur offiziellen Node.js-Website und laden Sie die neueste stabile Version (LTS) herunter. Das Installationsprogramm enthält auch npm.
2. Node.js installieren: Führen Sie das Installationsprogramm aus und befolgen Sie die Anweisungen.
3. Installation überprüfen: Öffnen Sie nach der Installation ein Terminal oder eine Eingabeaufforderung und geben Sie die folgenden Befehle ein, um sicherzustellen, dass alles funktioniert:

   node -v
   npm -v

Sie sollten gedruckte Versionen sowohl für Node als auch für npm sehen.

---

Schritt 2: Einrichten Ihrer ersten React-App

React bietet ein Tool namens Create React App, mit dem Sie schnell ein neues React-Projekt einrichten können, ohne Build-Tools konfigurieren zu müssen.

So erstellen Sie eine Reaktions-App:

1. Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung.
2. Führen Sie den folgenden Befehl aus, um React App erstellen global zu installieren:

   npx create-react-app my-first-react-app

Dadurch wird ein neuer Ordner mit dem Namen „my-first-react-app“ erstellt, der alles enthält, was Sie für den Einstieg benötigen.

1. Navigieren Sie in Ihr neues Projektverzeichnis:

   cd my-first-react-app

1. Starten Sie Ihre React-App:

   npm start

Dadurch wird ein Entwicklungsserver geöffnet und Ihr Standardbrowser sollte automatisch einen Tab öffnen, in dem Ihre neue React-App unter http://localhost:3000/ ausgeführt wird.

---

Schritt 3: Erkundung der Projektstruktur

Werfen wir einen Blick auf die Dateien und Ordner, die von React App erstellen:

erstellt wurden

• public/: Dieser Ordner enthält die HTML-Datei und andere statische Assets (Bilder, Symbole usw.).
• src/: Hier werden alle React-Komponenten und Ihr Hauptcode gespeichert. Sie werden die meiste Zeit hier verbringen.
• package.json: Diese Datei listet alle Abhängigkeiten und Skripte für Ihr Projekt auf.

---

Schritt 4: Ihre erste Reaktionskomponente

Lassen Sie uns nun in die Datei src/App.js eintauchen, die die Hauptkomponente Ihrer App definiert. Eine Komponente ist eine JavaScript-Funktion, die HTML-ähnlichen Code zurückgibt (genannt JSX). So sieht die Standardkomponente aus:

import React from 'react';

function App() {
  return (
    <div classname="App">
      <h1 id="Hello-React">Hello, React!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

Sie können die App.js-Datei bearbeiten, um sie anzupassen. Versuchen Sie, die Überschrift in etwas anderes zu ändern:

<h1 id="Welcome-to-React-from-to-Hero">Welcome to React from 0 to Hero!</h1>

Speichern Sie die Datei und Ihr Browser wird automatisch aktualisiert, um Ihre Änderungen anzuzeigen.

---

Abschluss

Herzlichen Glückwunsch! ? Sie haben Ihre erste React-App erfolgreich eingerichtet und Ihre erste Komponentenänderung vorgenommen. Dies ist der Beginn Ihrer Reise mit React. In der nächsten Lektion tauchen wir tiefer in die React-Komponenten ein und lernen, wie man Zustand und Requisiten verwaltet, um dynamische Benutzeroberflächen zu erstellen.

Sie können unten gerne Kommentare oder Fragen hinterlassen und bleiben auf dem Laufenden für Lektion 2!

---

Was kommt als nächstes?

In der nächsten Lektion behandeln wir Folgendes:

• Ein tieferer Einblick in Komponenten
• So gehen Sie mit Benutzerinteraktionen um
• Einführung in Staat und Requisiten

Codieren Sie weiter :)

The above is the detailed content of React from o Hero: Lesson Getting Started. For more information, please follow other related articles on the PHP Chinese website!