Was ist ein Build-Prozess in React (oder in einem anderen Framework?)

[Technologie]: ReactJS – Artikel #1

---

Die Frameworks vereinfachen die Entwicklung für Ingenieure und dies ist mein Versuch, die Funktionsweise von ReactJS hinter den Kulissen zu vereinfachen.

---

Zeit für Geschichten

Ich habe mit ReactJS angefangen. Ja, das habe ich wirklich. Es ist wie ein Traum, die Zeit, in der ich mich mit UI/UX-Design und Front-End-Entwicklung beschäftigte, um zwei Jahre zu verzögern, bevor ich mich der Datenwissenschaft zuwandte. (Ich bin immer noch so leidenschaftlich wie vor 2 Jahren.)

Ich bin jetzt Praktikant bei einem Unternehmen (das sich selbst als Startup bezeichnet, weil seine Kultur eher an die eines Start-ups als an die eines Unternehmens erinnert) und heute, an meinem ersten Tag, hatte ich seitdem buchstäblich nichts zu tun, Mein TL (Teamleiter) kam nicht ins Büro, da er mit einer Besprechung beschäftigt war.

Habe ich die Zeit verstreichen lassen? Absolut nicht.
Die Wahrscheinlichkeit, dass ich eine Aufgabe/ein Projekt bekam, um meine Datenanalysefähigkeiten auf die Probe zu stellen, war relativ gering. Deshalb habe ich mir bei der Entwicklung die Hände schmutzig gemacht. Ich konnte spüren, dass dies der beste Zeitpunkt sein könnte, mit ReactJS zu beginnen.

---

Was ist Reagieren?

Reagieren ist ein Verb (Wortspiel beabsichtigt). Aber im Kontext von Entwicklungstechnologien behauptet die offizielle Website von ReactJS „Die Bibliothek für Web- und native Benutzeroberflächen“

Wenn Sie sich mit dem Entwicklungsökosystem auskennen, haben Sie bestimmt schon von zwei anderen Konkurrenten gehört, genauer gesagt von den Geschwistern von ReactJS, nämlich Angular und VueJS.

Hier ist ein kurzer Vergleich der drei beliebtesten Front-End-Technologien.

Kernkonzept

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

Bibliothek mit Fokus auf UI Vollwertiges Framework Progressiver Rahmen Datenbindung Einseitiger Datenfluss Zwei-Wege-Datenbindung Zwei-Wege-Datenbindung (optional) Komponentenstruktur Benutzerdefinierte Komponenten Anweisungen und Komponenten Komponenten Lernkurve Mäßig Steil Sanft Leistung Hoch (Virtuelles DOM) Kann aufgrund der bidirektionalen Datenbindung langsamer sein Hoch (Optimiertes Rendering) Skalierbarkeit Ausgezeichnet, geeignet für große Apps Starke Unterstützung für große Unternehmensanwendungen Gute Skalierbarkeit, erfordert jedoch möglicherweise zusätzliche Bibliotheken für komplexe Projekte Gemeinschaft und Ökosystem Größte Community, reiches Ökosystem Große Community, starkes Ökosystem Wachsende Community, gutes Ökosystem Flexibilität Hoch, kann mit anderen Bibliotheken/Frameworks verwendet werden Weniger flexibel aufgrund der starren Struktur Flexibel, inkrementell einsetzbar

---

Warum sollten wir ReactJS verwenden, wenn wir einfaches HTML und JS haben?

Nachteile von einfachem HTML und JS.

Die folgenden Probleme werden auf Sie zukommen, wenn Sie Folgendes verwenden:

Schwierigkeiten bei der Wartung großer Anwendungen:

• Einfachem HTML und JS fehlt ein strukturierter Ansatz zum Organisieren von Code.

• Komplexe Anwendungen können zu einem Wirrwarr aus Logik und UI-Manipulation in Ereignis-Listenern und Skriptdateien führen.

• Das macht es schwierig, Code zu verstehen, zu ändern und zu debuggen, wenn die Anwendung wächst.

Ineffiziente DOM-Manipulation:

• Die direkte Manipulation des DOM in JS kann ineffizient sein.

• Jede Statusänderung kann eine vollständige Neudarstellung der HTML-Struktur auslösen, selbst bei kleineren UI-Updates.

• Dies kann mit zunehmender Anwendungskomplexität zu Leistungsengpässen führen.

Eingeschränkte Wiederverwendbarkeit:

• Das Erstellen wiederverwendbarer UI-Komponenten mit einfachem HTML und JS kann mühsam sein.

• Möglicherweise müssen Sie Codeausschnitte kopieren und in verschiedene Teile Ihrer Anwendung einfügen.

