5 hiba, amit elkövettem az első React projektem elindításakor

5 hiba, amit elkövettem az első React projektem elindításakor

Időbélyeg: 10. március 2023. 11:41
Forrás csomópont: 2003048

Tudja, milyen új nyelvet vagy keretrendszert felvenni. Néha nagyszerű dokumentációk állnak rendelkezésre, amelyek segítenek eligazodni rajta. De még a legjobb dokumentáció sem fed le mindent. És amikor valami újdonsággal dolgozik, akkor biztosan talál olyan problémát, amelyre nincs írott megoldás.

Ez volt számomra az első alkalom, amikor létrehoztam egy React projektet – és a React egyike azoknak a keretrendszereknek, amelyek figyelemre méltó dokumentációval rendelkeznek, különösen most a béta dokumentumokkal. De még mindig küzdöttem magam. Elég sok idő telt el a projekt óta, de a leckék még mindig frissen vannak bennem. És annak ellenére, hogy sok React „hogyan kell” oktatóanyag létezik, úgy gondoltam, megosztom veled azt, amit bárcsak tudtam volna, amikor először használtam.

Tehát ez a cikk – az általam elkövetett korai hibák listája. Remélem, segítenek abban, hogy a React tanulás sokkal gördülékenyebb legyen az Ön számára.

A create-react-app használata projekt indításához

TL;DR Vite vagy Parcel használata.

Hozzon létre React alkalmazást (CRA) egy olyan eszköz, amely segít új React projekt létrehozásában. A legtöbb React projekthez a legjobb konfigurációs lehetőségekkel rendelkező fejlesztői környezetet hoz létre. Ez azt jelenti, hogy nem kell semmit sem saját maga konfigurálnia.

Kezdőként ez nagyszerű módja annak, hogy elkezdjem a munkámat! Nincs konfiguráció! Csak kezdje el a kódolást!

A CRA két népszerű csomagot használ ennek eléréséhez, a webpack-et és a Babelt. A webpack egy webcsomagoló, amely optimalizálja a projektben lévő összes eszközt, például a JavaScriptet, a CSS-t és a képeket. A Babel egy olyan eszköz, amely lehetővé teszi újabb JavaScript-funkciók használatát, még akkor is, ha egyes böngészők nem támogatják őket.

Mindkettő jó, de vannak újabb eszközök, amelyek kifejezetten jobban teljesítik a munkát életek és a Speedy Web Compiler (SWC).

Ezek az új és továbbfejlesztett alternatívák gyorsabbak és könnyebben konfigurálhatók, mint a webpack és a Babel. Ez megkönnyíti a konfiguráció módosítását, amit a Create-React-alkalmazásban nehéz elvégezni a kiadás nélkül.

Ha mindkettőt használni szeretné egy új React projekt létrehozásakor, meg kell győződnie arról, hogy rendelkezik Csomópont 12-es vagy újabb verzió van telepítve, majd futtassa a következő parancsot.

npm create vite

A rendszer felkéri, hogy válasszon nevet a projektjének. Ha ezt megtette, válassza a React lehetőséget a keretrendszerek listájából. Ezt követően bármelyiket választhatja Javascript + SWC or Typescript + SWC

Ezután könyvtárat kell váltania cd a projektbe, és futtassa a következő parancsot;

npm i && npm run dev

Ennek egy fejlesztői szervert kell futtatnia a webhelyéhez az URL-lel localhost:5173

És ez ilyen egyszerű.

<p></p> defaultProps alapértelmezett értékekhez

TL;DR Használja helyette az alapértelmezett függvényparamétereket.

Az adatok átadhatók a React komponenseknek egy ún props. Ezeket ugyanúgy hozzá kell adni egy összetevőhöz, mint egy HTML elem attribútumait, és felhasználhatók a komponens definíciójában, ha a releváns értékeket az argumentumként átadott prop objektumból veszik.

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

Ha valaha is szükség van egy alapértelmezett értékre a prop, a defaultProp ingatlan használható:

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

A modern JavaScript segítségével lehetőség van a props objektumot, és rendeljen hozzá egy alapértelmezett értéket a függvény argumentumában.

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

Ez kedvezőbb, mint az a kód, amelyet a modern böngészők extra átalakítás nélkül is be tudnak olvasni.

