Starten Sie Ihre React-Reise: So erstellen Sie Ihre erste React-App!

React ist eine Open-Source-JavaScript-Bibliothek, die von Jordan Walke, einem Softwareentwickler bei Meta, erstellt wurde. Es wird zum Erstellen von Benutzeroberflächenkomponenten (UI) für Einzelseitenanwendungen verwendet. React wurde erstmals 2011 in Facebook-Newsfeeds verwendet und dann zu Instagram hinzugefügt, nachdem Facebook die App 2012 gekauft hatte. Sie wurde Ende 2013 unter einer Open-Source-Lizenz der Öffentlichkeit zugänglich gemacht und erfreut sich enormer Beliebtheit. React ist die am weitesten verbreitete JavaScript-Bibliothek und wird laut einer Stack Overflow-Umfrage im vergangenen Jahr von über 40 % der Entwickler verwendet.

Warum ist React so beliebt?

Fragen Sie einen Webentwickler nach den Vorteilen der Nutzung seiner Dienste und Sie erhalten eine lange Liste als Antwort. Sie sprechen über die Komponenten The Virtual DOM, JSX und One-Way Data Binding. Dieses Ding macht das Entwicklerleben einfacher. Deshalb ist React bei Webentwicklern so beliebt

Einrichten der Umgebung

Wir verstehen jetzt, was React ist und warum es so beliebt ist.

Lassen Sie uns den Prozess der Einrichtung der Umgebung für die Ausführung von React auf unserem lokalen Computer durchgehen.

Öffnen Sie zunächst Ihren bevorzugten Webbrowser und suchen Sie nach Node.js. Sobald Sie die offizielle Node.js-Website gefunden haben, navigieren Sie zur Registerkarte „Download“ und wählen Sie die entsprechende Node.js-Datei basierend auf dem Betriebssystem und der Architektur Ihres Computers (32-Bit/64-Bit) aus. Nachdem Sie die Datei heruntergeladen haben, führen Sie sie aus und fahren Sie mit der Installation von Node.js auf Ihrem lokalen Computer fort. Um zu überprüfen, ob Node.js erfolgreich auf Ihrem Computer installiert wurde, öffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus:

node -v
npm -v

Wenn sie ihre Version angeben, bedeutet das, dass Node.js erfolgreich installiert wurde.

Erstellen eines Reaktionsprojekts

Um ein React-Projekt einzurichten, öffnen Sie Ihren bevorzugten Webbrowser und suchen Sie nach „Vite“. Besuchen Sie die offizielle Website von Vite und kopieren Sie den Befehl „npm create vite@latest“. Fügen Sie dann diesen Befehl in Ihr Terminal ein. Sie werden aufgefordert, einige Informationen anzugeben, z. B. Ihren Projektnamen, Ihre Bibliothek und die bevorzugte Sprache für die React-Bibliothek. Nachdem Sie die Fragen beantwortet haben, navigieren Sie zu Ihrem Projektordner und öffnen Sie das Terminal in diesem Ordner. Führen Sie den Befehl „npm i“ aus, um die erforderlichen Pakete herunterzuladen. Um das Projekt auszuführen, verwenden Sie den Befehl „npm run dev“ und das Projekt wird auf localhost:5137 ausgeführt. Glückwunsch! Sie haben Ihr erstes Projekt erfolgreich eingerichtet. ?

Die Dateistruktur verstehen

Nachdem Sie das React-Projekt eingerichtet haben, öffnen Sie es in Ihrem bevorzugten Code-Editor. Sobald Sie das Projekt öffnen, werden einige Dateien und Ordner angezeigt. Sie finden die Datei index.html, die Hauptdatei zum Rendern Ihres HTML im Webbrowser. Im src-Ordner können Sie Ordner und Dateien erstellen, damit Ihre Webanwendung so funktioniert und aussieht, wie Sie es möchten. Es gibt zwei Hauptdateien: main.js, das für das Rendern von Komponenten in React verantwortlich ist, und app.js, das als Einstiegspunkt für Komponenten dient.

Abschluss

Herzlichen Glückwunsch! Sie haben gerade Ihre erste React-App von Grund auf erstellt. Während dieser Reise haben Sie gelernt, wie Sie Ihre Umgebung einrichten, ein Projekt mit Vite erstellen und die Dateistruktur verstehen. Die Flexibilität und die komponentenbasierte Struktur von React machen es zu einem leistungsstarken Werkzeug für die Erstellung moderner, dynamischer Webanwendungen. Nachdem Sie nun die Grundlagen beherrschen, sind Sie bereit, erweiterte Funktionen zu erkunden und Ihre React-Fähigkeiten auf die nächste Stufe zu bringen. Experimentieren Sie weiter, bauen Sie auf und lernen Sie – die Möglichkeiten mit React sind endlos!

Das obige ist der detaillierte Inhalt vonStarten Sie Ihre React-Reise: So erstellen Sie Ihre erste React-App!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!