• Das macht es schwierig, die Konsistenz aufrechtzuerhalten und Änderungen effizient umzusetzen.

Komplexes Zustandsmanagement:

• Die Verwaltung des Status einer Anwendung (Daten, die das Verhalten der Benutzeroberfläche steuern) wird mit einfachem HTML und JS schwierig.

• Das Verfolgen von Datenänderungen und den entsprechenden UI-Updates kann chaotisch und fehleranfällig werden, insbesondere bei komplexen Datenflüssen.

---

Wie ReactJS zur Rettung kommt.

ReactJS geht auf diese Einschränkungen ein, indem es eine komponentenbasierte Architektur, virtuelles DOM für effiziente Updates und ein umfangreiches Ökosystem für die Verwaltung komplexer Benutzeroberflächen und des Anwendungsstatus bietet.

Verbesserte Wartbarkeit:

• Die komponentenbasierte Architektur und der deklarative Ansatz von React führen zu saubereren und besser wartbaren Codebasen, insbesondere für umfangreiche Anwendungen.

Verbesserte Leistung:

• Das virtuelle DOM und die effizienten Rendering-Mechanismen in React tragen zu einer reibungsloseren und schnelleren Benutzererfahrung bei, selbst bei komplexen Webanwendungen.

Wiederverwendbarkeit des Codes:

• Das Komponentenmodell von React fördert die Wiederverwendbarkeit von Code und ermöglicht Ihnen die Erstellung modularer UI-Komponenten, die problemlos in Ihrer Anwendung gemeinsam genutzt und kombiniert werden können.

---

Der Unterschied macht den Unterschied.

Als ich meine ersten Komponenten erstellt habe, habe ich mich gefragt: „Was genau“ ist das? Ist es HTML oder JS?

Ich habe JS über <script> in den HTML-Code eingebettet. </script> Element oder Element. Aber das Schreiben von HTML in eine JS-Datei fühlt sich komisch oder eher anders an.

Ich habe versucht, den HTML-Code in die JS-Datei eines Nicht-React-Projekts zu schreiben und raten, was nicht gut gelaufen ist.

Dann habe ich erfahren, dass diese spezielle Syntax (HTML wie innerhalb der JS-Datei) als JSX JavaScript XML bezeichnet wird und eine Erweiterung von JavaScript ist.

Wenn es sich bei dem Code, den Browser verstehen, letztendlich um einfaches HTML und JS handelt, bedeutet das, dass einige Vorgänge auf dem JSX (syntaktischer Zucker zum einfachen Erstellen komplexer Anwendungen) ausgeführt werden, den wir schreiben.

Diese Vorgänge hinter den Kulissen selbst werden als Build-Prozess bezeichnet.

Die übergeordnete Idee eines Build-Prozesses besteht darin, Ihren Entwicklungscode in eine optimierte Version umzuwandeln, die für die Bereitstellung in einer Produktionsumgebung bereit ist.

Während spezifische Tools und Konfigurationen je nach Technologie-Stack variieren können, gelten die allgemeinen Konzepte und Ziele des Build-Prozesses allgemein für die gesamte Frontend-Webentwicklung.

---

Was ist ein Build-Prozess in ReactJS?

Wir haben gelernt, dass die übergeordnete Idee dieselbe bleibt, die verschiedenen Phasen im Build-Prozess von React jedoch wie folgt sind:

1. Bündelung:
   • Stellen Sie sich vor, Ihre React-Anwendung besteht aus zahlreichen JavaScript-Dateien, CSS-Stylesheets und möglicherweise Bild-Assets.

Ein Bundler wie Webpack nimmt alle diese separaten Dateien und kombiniert sie zu einer kleineren Anzahl optimierter Bundles.

1. Übersetzung:

   • Bei der Transpilation wird dieser moderne Code (JSX) in einfaches JavaScript (ES5 oder eine kompatible Version) konvertiert, das auf einer größeren Auswahl an Browsern ausgeführt werden kann.

2. Minimierung:

   • Die Minimierung verringert die Dateigröße Ihres gebündelten Codes, indem unnötige Zeichen wie Leerzeichen, Kommentare und lange Variablen-/Funktionsnamen entfernt werden.

3. Optimierung:

   • Der Build-Prozess kann zusätzliche Optimierungen wie Tree-Shaking beinhalten, wodurch nicht verwendeter Code aus Ihren endgültigen Bundles entfernt wird.

4. Produktionsmodus:

   • Der Entwicklungsmodus bietet Funktionen wie Quellkarten (zum einfacheren Debuggen) und detaillierte Fehlermeldungen.

Im Gegensatz dazu konzentriert sich der Produktionsmodus auf die Optimierung, indem er Minimierung, Tree-Shaking und andere Leistungsverbesserungen ermöglicht.

