5 viga, mida tegin oma esimest reageerimisprojekti alustades

Teate, mis tunne on valida uus keel või raamistik. Mõnikord on olemas suurepärane dokumentatsioon, mis aitab teil selle kaudu orienteeruda. Kuid isegi parim dokumentatsioon ei hõlma absoluutselt kõike. Ja kui töötate millegi uuega, leiate kindlasti probleemi, millele pole kirjalikku lahendust.

Nii oli minu jaoks esimene kord, kui ma Reacti projekti lõin – ja React on üks neist raamistikest, millel on tähelepanuväärne dokumentatsioon, eriti nüüd beetadokumentidega. Aga ma nägin ikkagi vaeva. Sellest projektist on üsna palju aega möödas, kuid sellest saadud õppetunnid on mul endiselt värskelt meeles. Ja kuigi seal on palju Reacti “kuidas teha” õpetusi, mõtlesin, et jagan seda, mida soovisin teada, kui seda esimest korda kasutasin.

Niisiis, see on see, mida see artikkel on - nimekiri varajastest vigadest, mida ma tegin. Loodan, et need aitavad muuta õppimise reageerimise teie jaoks palju sujuvamaks.

Rakenduse loomise ja reageerimise kasutamine projekti käivitamiseks

TL;DR Kasutage Vite või Pack.

Looge rakendus Reageeri (CRA) on tööriist, mis aitab teil luua uue Reacti projekti. See loob enamiku Reacti projektide jaoks parimate konfiguratsioonivalikutega arenduskeskkonna. See tähendab, et te ei pea kulutama aega millegi ise seadistamisele.

Algajana tundus see suurepärane võimalus oma tööd alustada! Konfiguratsiooni pole! Lihtsalt alustage kodeerimist!

CRA kasutab selle saavutamiseks kahte populaarset paketti, veebipaketti ja Babelit. webpack on veebikomplekt, mis optimeerib kõiki teie projekti varasid, nagu JavaScript, CSS ja pildid. Babel on tööriist, mis võimaldab teil kasutada uuemaid JavaScripti funktsioone, isegi kui mõned brauserid neid ei toeta.

Mõlemad on head, kuid on ka uuemaid tööriistu, mis saavad seda tööd paremini teha Elab ja Kiire veebikompilaator (SWC).

Need uued ja täiustatud alternatiivid on kiiremad ja hõlpsamini konfigureeritavad kui veebipakett ja Babel. See muudab konfiguratsiooni kohandamise lihtsamaks, mida on rakenduses Loo-reageeri raske teha ilma väljutamata.

Nende mõlema kasutamiseks uue Reacti projekti seadistamisel peate veenduma, et see on olemas sõlme installitud versioon 12 või uuem, seejärel käivitage järgmine käsk.

npm create vite

Teil palutakse valida oma projektile nimi. Kui olete seda teinud, valige raamistike loendist React. Pärast seda saate valida ühe Javascript + SWC or Typescript + SWC

Siis peate kataloogi muutma cd oma projekti ja käivitage järgmine käsk;

npm i && npm run dev

See peaks käivitama teie saidi arendusserveri URL-iga localhost:5173

Ja see on nii lihtne.

Kasutamine defaultProps vaikeväärtuste jaoks

TL;DR Kasutage selle asemel funktsiooni vaikeparameetreid.

Andmeid saab edastada Reacti komponentidele läbi nn props. Need lisatakse komponendile täpselt nagu HTML-elemendi atribuudid ja neid saab kasutada komponendi definitsioonis, võttes argumendina sisestatud prop-objektilt asjakohased väärtused.

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

Kui a jaoks on kunagi vaja vaikeväärtust prop, defaultProp kinnisvara saab kasutada:

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

Kaasaegse JavaScriptiga on võimalik hävitada props objekti ja määrake sellele kõigele funktsiooni argumendis vaikeväärtus.

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

See on soodsam kui kood, mida kaasaegsed brauserid saavad lugeda ilma täiendavate muudatusteta.

Kahjuks defaultProps brauseri lugemiseks on vaja mõningaid teisendusi, kuna JSX-i (JavaScript XML) ei toetata koheselt. See võib potentsiaalselt mõjutada palju kasutava rakenduse jõudlust defaultProps.

