5 Fehler, die ich gemacht habe, als ich mein erstes React-Projekt gestartet habe

Sie wissen, wie es ist, sich eine neue Sprache oder ein neues Framework anzueignen. Manchmal gibt es eine großartige Dokumentation, die Ihnen hilft, sich darin zurechtzufinden. Aber auch die beste Dokumentation deckt nicht alles ab. Und wenn Sie mit etwas Neuem arbeiten, werden Sie zwangsläufig auf ein Problem stoßen, für das es keine schriftliche Lösung gibt.

So war es für mich, als ich zum ersten Mal ein React-Projekt erstellte – und React ist eines dieser Frameworks mit bemerkenswerter Dokumentation, besonders jetzt mit der Beta-Dokumentation. Aber ich habe mich trotzdem durchgekämpft. Dieses Projekt ist schon eine ganze Weile her, aber die Lehren, die ich daraus gezogen habe, sind mir immer noch frisch in Erinnerung. Und obwohl es viele React-Tutorials mit Anleitungen gibt, dachte ich, ich würde das teilen, was ich gerne gewusst hätte, als ich es zum ersten Mal benutzte.

Das ist also dieser Artikel – eine Liste der frühen Fehler, die ich gemacht habe. Ich hoffe, sie tragen dazu bei, das Lernen von React für Sie viel reibungsloser zu gestalten.

Mit create-react-app ein Projekt starten

TL;DR Verwenden Sie Vite oder Parcel.

React App erstellen (CRA) ist ein Tool, das Ihnen hilft, ein neues React-Projekt einzurichten. Es schafft eine Entwicklungsumgebung mit den besten Konfigurationsoptionen für die meisten React-Projekte. Das bedeutet, dass Sie keine Zeit damit verbringen müssen, etwas selbst zu konfigurieren.

Als Anfänger schien dies eine großartige Möglichkeit zu sein, mit meiner Arbeit zu beginnen! Keine Konfiguration! Fangen Sie einfach an zu codieren!

CRA verwendet zwei beliebte Pakete, um dies zu erreichen, 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 sie nicht unterstützen.

Beide sind gut, aber es gibt neuere Tools, die den Job besser machen können Schraube und Schneller 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 create-react-app ohne Auswerfen schwierig ist.

Um beide beim Einrichten eines neuen React-Projekts zu verwenden, müssen Sie sicherstellen, dass Sie dies haben Knoten Version 12 oder höher installiert ist, führen Sie dann den folgenden Befehl aus.

npm create vite

Sie werden aufgefordert, einen Namen für Ihr Projekt auszuwählen. Wählen Sie anschließend React aus der Liste der Frameworks aus. Danach können Sie beides auswählen Javascript + SWC or Typescript + SWC

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

npm i && npm run dev

Dies sollte einen Entwicklungsserver für Ihre Website mit der URL ausführen localhost:5173

Und so einfach ist das.

Die richtigen defaultProps für Standardwerte

TL;DR Verwenden Sie stattdessen die Standardfunktionsparameter.

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

// 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 jemals ein Standardwert für a benötigt wird prop, der defaultProp Eigentum kann verwendet werden:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

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

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

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

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

Benutze es nicht propTypes

TL;DR Verwenden Sie TypeScript.

In Reaktion, die propTypes -Eigenschaft kann verwendet werden, um zu überprüfen, ob einer Komponente der richtige Datentyp für ihre Props übergeben wird. 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. Sie ermöglichen Ihnen auch anzugeben, ob eine Requisite erforderlich ist oder nicht.

Auf diese Weise wird React einen Fehler ausgeben, wenn einer Komponente der falsche Datentyp übergeben wird oder wenn eine erforderliche Prop nicht bereitgestellt wird.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

Typoskript bietet ein gewisses Maß an Typsicherheit bei Daten, die an Komponenten übergeben werden. So sicher, propTypes waren eine gute Idee, als ich anfing. Jetzt, da TypeScript zur Standardlösung für Typsicherheit geworden ist, würde ich dringend empfehlen, es allen anderen 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 eine statische Typprüfung hinzufügt. TypeScript bietet ein leistungsfähigeres Typsystem, das mehr potenzielle Fehler erkennen und die Entwicklungserfahrung verbessern kann.

Verwenden von Klassenkomponenten

TL;DR: Komponenten als Funktionen schreiben

Klassenkomponenten in React werden mithilfe von JavaScript-Klassen erstellt. Sie haben eine eher objektorientierte Struktur und einige zusätzliche Funktionen, wie die Möglichkeit, die 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 ziehe es vor, Komponenten mit Klassen gegenüber Funktionen zu schreiben, aber JavaScript-Klassen sind für Anfänger schwieriger zu verstehen und this kann sehr verwirrend werden. Stattdessen würde ich empfehlen, 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 die this Stichwort und Lebenszyklusmethoden wodurch sie leistungsfähiger sind als Klassenkomponenten.

Funktionskomponenten haben auch den Vorteil, Haken zu verwenden. Haken reagieren ermöglichen es Ihnen, Status- und andere React-Funktionen zu verwenden, ohne eine Klassenkomponente zu schreiben, wodurch Ihr Code besser lesbar, wartbar und wiederverwendbar wird.

React unnötig importieren

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

Seit React 17 im Jahr 2020 veröffentlicht wurde, ist es jetzt nicht mehr erforderlich, 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 konvertiert) eine Methode namens verwendet hat React.createElement das würde nur beim Importieren von React funktionieren. Seitdem wurde ein neuer Transformer veröffentlicht, der JSX ohne transformieren kann createElement Methode.

Sie müssen React immer noch importieren, um Hooks zu verwenden. Fragmente, und alle anderen Funktionen oder Komponenten, 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 die „alte“ Art, etwas zu tun, immer noch aktiv in Projekten und anderen Tutorials verwendet wird.

Um ehrlich zu sein, habe ich am Anfang wahrscheinlich weit mehr als fünf Fehler gemacht. Jedes Mal, wenn Sie nach einem neuen Tool greifen, ist es eher eine Lernreise, um es effektiv zu nutzen, als einen Schalter umzulegen. Aber das sind die Dinge, die ich Jahre später immer noch bei mir trage!

Wenn Sie React schon eine Weile verwenden, was wären einige der Dinge, die Sie gerne gewusst hätten, bevor Sie angefangen haben? Es wäre großartig, eine Sammlung zu bekommen, die anderen hilft, die gleichen Kämpfe zu vermeiden.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/5-mistakes-starting-react/