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:

• 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>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>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!