5 feil jeg gjorde da jeg startet mitt første reaksjonsprosjekt

Publisert av Platon

Følgere: 0

Du vet hvordan det er å plukke opp et nytt språk eller et nytt rammeverk. Noen ganger er det god dokumentasjon som hjelper deg å finne veien gjennom den. Men selv den beste dokumentasjonen dekker ikke absolutt alt. Og når du jobber med noe som er nytt, er du nødt til å finne et problem som ikke har en skriftlig løsning.

Slik var det for meg første gang jeg opprettet et React-prosjekt — og React er et av disse rammeverkene med bemerkelsesverdig dokumentasjon, spesielt nå med beta-dokumentene. Men jeg kjempet meg fortsatt gjennom. Det er en god stund siden det prosjektet, men lærdommen jeg fikk fra det er fortsatt friskt i minnet. Og selv om det er mange React "how-to"-veiledninger der ute, tenkte jeg å dele det jeg skulle ønske jeg visste da jeg brukte det første gang.

Så det er det denne artikkelen er - en liste over de tidlige feilene jeg gjorde. Jeg håper de bidrar til å gjøre læringen React mye enklere for deg.

Bruke create-react-app for å starte et prosjekt

TL;DR Bruk Vite eller Pakke.

Opprett React App (CRA) er et verktøy som hjelper deg med å sette opp et nytt React-prosjekt. Det skaper et utviklingsmiljø med de beste konfigurasjonsalternativene for de fleste React-prosjekter. Dette betyr at du ikke trenger å bruke tid på å konfigurere noe selv.

Som nybegynner virket dette som en fin måte å starte arbeidet mitt på! Ingen konfigurasjon! Bare begynn å kode!

CRA bruker to populære pakker for å oppnå dette, webpack og Babel. webpack er en nettpakker som optimerer alle ressursene i prosjektet ditt, for eksempel JavaScript, CSS og bilder. Babel er et verktøy som lar deg bruke nyere JavaScript-funksjoner, selv om enkelte nettlesere ikke støtter dem.

Begge er bra, men det er nyere verktøy som kan gjøre jobben bedre, spesifikt Bor og Rask nettkompiler (SWC).

Disse nye og forbedrede alternativene er raskere og enklere å konfigurere enn webpack og Babel. Dette gjør det lettere å justere konfigurasjonen som er vanskelig å gjøre i create-react-app uten å støte ut.

For å bruke dem begge når du setter opp et nytt React-prosjekt, må du sørge for at du har det Node versjon 12 eller høyere installert, kjør deretter følgende kommando.

npm create vite

Du blir bedt om å velge et navn for prosjektet ditt. Når du har gjort det, velg Reager fra listen over rammeverk. Etter det kan du velge enten Javascript + SWC or Typescript + SWC

Da må du bytte katalog cd inn i prosjektet ditt og kjør følgende kommando;

npm i && npm run dev

Dette skal kjøre en utviklingsserver for nettstedet ditt med URL-en localhost:5173

Og så enkelt er det.

Ved hjelp av `defaultProps` for standardverdier

TL;DR Bruk standard funksjonsparametere i stedet.

Data kan sendes til React-komponenter gjennom noe som heter props. Disse legges til en komponent akkurat som attributter i et HTML-element og kan brukes i en komponents definisjon ved å ta de relevante verdiene fra prop-objektet som er sendt inn som et 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;

Hvis det noen gang kreves en standardverdi for en propden defaultProp eiendom kan brukes:

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

Med moderne JavaScript er det mulig å destrukturere props objekt og tilordne en standardverdi til det hele i funksjonsargumentet.

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

Dette er mer gunstig som koden som kan leses av moderne nettlesere uten behov for ekstra transformasjon.

Dessverre, defaultProps krever litt transformasjon for å leses av nettleseren siden JSX (JavaScript XML) ikke støttes ut av boksen. Dette kan potensielt påvirke ytelsen til en applikasjon som bruker mye av defaultProps.

Ikke bruk `propTypes`

TL;DR Bruk TypeScript.

I React er propTypes egenskap kan brukes til å sjekke om en komponent sendes til den riktige datatypen for rekvisittene. De lar deg spesifisere typen data som skal brukes for hver rekvisitt som en streng, tall, objekt osv. De lar deg også spesifisere om en rekvisitt er nødvendig eller ikke.

På denne måten, hvis en komponent sendes feil datatype eller hvis en nødvendig rekvisitt ikke blir gitt, vil React gi en feil.

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

Loggfila gir et nivå av typesikkerhet i data som sendes til komponenter. Så sikker, propTypes var en god idé da jeg begynte. Nå som TypeScript har blitt den beste løsningen for typesikkerhet, vil jeg imidlertid anbefale å bruke den fremfor alt annet.

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

TypeScript er et programmeringsspråk som bygger på toppen av JavaScript ved å legge til statisk typekontroll. TypeScript gir et kraftigere typesystem som kan fange opp flere potensielle feil og forbedrer utviklingsopplevelsen.

Bruke klassekomponenter

TL;DR: Skriv komponenter som funksjoner

Klassekomponenter i React lages ved hjelp av JavaScript-klasser. De har en mer objektorientert struktur og i tillegg til noen få tilleggsfunksjoner, som muligheten til å bruke this nøkkelord og livssyklusmetoder.

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

Jeg foretrekker å skrive komponenter med klasser fremfor funksjoner, men JavaScript-klasser er vanskeligere for nybegynnere å forstå og this kan bli veldig forvirrende. I stedet vil jeg anbefale å skrive komponenter som funksjoner:

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

Funksjonskomponenter er ganske enkelt JavaScript-funksjoner som returnerer JSX. De er mye lettere å lese, og har ikke tilleggsfunksjoner som this nøkkelord og livssyklus metoder som gjør dem mer ytelsesdyktige enn klassekomponenter.

Funksjonskomponenter har også fordelen av å bruke kroker. Reager kroker lar deg bruke tilstand og andre React-funksjoner uten å skrive en klassekomponent, noe som gjør koden din mer lesbar, vedlikeholdbar og gjenbrukbar.

Importerer Reager unødvendig

TL;DR: Det er ikke nødvendig å gjøre det, med mindre du trenger kroker.

Siden React 17 ble utgitt i 2020, er det nå unødvendig å importere React øverst i filen når du oppretter en komponent.

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

Men vi måtte gjøre det før React 17 fordi JSX-transformatoren (det som konverterer JSX til vanlig JavaScript) brukte en metode som heter React.createElement som bare fungerer når du importerer React. Siden den gang har det blitt utgitt en ny transformator som kan transformere JSX uten createElement metoden.

Du må fortsatt importere React for å bruke kroker, fragmenter, og eventuelle andre funksjoner eller komponenter du måtte trenge fra biblioteket:

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

Det var mine tidlige feil!

Kanskje er "feil" et for hardt ord siden noen av de bedre praksisene kom senere. Likevel ser jeg mange tilfeller der den "gamle" måten å gjøre noe på fortsatt brukes aktivt i prosjekter og andre opplæringsprogrammer.

For å være ærlig gjorde jeg nok mer enn fem feil da jeg begynte. Hver gang du strekker deg etter et nytt verktøy, vil det være mer som en læringsreise for å bruke det effektivt, i stedet for å snu en bryter. Men det er disse tingene jeg fortsatt bærer med meg år senere!

Hvis du har brukt React en stund, hva er noen av tingene du skulle ønske du visste før du begynte? Det ville vært flott å få i gang en samling for å hjelpe andre å unngå de samme kampene.