Coding and Programming

5 Fehler, die ich beim Start meines ersten React-Projekts gemacht habe | CSS-Tipps

Written by smirow

Sie wissen, wie es ist, eine neue Sprache oder ein neues Framework zu erlernen. Manchmal gibt es eine hervorragende Dokumentation, die Ihnen bei der Navigation hilft. Aber selbst die beste Dokumentation deckt nicht alles ab. Und wenn Sie mit etwas Neuem arbeiten, stoßen Sie zwangsläufig auf ein Problem, für das es keine schriftliche Lösung gibt.

So erging es mir, als ich zum ersten Mal ein React-Projekt erstellte – und React ist eines dieser Frameworks mit bemerkenswerter Dokumentation, insbesondere jetzt mit Beta-Dokumentation. Aber es fiel mir immer noch schwer, da durchzukommen. Es ist schon eine Weile her, dass dieses Projekt stattfand, aber die Lehren, die ich daraus gezogen habe, sind mir immer noch frisch im Gedächtnis. Und obwohl es viele Tutorials zu React gibt, dachte ich, ich teile mit Ihnen, was ich gerne gewusst hätte, als ich es zum ersten Mal benutzte.

Das ist also dieser Artikel: eine Liste der ersten Fehler, die ich gemacht habe. Ich hoffe, sie helfen Ihnen dabei, das Erlernen von React viel reibungsloser zu gestalten.

Verwenden Sie die Create-React-App, um ein Projekt zu starten

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 damit verbringen müssen, selbst etwas einzurichten.

Als Anfänger schien dies eine großartige Möglichkeit zu sein, meine Arbeit zu beginnen! Keine Konfiguration! Beginnen Sie einfach mit dem Codieren!

CRA verwendet dazu zwei beliebte Pakete: Webpack und Babel. Webpack ist ein Web-Bundler, der alle Assets in Ihrem Projekt optimiert, 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.

Beide sind gut, aber es gibt neuere Tools, die diese Aufgabe besser erledigen können, darunter Vite und Speedy Web Compiler (SWC).

Diese neuen und verbesserten Alternativen sind schneller und einfacher zu konfigurieren als Webpack und Babel. Dies erleichtert das Anpassen der Konfiguration, was in der Create-React-App ohne Auswerfen schwierig ist.

Um 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. Wenn Sie fertig sind, wählen Sie „Reagieren“ aus der Liste der Frameworks aus. Danach können Sie eine der beiden Optionen auswählen Javascript + SWC Oder Typescript + SWC

Dann müssen Sie das Verzeichnis wechseln cd in Ihrem Projekt und führen Sie den folgenden Befehl aus;

npm i && npm run dev

Dadurch sollte ein Entwicklungsserver für Ihre Site mit der URL ausgeführt werden localhost:5173

Und so einfach ist das.

Benutzen defaultProps für Standardwerte

TL;DR Verwenden Sie stattdessen die Standardfunktionseinstellungen.

Daten können über etwas namens an React-Komponenten übergeben werden props. Diese werden einer Komponente genau wie die Attribute eines HTML-Elements hinzugefügt und können bei der Definition einer Komponente verwendet werden, indem die relevanten Werte aus dem als Argument übergebenen Prop-Objekt übernommen 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 ein Standardwert für a erforderlich ist propDER defaultProp Die Immobilie kann genutzt werden:

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

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

export default Card;

Mit modernem JavaScript ist es möglich, das zu dekonstruieren props Objekt und geben Sie ihm im Funktionsargument einen Standardwert.

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

export default Card;

Dies ist vorteilhafter als Code, der von modernen Browsern ohne zusätzliche Transformation gelesen werden kann.

Bedauerlicherweise, defaultProps erfordern einige Transformationen, die vom Browser gelesen werden müssen, da JSX (JavaScript XML) standardmäßig nicht unterstützt wird. Dies könnte möglicherweise die Leistung einer Anwendung beeinträchtigen, die viele davon verwendet defaultProps.

Verwende nicht propTypes

TL;DR Verwenden Sie TypeScript.

