Ist React so schwierig/komplex, wie es sich anhört?

Reagieren erscheint Ihnen überwältigend?

Wenn ja, sind Sie nicht allein.

Solche Dinge höre ich ständig:

• Verwenden Sie React nicht; Verwenden Sie stattdessen Vue.

• Reagieren ist schwierig und nutzlos; Verwenden Sie stattdessen HTMX oder Vanilla JS.

• usw.

Aber als Senior Frontend Engineer mit 5 Jahren Erfahrung bei Palantir kann ich zuversichtlich sagen: „Reagieren war das Einfachste, was ich lernen musste.“

In diesem Beitrag erkläre ich, warum React nicht so komplex ist, wie die Leute es darstellen – und wie man die Herausforderungen meistert, wenn man Schwierigkeiten hat.

Fertig? Lass uns eintauchen.

? Laden Sie mein KOSTENLOSES Buch mit 101 React-Tipps und Tricks herunter, um einen Vorsprung zu haben.

7 Gründe, warum sich das Reagieren schwer anfühlt (und wie man es behebt)

Grund 1: Sie beherrschen JavaScript nicht gut genug

Menschen haben in 99 % der Fälle Probleme mit React, weil ihre JavaScript-Grundlage nicht solide ist.

Das traf auch auf mich zu – ich konnte den React-Code zunächst nicht verstehen. Ich habe Monate damit verbracht, etwas Anständiges zu schreiben. Das änderte sich alles, als ich JavaScript lernte.

Hier ist das Minimum, das Sie wissen müssen, bevor Sie React lernen:

• Der Unterschied zwischen primitiven und Objektdatentypen

• Objekte zerstören

• Geltungsbereich

• Schließungen

• Asynchron

• usw.

? Schauen Sie sich diesen großartigen Leitfaden von Kent C. Dodds zu den JavaScript-Konzepten an, die Sie für React kennen müssen.

Sobald sich Ihre JavaScript-Kenntnisse verbessern, wird sich Reagieren viel einfacher anfühlen.

? In meinem Beitrag „Wie Sie Ihre Frontend-Kenntnisse verbessern“ finden Sie nützliche Ressourcen zum Erlernen von JavaScript.

Grund 2: Sie verwenden die falschen Tools

Wenn Sie neu bei React sind, machen Sie sich nicht auf einen Misserfolg ein, indem Sie veraltete oder übermäßig komplexe Tools auswählen:

• Nicht verwenden React App erstellen: Es ist veraltet, langsam und nicht erweiterbar.

• Nicht verwenden Next.js (vorerst): Obwohl es erstaunlich ist, fügt es eine Lernkurve hinzu, die Sie nicht benötigen ein Anfänger.

Beginnen Sie stattdessen mit Vite. Es ist schnell, einfach und anfängerfreundlich. Du wirst mir später danken?.

Grund 3: Sie verwechseln React mit Frameworks

Reagieren ≠ Next.js ≠ Remix.

Next.js und Remix sind Frameworks, die auf React aufbauen, um Full-Stack-Anwendungen zu erstellen.

Sie müssen Next.js oder Remix nicht kennen, um React zu lernen.

Aber Sie müssen React kennen um eines davon verwenden zu können.

Konzentrieren Sie sich also zuerst auf die Reaktion. Frameworks können später kommen, da sie eine Ebene der Komplexität hinzufügen.

Grund 4: Sie versuchen, alles von Grund auf neu aufzubauen

Alles von Grund auf neu zu bauen – insbesondere im Hinblick auf die Barrierefreiheit – kann überwältigend sein.

Sie müssen jedoch nicht alleine damit umgehen.

Das Schöne an React ist sein Ökosystem aus Bibliotheken, die Ihnen das Leben erleichtern ?.

Betrachten Sie sie als Abkürzungen. Warum das Rad neu erfinden, wenn jemand anderes bereits ein unglaubliches Rad gebaut hat?

Hier einige Beispiele:

• DND-Kit für Drag-and-Drop-Funktionalität

• shadcn/ui für Styling

• SWR für einfachen Datenabruf

• usw.

Sparen Sie Zeit und Mühe, indem Sie diese Tools nutzen.

Grund 5: Sie sind unterbesetzt, nutzen aber keine Frameworks

Wenn Sie wenig Zeit oder Ressourcen haben (z. B. ein Ein-Personen-Team), können Frameworks wie Remix oder Next.js lebensrettend sein.

Wann man sie verwendet:

• Sie sind unterbesetzt

• Sie erstellen eine Full-Stack-App

• Sie möchten integriertes Routing, serverseitiges Rendering und mehr