---

React-Scripts: Das Wolf of React-Projekt

react-scripts ist ein internes Paket, das von Create React App (CRA) verwendet wird, um die Funktionen hinter den Kulissen in einem React-Projekt zu verwalten.

Entwickler interagieren die meiste Zeit nicht direkt damit, sind aber für die Entwicklungseffizienz unerlässlich.

Hier ist, wofür React-Scripts verantwortlich ist:

• Bündelung und Transpilation
• Entwicklungsserver und Hot Reloading
• Testen
• Gebäude für die Produktion

Die drei wichtigsten Aufgaben der React-Scripts sind die folgenden, die wir im Detail verstehen werden:

1. Bündelung:

   • Stellen Sie sich vor, Ihre React-Anwendung besteht aus zahlreichen JavaScript-Dateien, CSS-Stylesheets und möglicherweise Bild-Assets.
   • Ein Bundler wie Webpack nimmt alle diese separaten Dateien und kombiniert sie zu einer kleineren Anzahl optimierter Bundles.
   • Dies reduziert die Anzahl der HTTP-Anfragen, die ein Browser stellen muss, und verbessert so die Ladegeschwindigkeit der Website.

2. Übersetzung:

   • Moderne JavaScript-Funktionen wie die in React verwendete JSX-Syntax werden von älteren Browsern möglicherweise nicht verstanden.
   • Bei der Transpilierung wird dieser moderne Code in einfaches JavaScript (ES5 oder eine kompatible Version) konvertiert, das auf einer größeren Auswahl an Browsern ausgeführt werden kann.
   • Tools wie Babel werden häufig für die Transpilation in React verwendet.

3. Minimierung:

   • Minimierung, auch Minimierung genannt, ist eine Technik, die auf Code angewendet wird, um seine Dateigröße zu reduzieren, ohne seine Funktionalität zu beeinträchtigen.
   • Dies ist besonders vorteilhaft für React-Anwendungen, die in der Produktion eingesetzt werden, da kleinere Dateigrößen zu schnelleren Ladezeiten für Webseiten führen.

So funktioniert die Minimierung:

1. Unnötige Zeichen entfernen:

   • Minifier entfernen Leerzeichen wie Leerzeichen, Zeilenumbrüche und Tabulatoren aus dem Code. Dies mag bei kleinen Dateien unbedeutend erscheinen, kann aber bei großen React-Projekten zu einer spürbaren Größenreduzierung führen.

2. Variablen- und Funktionsnamen kürzen:

   • Minifikatoren ersetzen oft beschreibende Variablen- und Funktionsnamen durch kürzere, aus einem Buchstaben bestehende Namen. Dadurch wird der Code zwar für Menschen weniger lesbar, die Dateigröße wird jedoch erheblich reduziert.

3. Kommentare entfernen:

   • Kommentare sind für die Dokumentation und das Verständnis von Code während der Entwicklung unerlässlich. In der Produktion sind sie jedoch nicht erforderlich, damit der Code funktioniert. Minifier entfernen normalerweise Kommentare, um die Dateigröße weiter zu minimieren.

---

Abschluss

Dies ist das Lernen von nur einem Tag zusammengefasst.

Ich hätte viel mehr bauen können, wenn ich GenAI-Tools verwendet hätte. Ich habe GenAI-Tools so oder so verwendet, aber zu Lernzwecken.

Ich glaube, dass Sie sich von denen unterscheiden werden, die die Entwicklung automatisieren, wenn Sie die richtigen Fragen stellen und dann die Konzepte in ihrer Tiefe verstehen.

In den Interviews geht es um das Verständnis und die Klarheit des Konzepts und nicht um Ihre Codierungsgeschwindigkeit, denn so oder so wird es bis zu einem gewissen Grad automatisiert.

Der einzige entscheidende Faktor dafür, dass Sie ein großartiger Softwareentwickler sind, liegt in Ihrem Wissen, zumindest zu validieren und zu verifizieren, ob das Ergebnis des GenAI-Modells Ihren technischen Anforderungen entspricht oder nicht.

Wenn Sie denken, dass meine Inhalte wertvoll sind oder Feedback haben,
Erlauben Sie es mir, indem Sie sich an meine folgenden Social-Media-Kontakte wenden, die Sie in meinem Profil und den folgenden finden:

LinkedIn: https://www.linkedin.com/in/shrinivasv73/

Twitter (X): https://twitter.com/shrinivasv73

Instagram: https://www.instagram.com/shrinivasv73/

E-Mail: shrinivasv73@gmail.com

? Hier ist Shrinivas, Abmelden!

---

Das obige ist der detaillierte Inhalt vonWas ist ein Build-Prozess in React (oder in einem anderen Framework?). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!