Je weet hoe het is om een ​​nieuwe taal of kader op te pikken. Soms is er geweldige documentatie om je er doorheen te helpen. Maar zelfs de beste documentatie omvat niet alles. En als je met iets nieuws werkt, zul je ongetwijfeld een probleem tegenkomen waarvoor geen schriftelijke oplossing bestaat.

Zo was het voor mij de eerste keer dat ik een React-project maakte - en React is een van die frameworks met opmerkelijke documentatie, vooral nu met de bètadocumenten. Maar ik heb me er nog steeds doorheen geworsteld. Het is alweer een tijdje geleden sinds dat project, maar de lessen die ik eruit heb getrokken, staan ​​nog vers in mijn geheugen. En hoewel er veel React "how-to" tutorials zijn, dacht ik dat ik zou delen wat ik wou dat ik wist toen ik het voor het eerst gebruikte.

Dus dat is wat dit artikel is: een lijst met de vroege fouten die ik heb gemaakt. Ik hoop dat ze helpen om het leren van React een stuk soepeler voor je te maken.

Create-react-app gebruiken om een ​​project te starten

TL; DR Gebruik Vite of Parcel.

Maak React App (CRA) is een tool die je helpt bij het opzetten van een nieuw React-project. Het creëert een ontwikkelomgeving met de beste configuratie-opties voor de meeste React-projecten. Dit betekent dat u zelf geen tijd hoeft te besteden aan het configureren.

Als beginner leek dit een geweldige manier om met mijn werk te beginnen! Geen configuratie! Begin gewoon met coderen!

CRA gebruikt hiervoor twee populaire pakketten, webpack en Babel. webpack is een webbundelaar die alle middelen in uw project optimaliseert, zoals JavaScript, CSS en afbeeldingen. Babel is een tool waarmee u nieuwere JavaScript-functies kunt gebruiken, zelfs als sommige browsers deze niet ondersteunen.

Beide zijn goed, maar er zijn met name nieuwere tools die het werk beter kunnen doen schroef en Snelle webcompiler (SWC).

Deze nieuwe en verbeterde alternatieven zijn sneller en eenvoudiger te configureren dan webpack en Babel. Dit maakt het gemakkelijker om de configuratie aan te passen, wat moeilijk te doen is in create-react-app zonder uitwerpen.

Om ze allebei te gebruiken bij het opzetten van een nieuw React-project, moet je ervoor zorgen dat je ze hebt Knooppunt versie 12 of hoger geïnstalleerd, voer dan de volgende opdracht uit.

npm create vite

U wordt gevraagd een naam voor uw project te kiezen. Zodra je dat hebt gedaan, selecteer je Reageren in de lijst met frameworks. Daarna kunt u een van beide selecteren Javascript + SWC or Typescript + SWC

Dan moet je van directory veranderen cd in uw project en voer de volgende opdracht uit;

npm i && npm run dev

Dit zou een ontwikkelingsserver voor uw site met de URL moeten uitvoeren localhost:5173

En zo simpel is het.

gebruik defaultProps voor standaardwaarden

TL;DR Gebruik in plaats daarvan standaard functieparameters.

Gegevens kunnen worden doorgegeven aan React-componenten via iets genaamd props. Deze worden net als attributen in een HTML-element aan een component toegevoegd en kunnen worden gebruikt in de definitie van een component door de relevante waarden van het prop-object te nemen dat als argument wordt doorgegeven.

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

Als er ooit een standaardwaarde vereist is voor a prop defaultProp eigenschap kan worden gebruikt:

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

Met moderne JavaScript is het mogelijk om de structuur van de props object en wijs er een standaardwaarde aan toe in het functieargument.

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

Dit is gunstiger omdat de code door moderne browsers kan worden gelezen zonder dat er extra transformatie nodig is.

Helaas, defaultProps vereisen enige transformatie om door de browser te worden gelezen, aangezien JSX (JavaScript XML) niet standaard wordt ondersteund. Dit kan mogelijk van invloed zijn op de prestaties van een toepassing die veel gebruikt defaultProps.