Wenn Sie keine Full-Stack-Lösung benötigen, bleiben Sie bei React mit React Router und einigen wichtigen Bibliotheken.

Grund 6: Sie verstehen den Rendering-Prozess von React nicht (und haben letztendlich Leistungsprobleme)

Das Verständnis des React-Rendering-Prozesses ist entscheidend, um Leistungsprobleme zu vermeiden:

1. Rendering: React ruft Komponentenfunktionen (oder Klassenkomponenten-Rendermethoden) auf, um das virtuelle DOM zu generieren.

2. Abgleich: React vergleicht das virtuelle DOM mit dem realen DOM, um herauszufinden, was sich geändert hat.

3. Commit-Phase: React aktualisiert nur die notwendigen DOM-Elemente.

4. Malen: Der Browser malt den Bildschirm neu.

React Render Process. Credits: https://x.com/_georgemoller

Häufige Fehler, die Menschen machen:

• Zu viele Renderings: Beheben Sie dieses Problem, indem Sie den Status minimieren, den Status im Komponentenbaum niedrig halten und bei Bedarf Memoisierung verwenden (nicht @ me?: Memoisierung kann lebensverändernd sein) .
  
  ? Schauen Sie sich diesen Leitfaden zum erneuten Rendern von React an.

• Übermäßiger Gebrauch useEffect: Viele Effekte können vermieden werden. Sehen Sie, vielleicht brauchen Sie keinen Effekt.

• Nichteinhaltung von Konventionen:Verwenden Sie beispielsweise beim Rendern von Listen immer eindeutige Schlüssel, um Fehler zu vermeiden.

Grund 7: Die Produktion Ihrer App bricht ab

Wenn Ihre App in der Entwicklung funktioniert, aber in der Produktion abbricht, ist es an der Zeit, Tests und eine Typprüfung hinzuzufügen.

Ich weiß, ich weiß – Testen und TypeScript klingen vielleicht übertrieben. Aber hör mir zu.

Sie sind Ihre Sicherheitsnetze und fangen Fehler auf, bevor sie Ihre Benutzer erreichen.

Dein zukünftiges Ich wird es dir danken!

Das empfehle ich:

• Typprüfung: TypeScript verwenden. Es ist anfängerfreundlich, insbesondere mit dieser Anleitung. Wenn Sie Vite verwenden, ist die Einrichtung einfach.

• Testen: Verwenden Sie Vitest mit Vite oder React Testing Library für andere Setups.

Tests und Typen ersparen Ihnen stundenlanges Debuggen – und sorgen dafür, dass Sie den Verstand verlieren ?.

Zusammenfassung

Ist React so schwer, wie es sich anhört? Nein.

React ist nur eine JavaScript-Bibliothek. Der größte Teil der Komplexität ergibt sich aus:

• Ich kenne JavaScript nicht gut genug

• React mit Frameworks verwechseln

• Ich versuche, alles selbst zu machen

• Mit Blick auf die React-Grundlagen

Denken Sie daran, dass jeder Experte einmal ein Anfänger war.

Mit der richtigen Einstellung und den richtigen Tools kann React Ihre Geheimwaffe für die Entwicklung fantastischer Apps sein.

Du hast das?.

Bonus: Laden Sie mein kostenloses E-Book 101 React-Tipps und Tricks herunter und ersparen Sie sich stundenlange Frustration, während Sie reibungslosere und schnellere React-Apps erstellen.

?ANSTÄNDE ZUM GEDANKEN

<script> // Detect dark theme var iframe = document.getElementById('tweet-1862406693444874439-370'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1862406693444874439&theme=dark" } </script>

?ERKENNEN SIE DAS PROBLEM

Das ist Schluss?.

Einen Kommentar hinterlassen? um Ihre größte Herausforderung mit React zu teilen oder was es für Sie klick gemacht hat.

Und vergessen Sie nicht, ein „???“ zu hinterlassen.

Wenn Sie React lernen, laden Sie mein Buch „101 React Tips & Tricks“ KOSTENLOS

herunter.

Wenn Ihnen Artikel wie dieser gefallen, abonnieren Sie meinen KOSTENLOSEN Newsletter, FrontendJoy

.

Wenn Sie tägliche Tipps wünschen, finden Sie mich auf X/Twitter oder auf Bluesky. <script> // Detect dark theme var iframe = document.getElementById('tweet-1862406693444874439-370'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1862406693444874439&theme=dark" } </script>

Das obige ist der detaillierte Inhalt vonIst React so schwierig/komplex, wie es sich anhört?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!