5 Fehler, die ich bei meinem ersten React-Projekt gemacht habe

Sie wissen, wie es ist, eine neue Sprache oder ein neues Framework zu lernen. Manchmal gibt es großartige Dokumentationen, die Ihnen helfen, Ihren Weg zu finden. Aber selbst die beste Dokumentation deckt nicht absolut alles ab. Und wenn Sie mit etwas Neuem arbeiten, werden Sie unweigerlich auf ein Problem stoßen, für das es keine schriftliche Lösung gibt.

So war es bei mir, als ich zum ersten Mal ein React-Projekt erstellt habe – und React ist eines dieser Frameworks mit bemerkenswerter Dokumentation, besonders jetzt mit den Beta-Docs. Aber ich habe mich trotzdem durchgekämpft. Es ist schon eine Weile her seit diesem Projekt, aber die Lektionen, die ich daraus gelernt habe, sind immer noch frisch in meinem Gedächtnis. Und obwohl es da draußen viele React-Tutorials gibt, dachte ich, ich teile, was ich gerne gewusst hätte, als ich es zum ersten Mal benutzt habe.

Das ist es, was dieser Artikel ist – eine Liste der frühen Fehler, die ich gemacht habe. Ich hoffe, sie helfen Ihnen, das Erlernen von React deutlich zu erleichtern.

Verwendung von create-react-app zum Starten eines Projekts

TL;DR: Verwenden Sie Vite oder Parcel.

Create React App (CRA) ist ein Tool, das Ihnen beim Einrichten eines neuen React-Projekts hilft. Es erstellt eine Entwicklungsumgebung mit den besten Konfigurationsoptionen für die meisten React-Projekte. Das bedeutet, dass Sie keine Zeit mit der Konfiguration selbst verbringen müssen.

Als Anfänger schien dies ein großartiger Weg zu sein, um mit meiner Arbeit zu beginnen! Keine Konfiguration! Einfach anfangen zu coden!

CRA verwendet zwei beliebte Pakete, um dies zu erreichen: webpack und Babel. webpack ist ein Web-Bundler, der alle Assets in Ihrem Projekt optimiert, wie z. B. JavaScript, CSS und Bilder. Babel ist ein Tool, mit dem Sie neuere JavaScript-Funktionen verwenden können, auch wenn einige Browser diese nicht unterstützen.

Beides ist gut, aber es gibt neuere Tools, die die Aufgabe besser erledigen können, insbesondere Vite und Speedy Web Compiler (SWC).

Diese neuen und verbesserten Alternativen sind schneller und einfacher zu konfigurieren als webpack und Babel. Dies erleichtert die Anpassung der Konfiguration, was bei create-react-app schwierig ist, ohne "einzutauchen".

Um sie beide beim Einrichten eines neuen React-Projekts zu verwenden, müssen Sie sicherstellen, dass Sie Node Version 12 oder höher installiert haben, und dann den folgenden Befehl ausführen.

npm create vite

Sie werden aufgefordert, einen Namen für Ihr Projekt auszuwählen. Sobald Sie dies getan haben, wählen Sie React aus der Liste der Frameworks. Danach können Sie entweder Javascript + SWC oder Typescript + SWC auswählen.

Dann müssen Sie das Verzeichnis wechseln, indem Sie cd in Ihr Projekt eingeben und den folgenden Befehl ausführen;

npm i && npm run dev

Dies sollte einen Entwicklungsserver für Ihre Website unter der URL localhost:5173 starten.

Und so einfach ist das.

Verwendung von defaultProps für Standardwerte

TL;DR: Verwenden Sie stattdessen Standardparameter für Funktionen.

Daten können über sogenannte props an React-Komponenten übergeben werden. Diese werden einer Komponente wie Attribute in einem HTML-Element hinzugefügt und können in der Definition einer Komponente verwendet werden, indem die relevanten Werte aus dem als Argument übergebenen Prop-Objekt entnommen werden.

// App.jsx
export default function App() {
  return <Card title="Hello" description="world" />
}

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default Card;

Wenn für einen prop ein Standardwert erforderlich ist, kann die Eigenschaft defaultProp verwendet werden.

// Card.jsx
function Card(props) {
  // ...
}

Card.defaultProps = {
  title: 'Default title',
  description: 'Desc',
};

export default Card;

Mit modernem JavaScript ist es möglich, das props-Objekt zu destrukturieren und ihm einen Standardwert zuzuweisen, alles im Funktionsargument.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default Card;

Dies ist vorteilhafter, da der Code von modernen Browsern gelesen werden kann, ohne dass zusätzliche Transformationen erforderlich sind.

Leider erfordern defaultProps eine gewisse Transformation, um vom Browser gelesen zu werden, da JSX (JavaScript XML) nicht direkt unterstützt wird. Dies kann die Leistung einer Anwendung beeinträchtigen, die viele defaultProps verwendet.