Ärge kasutage propTypes

TL;DR Kasutage TypeScripti.

In React, propTypes atribuuti saab kasutada kontrollimaks, kas komponendile edastatakse selle rekvisiitide jaoks õige andmetüüp. Need võimaldavad teil määrata iga rekvisiidi jaoks kasutatavate andmete tüübi (nt string, number, objekt jne). Samuti võimaldavad need määrata, kas rekvisiit on vajalik või mitte.

Sel viisil, kui komponent edastatakse vale andmetüübiga või kui vajalikku rekvisiiti ei pakuta, annab React veateate.

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

TypeScript tagab komponentidele edastatavate andmete tüübiohutuse taseme. Nii et kindlasti, propTypes oli hea mõte, kui ma alustasin. Kuid nüüd, kui TypeScriptist on saanud tüübiohutuse põhilahendus, soovitaksin tungivalt seda kasutada kõige muu asemel.

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

TypeScript on programmeerimiskeel, mis tugineb JavaScriptile, lisades staatilise tüübikontrolli. TypeScript pakub võimsamat tüüpi süsteemi, mis suudab tabada rohkem võimalikke vigu ja parandab arenduskogemust.

Klassi komponentide kasutamine

TL;DR: kirjutage komponendid funktsioonidena

Reacti klassikomponendid luuakse JavaScripti klasside abil. Neil on rohkem objektorienteeritud struktuur ja lisaks mõned lisafunktsioonid, näiteks võimalus kasutada this märksõna ja elutsükli meetodid.

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

Eelistan klassidega komponentide kirjutamist funktsioonidele, kuid JavaScripti klassid on algajatele raskemini mõistetavad ja this võib väga segaseks minna. Selle asemel soovitaksin kirjutada komponendid funktsioonidena:

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

Funktsioonikomponendid on lihtsalt JavaScripti funktsioonid, mis tagastavad JSX-i. Neid on palju lihtsam lugeda ja neil pole selliseid lisafunktsioone nagu this märksõna ja elutsükli meetodid mis muudavad need klassi komponendist tõhusamaks.

Funktsionaalsete komponentide eeliseks on ka konksude kasutamine. Reageeri konksud võimaldab teil kasutada olekut ja muid Reacti funktsioone ilma klassikomponenti kirjutamata, muutes teie koodi loetavamaks, hooldatavamaks ja korduvkasutatavamaks.

Reacti tarbetu importimine

TL;DR: Seda pole vaja teha, välja arvatud juhul, kui vajate konkse.

Kuna React 17 ilmus 2020. aastal, pole nüüd komponendi loomisel vaja faili ülaosas olevat Reacti importida.

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

Kuid me pidime seda tegema enne React 17, sest JSX-i trafo (asi, mis muudab JSX-i tavaliseks JavaScriptiks) kasutas meetodit, mida nimetatakse React.createElement mis toimiks ainult Reacti importimisel. Sellest ajast alates on välja antud uus trafo, mis suudab JSX-i teisendada ilma createElement meetod.

Konksude kasutamiseks peate ikkagi importima Reacti, killudja mis tahes muud funktsioonid või komponendid, mida te teegist vajate:

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

Need olid minu esimesed vead!

Võib-olla on "viga" liiga karm sõna, kuna mõned paremad tavad ilmusid hiljem. Siiski näen palju juhtumeid, kus projektides ja muudes õpetustes kasutatakse endiselt aktiivselt "vana" viisi.

Ausalt öeldes tegin alustades ilmselt rohkem kui viis viga. Iga kord, kui jõuate mõne uue tööriista poole, on see pigem õppimisreis selle tõhusaks kasutamiseks, selle asemel, et lülitit ümber pöörata. Aga need on asjad, mida kannan endaga veel aastaid hiljemgi!

Kui olete Reacti mõnda aega kasutanud, siis millised on mõned asjad, mida soovite enne alustamist teada? Oleks tore saada kogumik, mis aitaks teistel samu võitlusi vältida.

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/5-mistakes-starting-react/