React-Entwicklererfahrung

Ich hatte das Gefühl, dass ich ein paar Gedanken über meine Erfahrungen mit der React-Entwicklung teilen musste, also wurde dieser Artikel geboren. Folgendes Zeilen sind nur meine eigene Meinung, spiegelt meine eigene Realität wider, bitte lesen Sie es mit einem kritischen Auge, da ein Kollege Die Erfahrung des Entwicklers kann sehr unterschiedlich sein.

Im Laufe der Jahre als Entwickler hatte ich die Möglichkeit, mit vielen JavaScript-Frameworks und -Bibliotheken zu arbeiten, aber keines von ihnen haben meine Aufmerksamkeit so sehr erregt wie React.

Dinge, die mich bei der Arbeit mit React glücklich machen

Oh, diese Bauteile!

Eines der Features, die ich an React wirklich mag, ist die komponentenbasierte Architektur. Es ist ein Kinderspiel, komplexe Benutzeroberflächen in kleine, wiederverwendbare Teile. Wenn ich aus irgendeinem Grund ein UI-Element im Quellcode wie ein "Feature" ist kein Bug, es ist wirklich einfach wegen dieser Struktur. Kollaboration, Kooperation mit anderen Entwicklern Auch ein Kinderspiel. Und wenn das alles noch nicht genug ist, denken Sie nur an die zahlreichen Pakete, Komponenten, Bibliotheken Geschrieben von der Community. Natürlich erfordert die Auswahl des richtigen Toolsets Überlegungen, wie z. B. die Benutzerbewertung, Wartbarkeit, Häufigkeit von Updates und natürlich ist es auf meine Bedürfnisse abgestimmt.

React-Entwickler-Community.

Die Community ist aktiv und hilfsbereit, eine große Menge an Dokumentation und Tutorial ist leicht verfügbar. Ganz zu schweigen von vielen der Bibliothek und des Tools von Drittanbietern macht die Entwicklung mit React angenehm. Veranstaltungen, Konferenzen sind keine Seltenheit, in der Regel mit großer öffentlicher Aufmerksamkeit.

Die Freiheit

Ohne Zweifel bietet React eine große Freiheit, da meine Hände nicht daran gebunden sind, wie und welche Tools ich genau verwenden muss. um ein Problem zu lösen. Es gibt keine Einschränkungen für die Funktionsweise des Routings, oder Sie müssen Daten wie diese abfragen, aber die Die Zustandsverwaltung muss auf diese Weise implementiert werden, sonst kann etwas nur in diesem bestimmten Modus funktionieren. Je nach Das Projekt, aber ob Sie reines React oder eines der Frameworks verwenden möchten, liegt ganz im Ermessen des Entwicklers. Ich bin ein bisschen Ich fürchte zu erwähnen, dass die Verwendung von Vanilla JS oder Typescript optional ist, was zu hitzigen Debatten führt. Zum Zeitpunkt der Schreiben Sie diesen Artikel, allgemein akzeptierte Ansicht, wenn Sie kein Typescript verwenden, dann sind Sie kein echter React-Entwickler.

Genau aus diesem Grund haben viele Menschen ein schlechtes Gefühl in Bezug auf React. Sie stellen die Fragen, wie wäre es mit großen Entwicklerteams, die an einer gemeinsamen Codebasis arbeiten, was ist die Ordnerstruktur, Nomenklatur für den Code, was ist die Situation mit Apps auf Unternehmensebene usw.

Für mich ist es ein großer Unterschied, ob mir etwas aufgezwungen wird, ob es in meinem eigenen Interesse ist oder ob es Ich werde entschieden, was meine bevorzugte beste Lösung für mich und meine App ist.

Wenn Sie mehr über die Vorteile der Verwendung von React erfahren möchten, können Sie dies tun aus meinem früheren Artikel.

Wenn die Traube sauer ist

Lernkurve