In React ist das propTypes Mithilfe der Eigenschaft kann überprüft werden, ob eine Komponente den richtigen Datentyp für ihre Requisiten erhält. Sie ermöglichen es Ihnen, den Datentyp anzugeben, der für jede Requisite verwendet werden soll, z. B. eine Zeichenfolge, eine Zahl, ein Objekt usw. Außerdem können Sie hier angeben, ob ein Zubehör erforderlich ist oder nicht.

Wenn eine Komponente den falschen Datentyp empfängt oder eine erforderliche Requisite nicht bereitgestellt wird, gibt React auf diese Weise einen Fehler aus.

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

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

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

export default Card;

TypeScript bietet ein gewisses Maß an Typsicherheit in den an Komponenten übergebenen Daten. Wenn eingeschaltet, propTypes Es war eine gute Idee, als ich anfing. Da TypeScript nun jedoch zur Lösung der Wahl für Typsicherheit geworden ist, empfehle ich dringend, es gegenüber allem anderen zu verwenden.

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

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

TypeScript ist eine Programmiersprache, die auf JavaScript aufbaut und eine statische Typprüfung hinzufügt. TypeScript bietet ein leistungsfähigeres Typsystem, das mehr potenzielle Fehler erkennen und das Entwicklungserlebnis verbessern kann.

Verwenden Sie Klassenkomponenten

TL;DR: Komponenten als Funktionen schreiben

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

// 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 schreibe Komponenten lieber mit Klassen als mit Funktionen, aber JavaScript-Klassen sind für Anfänger schwieriger zu verstehen und zu verstehen. this kann sehr verwirrend werden. Stattdessen würde ich empfehlen, die 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 verfügen nicht über zusätzliche Funktionen wie this Schlüsselwort- und Lebenszyklusmethoden, die ihnen eine bessere Leistung als Klassenkomponenten verleihen.

Funktionsteile haben auch den Vorteil, Haken zu verwenden. Mit React Hooks können Sie Status- und andere React-Funktionen verwenden, ohne eine Klassenkomponente schreiben zu müssen, wodurch Ihr Code lesbarer, wartbarer und wiederverwendbar wird.

Import Unnötig reagieren

TL;DR: Dies ist nicht notwendig, es sei denn, Sie benötigen Hooks.

Seit der Veröffentlichung von React 17 im Jahr 2020 müssen Sie React nicht mehr jedes Mal, wenn Sie eine Komponente erstellen, oben in Ihre Datei importieren.

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

Aber wir mussten dies vor React 17 tun, weil der JSX-Transformer (der JSX in Standard-JavaScript konvertiert) eine Methode namens verwendete React.createElement Dies würde nur beim Importieren von React funktionieren. Seitdem wurde ein neuer Transformator veröffentlicht, der JSX ohne transformieren kann createElement Methode.

Sie müssen React weiterhin importieren, um Hooks, Fragmente und alle anderen Funktionen oder Komponenten zu verwenden, die Sie möglicherweise in der Bibliothek benötigen:

import { useState } from 'react';

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

Das waren meine ersten Fehler!

Vielleicht ist „Fehler“ ein zu hartes Wort, da einige der besten Praktiken später kamen. Dennoch sehe ich viele Fälle, in denen die „alte“ Vorgehensweise in Projekten und anderen Tutorials immer noch aktiv genutzt wird.

Um ehrlich zu sein, habe ich am Anfang wahrscheinlich weit mehr als fünf Fehler gemacht. Jedes Mal, wenn Sie nach einem neuen Werkzeug greifen, wird es sich eher wie eine Lernreise anfühlen, es effektiv zu nutzen, als dass Sie einen Schalter umlegen. Aber das sind die Dinge, die ich auch Jahre später noch bei mir trage!

Wenn Sie React schon eine Weile nutzen, welche Dinge würden Sie gerne wissen, bevor Sie angefangen haben? Es wäre großartig, eine Sammlung zu erstellen, um anderen zu helfen, die gleichen Schwierigkeiten zu vermeiden.

About the author

smirow

Leave a Comment