Schnellstart mit ReactJS: Alles was Sie wissen müssen in 5 Minuten

ReactJS ist aufgrund seiner Flexibilität ein erstaunliches Stück JavaScript-Bibliothek, mit der Sie Komponenten so erstellen können, wie Sie es möchten. Aber es ist gleichzeitig auch gefährlich, weil vieles schief gehen kann, wenn man nicht aufpasst.

Sind Sie es leid, die offiziellen Dokumente selbst zu lesen oder zu lesen? Hier sind die Dinge, die Sie jetzt in React lernen müssen:

Beginnen Sie schnell mit React, indem Sie Starterkits/Boilerplates verwenden

Wenn Sie einfach loslegen und eine App mit React erstellen möchten, müssen Sie den Boilerplate-Code von Facebook auf dieser Seite herunterladen:

Der Aufbau eines eigenen Projekts von Grund auf braucht Zeit. Wenn Sie nur das Wasser testen und schnell React-Projekte erstellen möchten, ohne Zeit mit Setups zu verschwenden, empfehle ich Ihnen die Boilerplate.

Sie können auch diese Website ausprobieren, die die gesamte Liste der vorhandenen React-Boilerplates/Starter-Kits enthält und filtert, nach denen Sie möglicherweise speziell suchen (z. B. die Verwendung von TypeScript im Voraus):

Es gibt auch einige Starter-Kits, die vom Facebook-Team empfohlen wurden, Sie sollten sich dieses ansehen:

Wenn Sie React-Projekte wirklich von Grund auf selbst erstellen möchten, lernen Sie zuerst diese Dinge:

Babel

Babel ist ein erstaunliches Tool zum Transpilieren von JavaScript-Dateien aus den neuesten Versionen von ECMAScript in die vorherige Version, sodass die Kompatibilität mit älteren Browserversionen erhalten bleibt. Sie werden also kein Problem haben, wenn Sie die neuesten ES-Versionen von JavaScript verwenden, wie z Verwendung von Destrukturierungs- oder Rest-, Spread- oder Pfeilfunktionssyntax.

Standardmäßig wird die JSX-Syntax von ReactJS nicht als offizielle Syntax von JavaScript unterstützt. Also müssen wir babel verwenden, um die JSX-Syntax (leider) in einfaches JavaScript zu transpilieren.

Wenn Sie React wirklich ohne eines dieser Setups verwenden möchten, werden Sie in seiner einfachen Form codieren, so wie Sie es auf der rechten Seite des Bildes sehen.

Webpaket

Im Kern ist webpack ein statischer Modul-Bundler für moderne JavaScript-Anwendungen. Wenn Webpack Ihre Anwendung verarbeitet, erstellt es intern einen Abhängigkeitsgraphen, der jedes Modul abbildet, das Ihr Projekt benötigt, und ein oder mehrere Bundles generiert

Wie die Dokumentation sagt, ist Webpack ein Modul-Bundler, der Ihre JavaScript-Dateien in eine bündelt oder in verschiedene Teile aufteilt, um die Leistung zu verbessern. Webpack funktioniert ziemlich gut mit Babel, daher ist es ziemlich einfach, die JSX-Syntax in einfaches Javascript zu transpilieren und sie nahtlos in Ihr Projekt zu bündeln.

Komponentenbasiert, Events, State, Props – Das Wesentliche von React


Komponente, Ereignisse, Zustandsänderung, Re-Rendering

Alles ist eine Komponente

Jede React-Datei wird als Komponente betrachtet. Dies ist anders als in den Tagen, als Sie jQuery verwendeten, wo Sie das DOM auf Kosten der Wiederverwendbarkeit und Lesbarkeit des Codes manuell aktualisierten.

Ereignisse, mit denen Benutzer interagieren können

Zu Beginn Ihrer Reise in React sagen Ihnen die Dokumente, dass Sie wahrscheinlich Ereignisse verwenden müssen, um Benutzerinteraktionen zu handhaben. Das ist etwas, das ich in der Bibliothek wirklich geliebt habe, obwohl es in einigen Javascript-Bibliotheken nicht offensichtlich ist, bin ich froh, dass sich React mehr auf Ereignisse und Zustände konzentriert.