Sajnálatos módon, defaultProps némi átalakítást igényel, hogy a böngésző elolvassa, mivel a JSX (JavaScript XML) már nem támogatott. Ez potenciálisan befolyásolhatja egy olyan alkalmazás teljesítményét, amely sokat használ defaultProps.

Ne használja propTypes

TL;DR TypeScript használata.

A Reactban a propTypes tulajdonság segítségével ellenőrizhető, hogy egy komponens a megfelelő adattípust kapja-e át a kellékeihez. Lehetővé teszik az egyes kellékekhez használandó adatok típusának megadását, például karakterláncot, számot, objektumot stb. Lehetővé teszik továbbá annak meghatározását, hogy szükséges-e egy kellék vagy sem.

Ily módon, ha egy komponens rossz adattípust ad át, vagy ha a szükséges támaszték nincs megadva, akkor a React hibát fog kiütni.

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

Gépelt típusbiztonsági szintet nyújt az összetevőknek továbbított adatokban. Szóval persze, propTypes jó ötlet volt, amikor elkezdtem. Most azonban, hogy a TypeScript vált a típusbiztonság fő megoldásává, erősen ajánlom ennek használatát bármi mással szemben.

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

A TypeScript egy olyan programozási nyelv, amely statikus típusellenőrzés hozzáadásával a JavaScriptre épül. A TypeScript egy erősebb típusrendszert biztosít, amely több potenciális hibát képes elkapni, és javítja a fejlesztési élményt.

Osztálykomponensek használata

TL;DR: Az összetevőket függvényként írja be

A React osztályösszetevői JavaScript osztályok használatával jönnek létre. Objektumorientáltabb szerkezettel és néhány további funkcióval rendelkeznek, mint például a this kulcsszó és életciklus módszerek.

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

Inkább osztályokkal rendelkező komponenseket írok, mint függvényeket, de a JavaScript osztályokat a kezdők nehezebben értik és this nagyon zavaros lehet. Ehelyett azt javaslom, hogy az összetevőket függvényként írja be:

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

A függvénykomponensek egyszerűen JavaScript függvények, amelyek JSX-et adnak vissza. Sokkal könnyebben olvashatóak, és nem rendelkeznek olyan további funkciókkal, mint a this kulcsszó és életciklus módszerei amelyek teljesítményesebbé teszik őket az osztályösszetevőknél.

A funkcióelemek előnye a horgok használata is. Reagál Hookok lehetővé teszi az állapot- és egyéb React-funkciók használatát osztálykomponens írása nélkül, így a kód olvashatóbbá, karbantarthatóbbá és újrafelhasználhatóbbá válik.

A React szükségtelen importálása

TL;DR: Nincs szükség rá, hacsak nincs szükség horgokra.

Mivel a React 17 2020-ban megjelent, most már nem szükséges importálni a React elemet a fájl tetején, amikor komponenst hoz létre.

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

De ezt meg kellett tennünk a React 17 előtt, mert a JSX transzformátor (az a dolog, amely a JSX-et normál JavaScript-be alakítja) az ún. React.createElement ez csak a React importálásakor működne. Azóta megjelent egy új transzformátor, amely képes átalakítani a JSX-et a nélkül createElement módszer.

A horgok használatához továbbra is importálnia kell a Reactet, töredékek, és minden egyéb funkció vagy összetevő, amelyre szüksége lehet a könyvtárból:

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

Ezek voltak az én korai hibáim!

Talán a „tévedés” túl durva szó, mivel néhány jobb gyakorlat később született. Ennek ellenére rengeteg olyan esetet látok, amikor valaminek a „régi” módját még mindig aktívan használják projektekben és egyéb oktatóanyagokban.

Hogy őszinte legyek, valószínűleg több mint öt hibát követtem el, amikor elkezdtem. Bármikor, amikor egy új eszközhöz nyúl, az inkább egy tanulási útra hasonlít a hatékony használat érdekében, nem pedig a kapcsolók átfordítására. De ezeket még évek múltán is magammal hordom!

Ha már egy ideje használja a Reactot, mik azok a dolgok, amelyeket szeretnétek tudni, mielőtt elkezdték? Nagyszerű lenne egy gyűjtemény, amely segít másoknak elkerülni ugyanazt a küzdelmet.

Időbélyeg:

Még több CSS trükkök