5 misstag jag gjorde när jag startade mitt första React-projekt

Du vet hur det är att ta upp ett nytt språk eller ramverk. Ibland finns det bra dokumentation som hjälper dig att hitta igenom det. Men inte ens den bästa dokumentationen täcker absolut allt. Och när du arbetar med något som är nytt, kommer du säkert att hitta ett problem som inte har en skriftlig lösning.

Så var det för mig första gången jag skapade ett React-projekt — och React är ett av dessa ramverk med anmärkningsvärd dokumentation, speciellt nu med beta-dokument. Men jag kämpade mig igenom ändå. Det var ett tag sedan det projektet, men de lärdomar jag fick av det är fortfarande färska i minnet. Och även om det finns många React "how-to"-tutorials där ute, tänkte jag dela med mig av det jag önskar att jag visste när jag använde det första gången.

Så, det är vad den här artikeln är - en lista över de tidiga misstagen jag gjorde. Jag hoppas att de hjälper till att göra inlärningen React mycket smidigare för dig.

Använda create-react-app för att starta ett projekt

TL;DR Använd Vite eller Paket.

Skapa React-app (CRA) är ett verktyg som hjälper dig att sätta upp ett nytt React-projekt. Det skapar en utvecklingsmiljö med de bästa konfigurationsalternativen för de flesta React-projekt. Det betyder att du inte behöver lägga tid på att konfigurera något själv.

Som nybörjare verkade detta vara ett bra sätt att börja mitt arbete! Ingen konfiguration! Bara börja koda!

CRA använder två populära paket för att uppnå detta, webpack och Babel. webpack är ett webbpaket som optimerar alla tillgångar i ditt projekt, som JavaScript, CSS och bilder. Babel är ett verktyg som låter dig använda nyare JavaScript-funktioner, även om vissa webbläsare inte stöder dem.

Båda är bra, men det finns nyare verktyg som kan göra jobbet bättre, specifikt skruv och Snabb webbkompilator (SWC).

Dessa nya och förbättrade alternativ är snabbare och enklare att konfigurera än webpack och Babel. Detta gör det lättare att justera konfigurationen vilket är svårt att göra i create-react-app utan att mata ut.

För att använda dem båda när du skapar ett nytt React-projekt måste du se till att du har det Nod version 12 eller senare installerad, kör sedan följande kommando.

npm create vite

Du kommer att bli ombedd att välja ett namn för ditt projekt. När du har gjort det väljer du Reagera från listan över ramverk. Efter det kan du välja antingen Javascript + SWC or Typescript + SWC

Då måste du byta katalog cd in i ditt projekt och kör följande kommando;

npm i && npm run dev

Detta bör köra en utvecklingsserver för din webbplats med URL:en localhost:5173

Och så enkelt är det.

Använda defaultProps för standardvärden

TL;DR Använd standardfunktionsparametrar istället.

Data kan skickas till React-komponenter genom något som kallas props. Dessa läggs till en komponent precis som attribut i ett HTML-element och kan användas i en komponents definition genom att ta de relevanta värdena från prop-objektet som skickas in som ett argument.

// 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;

Om ett standardvärde någonsin krävs för en prop, den defaultProp egendom kan användas:

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

Med modern JavaScript är det möjligt att destrukturera props objekt och tilldela ett standardvärde till det hela i funktionsargumentet.

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

Detta är mer fördelaktigt som koden som kan läsas av moderna webbläsare utan behov av extra transformation.

Tyvärr, defaultProps kräver viss transformation för att läsas av webbläsaren eftersom JSX (JavaScript XML) inte stöds direkt. Detta kan potentiellt påverka prestandan för en applikation som använder mycket defaultProps.

Använd inte propTypes

TL;DR Använd TypeScript.

I React, den propTypes egenskapen kan användas för att kontrollera om en komponent skickas med rätt datatyp för dess rekvisita. De låter dig specificera vilken typ av data som ska användas för varje rekvisita, såsom en sträng, nummer, objekt, etc. De låter dig också ange om ett stöd krävs eller inte.

På detta sätt, om en komponent skickas till fel datatyp eller om en nödvändig rekvisita inte tillhandahålls, kommer React att ge ett fel.

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

MASKINSKRIVEN ger en nivå av typsäkerhet i data som skickas till komponenter. Så säker, propTypes var en bra idé när jag började. Men nu när TypeScript har blivit den bästa lösningen för typsäkerhet, skulle jag starkt rekommendera att använda det framför allt annat.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript är ett programmeringsspråk som bygger på JavaScript genom att lägga till statisk typkontroll. TypeScript tillhandahåller ett kraftfullare typsystem, som kan fånga upp fler potentiella buggar och förbättrar utvecklingsupplevelsen.

Använda klasskomponenter

TL;DR: Skriv komponenter som funktioner

Klasskomponenter i React skapas med hjälp av JavaScript-klasser. De har en mer objektorienterad struktur och samt några ytterligare funktioner, som möjligheten att använda this nyckelord och livscykelmetoder.

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

Jag föredrar att skriva komponenter med klasser framför funktioner, men JavaScript-klasser är svårare för nybörjare att förstå och this kan bli väldigt förvirrande. Istället skulle jag rekommendera att skriva komponenter som funktioner:

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

Funktionskomponenter är helt enkelt JavaScript-funktioner som returnerar JSX. De är mycket lättare att läsa och har inga ytterligare funktioner som this nyckelord och livscykelmetoder vilket gör dem mer presterande än klasskomponenter.

Funktionskomponenter har också fördelen av att använda krokar. Reagera krokar låter dig använda tillstånd och andra React-funktioner utan att skriva en klasskomponent, vilket gör din kod mer läsbar, underhållbar och återanvändbar.

Importerar Reagera i onödan

TL;DR: Det finns ingen anledning att göra det, om du inte behöver krokar.

Eftersom React 17 släpptes 2020 är det nu onödigt att importera React överst i din fil när du skapar en komponent.

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

Men vi var tvungna att göra det innan React 17 eftersom JSX-transformatorn (det som konverterar JSX till vanligt JavaScript) använde en metod som heter React.createElement som bara fungerar när du importerar React. Sedan dess har en ny transformator släppts som kan transformera JSX utan createElement metod.

Du måste fortfarande importera React för att använda krokar, fragment, och alla andra funktioner eller komponenter du kan behöva från biblioteket:

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

Det var mina tidiga misstag!

Kanske är "misstag" ett för hårt ord eftersom några av de bättre metoderna kom till senare. Ändå ser jag många fall där det "gamla" sättet att göra något fortfarande används aktivt i projekt och andra handledningar.

För att vara ärlig, gjorde jag förmodligen mer än fem misstag när jag började. Varje gång du sträcker dig efter ett nytt verktyg kommer det att vara mer som en inlärningsresa för att använda det effektivt, snarare än att vända en knapp. Men det här är sakerna jag fortfarande bär med mig år senare!

Om du har använt React ett tag, vad är några av de saker du önskar att du visste innan du började? Det skulle vara fantastiskt att få igång en insamling för att hjälpa andra undvika samma kamp.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/5-mistakes-starting-react/