Requisiten, die die Eigenschaften Ihrer Komponente definieren

Requisiten sind die Konfiguration einer Komponente, ihre Optionen, wenn Sie so wollen. Sie werden von oben empfangen und sind unveränderlich. Sie könnten sagen, dass sie die Eigenschaften Ihrer Komponente sind, genau wie die Eigenschaften der objektorientierten Programmierung funktionieren.

Staat, der Ihre Komponente hält und ändert

Sie verwenden den Status, um eine Änderung des Komponentenverhaltens, der Daten und des Aussehens vorzunehmen. Wenn dies der Fall ist, gibt React ein erneutes Rendern aus, um Ihre Benutzeroberfläche auf der Client-Seite zu aktualisieren. Dies ist nützlich, wenn Sie versuchen, Objekte zu manipulieren, Benutzeroberflächen, die sich ändern, wenn der Benutzer damit interagiert. Oder hängen Sie ein Array von Daten an und legen Sie seinen Zustand fest.

State Management Libraries, die Sie benötigen

Es gibt Zeiten, in denen die Verwendung von Vanilla React nicht ausreicht, um umfangreiche Web-Apps zu erstellen. In diesem Fall müssen Sie wahrscheinlich Zustandsverwaltungsbibliotheken verwenden, die die Lücke füllen und Ihren Zustand effizient verwalten.

Warum braucht man sie? Denn mit einfachem React können Sie Zustände nur auf Komponentenebene verwalten. Wenn also zwei oder mehr Komponenten denselben Status verwenden müssen, wird dies schwieriger. State Management Libraries erledigt das für Sie. Überzeugen Sie sich selbst.

Redux

Obwohl seine Einfachheit umstritten ist, müssen Sie immer noch wissen, was es ist Aktionen, Aktionsersteller, Reduzierer, Konnektoren, mapStateToProps usw. Der Autor selbst empfiehlt die Verwendung von Redux nicht, es sei denn, Ihre App wird komplex, was wahr ist. Seinen Artikel können Sie hier lesen:

Fragen Sie sich also vor der Verwendung immer, ob es Ihren Team- und Zeitaufwand und den Anwendungsfall Ihrer App wert ist. Wenn es klein ist, dann this.SetState() reicht für deinen Bedarf. 😉

Fluss

Lange bevor Redux gebaut wurde, gab es Flux, das vom Facebook-Team entwickelt wurde, um React zu ergänzen und den Zustand in einer separaten Bibliothek zu verwalten Unidirektionaler Datenfluss.

Jetzt verwendet Redux das gleiche Designmuster wie Flux, aber Redux ist eine verbesserte Version von Flux. Obwohl Flux je nach Anwendungsfall seine eigenen Vorzüge hat. Ich weiß, dass einige Leute immer noch Flux in ihren großen Projekten verwenden, also ist dies je nach Ihren Anforderungen immer noch eine Überlegung wert.

MobX

MobX ist eine kampferprobte Bibliothek, die die Zustandsverwaltung einfach und skalierbar macht, indem sie die funktionale reaktive Programmierung (TFRP) transparent anwendet. Die Philosophie hinter MobX ist sehr einfach:

Alles, was aus dem Anwendungszustand abgeleitet werden kann, sollte abgeleitet werden. Automatisch.

Dazu gehören die Benutzeroberfläche, die Datenserialisierung, die Serverkommunikation usw.

Viele Entwickler aus der React-Community scheinen mir diese Zustandsverwaltung vorzustellen. Ich persönlich habe diese im Moment noch nicht verwendet.

Es scheint, dass sich das MobX-Ökosystem um die Verwendung des beobachtbaren Zustands dreht. Es könnte also eine Überlegung wert sein.

Einige Anwärter auf das Staatsmanagement

Hier sind einige der Konkurrenten, die Sie verwenden möchten:

Ich werde diese Liste später aktualisieren, wenn ich die Möglichkeit habe, mehr über bestehende Staatsverwaltungsbibliotheken zu recherchieren.


Wenn dir meine Geschichten gefallen, Kauf mir einen Kaffee für Spenden

Similar Posts

Leave a Reply

Your email address will not be published.