Die Frameworks vereinfachen die Entwicklung für Ingenieure und dies ist mein Versuch, die Funktionsweise von ReactJS hinter den Kulissen zu vereinfachen.
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.
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.
| 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 |
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.
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:
Verbesserte Leistung:
Wiederverwendbarkeit des Codes:
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.
Wir haben gelernt, dass die übergeordnete Idee dieselbe bleibt, die verschiedenen Phasen im Build-Prozess von React jedoch wie folgt sind:
Ein Bundler wie Webpack nimmt alle diese separaten Dateien und kombiniert sie zu einer kleineren Anzahl optimierter Bundles.
Übersetzung:
Minimierung:
Optimierung:
Produktionsmodus:
Im Gegensatz dazu konzentriert sich der Produktionsmodus auf die Optimierung, indem er Minimierung, Tree-Shaking und andere Leistungsverbesserungen ermöglicht.
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:
Die drei wichtigsten Aufgaben der React-Scripts sind die folgenden, die wir im Detail verstehen werden:
Bündelung:
Übersetzung:
Minimierung:
So funktioniert die Minimierung:
Unnötige Zeichen entfernen:
Variablen- und Funktionsnamen kürzen:
Kommentare entfernen:
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!