Niet gebruiken propTypes

TL;DR Gebruik TypeScript.

In Reageren, de propTypes eigenschap kan worden gebruikt om te controleren of een component het juiste gegevenstype voor zijn rekwisieten wordt doorgegeven. Hiermee kunt u het type gegevens specificeren dat voor elke prop moet worden gebruikt, zoals een tekenreeks, nummer, object, enz. Ze stellen u ook in staat om te specificeren of een prop vereist is of niet.

Op deze manier zal React een fout genereren als een component het verkeerde gegevenstype doorgeeft of als een vereiste prop niet wordt verstrekt.

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

getypte tekst biedt een niveau van typeveiligheid in gegevens die worden doorgegeven aan componenten. Zo zeker, propTypes waren een goed idee toen ik begon. Nu TypeScript echter de go-to-oplossing voor typeveiligheid is geworden, zou ik het ten zeerste aanbevelen om het boven iets anders te gebruiken.

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

TypeScript is een programmeertaal die voortbouwt op JavaScript door statische typecontrole toe te voegen. TypeScript biedt een krachtiger typesysteem, dat meer potentiële bugs kan opvangen en de ontwikkelervaring verbetert.

Klassencomponenten gebruiken

TL;DR: schrijf componenten als functies

Klassecomponenten in React worden gemaakt met behulp van JavaScript-klassen. Ze hebben een meer objectgeoriënteerde structuur en daarnaast enkele extra functies, zoals de mogelijkheid om de this zoekwoord- en levenscyclusmethoden.

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

Ik geef de voorkeur aan het schrijven van componenten met klassen boven functies, maar JavaScript-klassen zijn voor beginners moeilijker te begrijpen en this kan erg verwarrend zijn. In plaats daarvan raad ik aan om componenten als functies te schrijven:

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

Functiecomponenten zijn eenvoudigweg JavaScript-functies die JSX retourneren. Ze zijn veel gemakkelijker te lezen en hebben geen extra functies zoals de this trefwoord en levenscyclusmethoden waardoor ze beter presteren dan klassecomponenten.

Functiecomponenten hebben ook het voordeel van het gebruik van haken. Reageer Hooks stelt u in staat om status- en andere React-functies te gebruiken zonder een klassecomponent te schrijven, waardoor uw code beter leesbaar, onderhoudbaar en herbruikbaar wordt.

Importeren Reageer onnodig

TL;DR: Je hoeft het niet te doen, tenzij je hooks nodig hebt.

Sinds React 17 in 2020 is uitgebracht, is het nu niet nodig om React bovenaan uw bestand te importeren wanneer u een component maakt.

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

Maar dat moesten we doen vóór React 17 omdat de JSX-transformator (het ding dat JSX omzet in regulier JavaScript) een methode gebruikte met de naam React.createElement dat zou alleen werken bij het importeren van React. Sindsdien is er een nieuwe transformator uitgebracht die JSX kan transformeren zonder de createElement methode.

Je moet React nog steeds importeren om hooks te gebruiken, fragmenten, en alle andere functies of componenten die u nodig heeft uit de bibliotheek:

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

Dat waren mijn vroege fouten!

Misschien is 'fout' een te hard woord, aangezien sommige van de betere praktijken pas later tot stand kwamen. Toch zie ik genoeg gevallen waarin de 'oude' manier om iets te doen nog steeds actief wordt gebruikt in projecten en andere tutorials.

Om eerlijk te zijn, heb ik waarschijnlijk veel meer dan vijf fouten gemaakt toen ik begon. Telkens wanneer u naar een nieuwe tool grijpt, zal het meer een leertraject zijn om het effectief te gebruiken, in plaats van een schakelaar om te zetten. Maar dit zijn de dingen die ik jaren later nog steeds bij me draag!

Als je React al een tijdje gebruikt, wat zijn enkele dingen die je zou willen weten voordat je begon? Het zou geweldig zijn om een ​​collectie op gang te brengen om anderen te helpen dezelfde strijd te vermijden.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/5-mistakes-starting-react/