Verwenden Sie keine propTypes

TL;DR: Verwenden Sie TypeScript.

In React kann die Eigenschaft propTypes verwendet werden, um zu überprüfen, ob einer Komponente die richtige Datenart für ihre Props übergeben wird. Sie erlauben Ihnen, den Datentyp anzugeben, der für jeden Prop verwendet werden soll, z. B. String, Zahl, Objekt usw. Sie erlauben Ihnen auch anzugeben, ob ein Prop erforderlich ist oder nicht.

Auf diese Weise wird, wenn einer Komponente der falsche Datentyp übergeben wird oder ein erforderlicher Prop nicht angegeben wird, React einen Fehler ausgeben.

// Card.jsx
import { PropTypes } from "prop-types";

function Card(props) {
  // ...
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};

export default Card;

TypeScript bietet eine Ebene der Typsicherheit für die Daten, die an Komponenten übergeben werden. Also ja, propTypes waren eine gute Idee, als ich anfing. Aber da TypeScript zur bevorzugten Lösung für Typsicherheit geworden ist, empfehle ich dringend, es jeder anderen Lösung vorzuziehen.

// Card.tsx
interface CardProps {
  title: string,
  description?: string,
}

export default function Card(props: CardProps) {
  // ...
}

TypeScript ist eine Programmiersprache, die auf JavaScript aufbaut, indem sie statische Typenprüfung hinzufügt. TypeScript bietet ein leistungsfähigeres Typsystem, das mehr potenzielle Fehler abfangen kann und das Entwicklungserlebnis verbessert.

Verwendung von Klassenkomponenten

TL;DR: Schreiben Sie Komponenten als Funktionen

Klassenkomponenten in React werden mithilfe von JavaScript-Klassen erstellt. Sie haben eine objektorientiertere Struktur und einige zusätzliche Funktionen, wie z. B. die Möglichkeit, das Schlüsselwort this und Lifecycle-Methoden zu verwenden.

// Card.jsx
class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default Card;

Ich bevorzuge die Erstellung von Komponenten mit Klassen gegenüber Funktionen, aber JavaScript-Klassen sind für Anfänger schwieriger zu verstehen und this kann sehr verwirrend sein. Stattdessen empfehle ich, Komponenten als Funktionen zu schreiben.

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default Card;

Funktionskomponenten sind einfach JavaScript-Funktionen, die JSX zurückgeben. Sie sind viel einfacher zu lesen und haben keine zusätzlichen Funktionen wie das Schlüsselwort this und Lifecycle-Methoden, was sie performanter als Klassenkomponenten macht.

Funktionskomponenten haben auch den Vorteil, Hooks zu verwenden. React Hooks ermöglichen es Ihnen, Zustände und andere React-Funktionen zu verwenden, ohne eine Klassenkomponente schreiben zu müssen, was Ihren Code lesbarer, wartbarer und wiederverwendbarer macht.

React unnötigerweise importieren

TL;DR: Es ist nicht nötig, es sei denn, Sie benötigen Hooks.

Seit der Veröffentlichung von React 17 im Jahr 2020 ist es nicht mehr notwendig, React am Anfang Ihrer Datei zu importieren, wenn Sie eine Komponente erstellen.

import React from 'react'; // Not needed!
export default function Card() {}

Aber wir mussten das vor React 17 tun, weil der JSX-Transformer (das Ding, das JSX in reguläres JavaScript umwandelt) eine Methode namens React.createElement verwendete, die nur funktionierte, wenn React importiert wurde. Seitdem wurde ein neuer Transformer veröffentlicht, der JSX ohne die createElement-Methode transformieren kann.

Sie müssen React immer noch importieren, um Hooks, Fragmente und andere Funktionen oder Komponenten zu verwenden, die Sie möglicherweise aus der Bibliothek benötigen.

import { useState } from 'react';

export default function Card() {
  const [count, setCount] = useState(0);
  // ...
}

Das waren meine frühen Fehler!

Vielleicht ist "Fehler" ein zu hartes Wort, da einige der besseren Praktiken erst später entstanden sind. Dennoch sehe ich viele Fälle, in denen der "alte" Weg, etwas zu tun, immer noch aktiv in Projekten und anderen Tutorials verwendet wird.

Um ehrlich zu sein, habe ich wahrscheinlich weit mehr als fünf Fehler gemacht, als ich angefangen habe. Jedes Mal, wenn Sie zu einem neuen Werkzeug greifen, wird es eher eine Lernreise sein, es effektiv zu nutzen, anstatt einen Schalter umzulegen. Aber das sind die Dinge, die ich noch Jahre später mit mir trage!

Wenn Sie React schon seit einiger Zeit verwenden, was hätten Sie gerne gewusst, bevor Sie angefangen haben? Es wäre großartig, eine Sammlung zusammenzustellen, um anderen zu helfen, dieselben Schwierigkeiten zu vermeiden.