Ich will ehrlich sein, das Erlernen von React kann eine steile Kurve sein, nachdem man das absolute Anfängerniveau verlassen hat, insbesondere wenn die Der Entwickler kennt das JavaScript-Ökosystem nicht. Ein Junior muss viel Zeit aufwenden, um sich mit JSX und React vertraut zu machen Haken, aber wenn man den Dreh raus hat, ist man auf dem richtigen Weg.

Zustandsverwaltung

Das andere umständliche Problem ist, wenn ein Anfängerentwickler mit der Zustandsverwaltung konfrontiert wird. Atme tief durch, würzen Sie es mit Hingabe und werden Sie durch das Überspringen dieser Messlatte ein vollwertiger React-Entwickler.

Alte Muster, Lösungen

Nehmen wir einen Entwickler an, der im Jahr 2023 im Internet nach Hilfe sucht und Klassenkomponenten, Lebenszyklusmethoden (die sind bis heute das Fundament von React, aber dank der Hooks abgenutzt) und fragen zu Recht, was diese? Es vergingen nur ein paar Jahre, und das waren unsere einzigen Optionen (sorry für die Aussichten).

Und wir haben noch nicht über Render-Requisiten und Komponenten höherer Ordnung gesprochen, die sich in einer anderen mystischen Vergangenheit verstecken. Es gibt Dinge, die man besser in Ruhe lässt, denn es kommt nichts Gutes dabei heraus, wenn man sie stört.

DOM im Vergleich zu virtuellem DOM

Ein Entwickler kann es beim ersten Mal schwer haben, D3.js oder etwas Ähnliches in ein React zu integrieren App, dies ist der Zeitpunkt, an dem der Entwickler das Problem erkennt, er / sie ist eingestiegen. Das ist die Geschichte eines anderen Tages, als ich zum ersten Mal begegnet ist. Die D3.js ändert das DOM, während React das virtuelle DOM beobachtet (von props, state, parent ändert die -Komponente neu gerendert wird).

const TestComponent = () => {
    const [backgroundColor, setBackgroundColor] = useState('')

    const handleColorChange = () => {
        setBackgroundColor('red')
    }

    const handleD3Change = () => {
        d3.select("#myID").style("background-color", "green")
    }

    return (
        <div id="myID" style={{backgroundColor}}>
            <button
                type='button'
                onClick={handleColorChange}
            >
                Change background to red.
            </button>
            <button
                type='button'
                onClick={handleD3Change}
            >
                Change background to green using D3.js
            </button>
            <div>
                Hello World!
            </div>
        </div>
    )
}

1. Ändern Sie den Hintergrund in Rot.
2. Ändern Sie den Hintergrund in grün, indem Sie das DOM mit D3.js ändern
3. Ändern Sie den Hintergrund mit dem üblichen React-Pfad in Rot.
4. Lassen Sie sich verwirren.

Natürlich gibt es Lösungen für dieses Problem, aber keine offensichtlichen und würden den Rahmen dieses Artikels sprengen.

Sich schnell veränderndes Ökosystem

Eine wichtige Sache, die man im Hinterkopf behalten sollte, ist, dass React ein sich schnell veränderndes Ökosystem ist. Als Entwickler müssen Sie auf dem neuesten Stand sein mit den neuesten Updates und empfohlenen Verfahren. Meiner Erfahrung nach ist das eine echte Herausforderung, vor allem bei großen und Komplexe Projekte, aber am Ende lohnt sich die investierte Zeit und Energie.

Zusammenfassung

Zusammenfassend lässt sich sagen, dass die Einführung von React ein Wendepunkt in meinem Entwicklerleben war. Die komponentenbasierte Architektur, Virtual DOM und eine aktive Community machten die Entwicklung von Webanwendungen effektiver und angenehmer. Ich sage nicht, dass es kostenlos ist von Herausforderungen, aber im Gegenzug die Belohnung den Kampf wert, damit wir mit einem breiten Lächeln ins Büro kommen können, um Erstellen Sie heute wieder etwas Großartiges mit diesem Tool.