5 napak, ki sem jih naredil, ko sem začel svoj prvi projekt React

Veste, kako je izbrati nov jezik ali okvir. Včasih obstaja odlična dokumentacija, ki vam pomaga najti pot skozi to. Toda tudi najboljša dokumentacija ne zajema čisto vsega. In ko delate z nečim, kar je novo, boste zagotovo našli problem, ki nima pisne rešitve.

Tako je bilo zame, ko sem prvič ustvaril projekt React — in React je eden od teh okvirov z izjemno dokumentacijo, še posebej zdaj z beta dokumenti. Ampak še vedno sem se prebil skozi. Od tega projekta je minilo že kar nekaj časa, a lekcije, ki sem jih pri njem pridobil, so še vedno sveže v mojih mislih. In čeprav je tam zunaj veliko vadnic o Reactu, sem mislil, da bi delil tisto, kar bi želel vedeti, ko sem ga prvič uporabil.

To je torej ta članek – seznam zgodnjih napak, ki sem jih naredil. Upam, da vam bodo pomagali, da bo učenje React veliko lažje.

Uporaba create-react-app za začetek projekta

TL;DR Uporabite Vite ali Parcel.

Ustvari aplikacijo React (CRA) je orodje, ki vam pomaga vzpostaviti nov projekt React. Ustvari razvojno okolje z najboljšimi konfiguracijskimi možnostmi za večino projektov React. To pomeni, da vam ni treba porabiti časa za konfiguracijo ničesar sami.

Kot začetniku se je to zdel odličen način za začetek dela! Brez konfiguracije! Samo začnite kodirati!

CRA uporablja dva priljubljena paketa, da to doseže, webpack in Babel. webpack je spletni povezovalnik, ki optimizira vsa sredstva v vašem projektu, kot so JavaScript, CSS in slike. Babel je orodje, ki vam omogoča uporabo novejših funkcij JavaScripta, tudi če jih nekateri brskalniki ne podpirajo.

Oboje je dobro, vendar obstajajo novejša orodja, ki lahko bolje opravijo delo Živi in Hiter spletni prevajalnik (SWC).

Te nove in izboljšane alternative je hitreje in lažje konfigurirati kot webpack in Babel. Tako je lažje prilagoditi konfiguracijo, kar je težko storiti v aplikaciji create-react-app brez izvrženja.

Če želite uporabiti oba pri nastavljanju novega projekta React, se morate prepričati, da imate Node nameščena različica 12 ali novejša, nato zaženite naslednji ukaz.

npm create vite

Pozvani boste, da izberete ime za svoj projekt. Ko to storite, na seznamu ogrodij izberite React. Po tem lahko izberete katero koli Javascript + SWC or Typescript + SWC

Potem boste morali spremeniti imenik cd v svoj projekt in zaženite naslednji ukaz;

npm i && npm run dev

To bi moralo zagnati razvojni strežnik za vaše spletno mesto z URL-jem localhost:5173

In tako preprosto je.

Uporaba defaultProps za privzete vrednosti

TL;DR Namesto tega uporabite privzete parametre funkcije.

Podatke je mogoče posredovati komponentam React prek nečesa imenovanega props. Ti so dodani komponenti tako kot atributi v elementu HTML in se lahko uporabijo v definiciji komponente tako, da vzamejo ustrezne vrednosti iz prop objekta, posredovanega kot 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;

Če je kdaj potrebna privzeta vrednost za a propje defaultProp lastnost se lahko uporablja:

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

S sodobnim JavaScriptom je mogoče uničiti props objektu in mu dodelite privzeto vrednost v argumentu funkcije.

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

To je ugodneje kot koda, ki jo lahko berejo sodobni brskalniki brez potrebe po dodatni transformaciji.

žal defaultProps zahtevajo nekaj transformacije, da jih brskalnik prebere, saj JSX (JavaScript XML) ni podprt takoj po namestitvi. To bi lahko vplivalo na delovanje aplikacije, ki uporablja veliko defaultProps.

Ne uporabljajte propTypes

TL;DR Uporabite TypeScript.

V Reactu je propTypes lastnost lahko uporabite za preverjanje, ali se komponenti posreduje pravilen tip podatkov za njene rekvizite. Omogočajo vam, da določite vrsto podatkov, ki naj se uporabijo za vsak prop, kot je niz, številka, predmet itd. Prav tako vam omogočajo, da določite, ali je rek zahtevan ali ne.

Tako bo React izdal napako, če je komponenti posredovan napačen podatkovni tip ali če zahtevana podpora ni zagotovljena.

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

TypeScript zagotavlja raven varnosti tipa v podatkih, ki se posredujejo komponentam. Torej, seveda, propTypes so bile dobra ideja, ko sem začenjal. Vendar zdaj, ko je TypeScript postal najboljša rešitev za varnost tipov, bi toplo priporočal njegovo uporabo namesto česar koli drugega.

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

TypeScript je programski jezik, ki nadgrajuje JavaScript z dodajanjem statičnega preverjanja tipa. TypeScript zagotavlja zmogljivejši tipski sistem, ki lahko ujame več potencialnih hroščev in izboljša razvojno izkušnjo.

Uporaba komponent razreda

TL;DR: Zapišite komponente kot funkcije

Komponente razreda v Reactu so ustvarjene z uporabo razredov JavaScript. Imajo bolj objektno usmerjeno strukturo in nekaj dodatnih funkcij, kot je možnost uporabe this ključne besede in metode življenjskega cikla.

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

Raje pišem komponente z razredi kot funkcijami, vendar so razredi JavaScript težje razumljivi začetnikom in this lahko postane zelo zmedeno. Namesto tega priporočam pisanje komponent kot funkcij:

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

Komponente funkcij so preprosto funkcije JavaScript, ki vrnejo JSX. Veliko lažje jih je brati in nimajo dodatnih funkcij, kot je this ključno besedo in metode življenjskega cikla zaradi česar so bolj zmogljivi kot komponente razreda.

Funkcijske komponente imajo tudi prednost uporabe kavljev. Reagic Hooks omogočajo uporabo stanja in drugih funkcij React brez pisanja komponente razreda, zaradi česar je vaša koda bolj berljiva, vzdržljiva in ponovno uporabna.

Uvažanje Reacta po nepotrebnem

TL;DR: Tega ni treba storiti, razen če potrebujete kljuke.

Ker je bil React 17 izdan leta 2020, zdaj ni treba uvoziti Reacta na vrh datoteke, kadar koli ustvarite komponento.

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

Toda to smo morali narediti pred Reactom 17, ker je transformator JSX (stvar, ki pretvori JSX v običajni JavaScript) uporabil metodo, imenovano React.createElement ki bi deloval samo pri uvozu React. Od takrat je bil izdan nov pretvornik, ki lahko preoblikuje JSX brez createElement metoda.

Za uporabo kavljev boste še vedno morali uvoziti React, fragmentein vse druge funkcije ali komponente, ki jih morda potrebujete iz knjižnice:

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

To so bile moje zgodnje napake!

Morda je »napaka« pregroba beseda, saj so se nekatere boljše prakse pojavile pozneje. Kljub temu vidim veliko primerov, ko se »stari« način dela še vedno aktivno uporablja v projektih in drugih vajah.

Če sem iskren, sem verjetno naredil več kot pet napak, ko sem začel. Kadarkoli boste posegli po novem orodju, bo to bolj podobno učnemu potovanju, kako ga učinkovito uporabljati, namesto da bi preklopili stikalo. Toda to so stvari, ki jih še leta kasneje nosim s seboj!

Če že nekaj časa uporabljate React, katere stvari bi radi vedeli, preden ste začeli? Bilo bi super, če bi dobili zbirko, ki bi drugim pomagala, da se izognejo istim težavam.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://css-tricks.com/5-mistakes-starting-react/