5 virhettä, joita tein aloittaessani ensimmäisen React-projektini

Tiedät millaista on valita uusi kieli tai kehys. Joskus on olemassa hyviä dokumentteja, jotka auttavat sinua löytämään tiesi sen läpi. Mutta paraskaan dokumentaatio ei kata kaikkea. Ja kun työskentelet uuden asian parissa, löydät varmasti ongelman, johon ei ole kirjallista ratkaisua.

Näin minulle kävi ensimmäistä kertaa, kun loin React-projektin – ja React on yksi niistä viitekehyksestä, jolla on merkittävää dokumentaatiota, etenkin nyt beta-dokumenttien kanssa. Mutta kamppailin silti tieltäni. Siitä projektista on jo aikaa, mutta siitä saamani opetukset ovat edelleen tuoreessa mielessäni. Ja vaikka siellä on paljon React-ohjeita, ajattelin jakaa sen, mitä toivoin tietäväni, kun käytin sitä ensimmäisen kerran.

Tämä artikkeli siis on - luettelo varhaisista virheistä, joita tein. Toivon, että ne auttavat tekemään oppimisesta reagointia sujuvammin.

Luo-react-sovelluksen käyttö projektin käynnistämiseen

TL;DR Käytä Vite tai Parcel.

Luo React-sovellus (CRA) on työkalu, joka auttaa sinua luomaan uuden React-projektin. Se luo kehitysympäristön, jossa on parhaat konfigurointivaihtoehdot useimmille React-projekteille. Tämä tarkoittaa, että sinun ei tarvitse käyttää aikaa minkään konfigurointiin itse.

Aloittelijana tämä tuntui hyvältä tavalta aloittaa työni! Ei konfiguraatiota! Aloita vain koodaus!

CRA käyttää kahta suosittua pakettia saavuttaakseen tämän, webpack ja Babel. webpack on web-niputtaja, joka optimoi kaikki projektisi resurssit, kuten JavaScriptin, CSS:n ja kuvat. Babel on työkalu, jonka avulla voit käyttää uudempia JavaScript-ominaisuuksia, vaikka jotkin selaimet eivät tue niitä.

Molemmat ovat hyviä, mutta on olemassa uudempia työkaluja, jotka voivat tehdä työn paremmin, erityisesti ruuvi ja Nopea Web-kääntäjä (SWC).

Nämä uudet ja parannetut vaihtoehdot ovat nopeampia ja helpompia määrittää kuin webpack ja Babel. Tämä helpottaa asetusten säätämistä, mitä on vaikea tehdä luo-reagoida-sovelluksessa ilman poistamista.

Jotta voit käyttää niitä molempia perustaessasi uutta React-projektia, sinun on varmistettava, että sinulla on Solmu versio 12 tai uudempi asennettuna ja suorita sitten seuraava komento.

npm create vite

Sinua pyydetään valitsemaan nimi projektillesi. Kun olet tehnyt sen, valitse React kehysluettelosta. Tämän jälkeen voit valita jommankumman Javascript + SWC or Typescript + SWC

Sitten sinun on vaihdettava hakemistoa cd projektiisi ja suorita seuraava komento;

npm i && npm run dev

Tämän pitäisi suorittaa sivustollesi kehityspalvelin URL-osoitteella localhost:5173

Ja se on niin yksinkertaista.

Käyttäminen defaultProps oletusarvoille

TL;DR Käytä sen sijaan oletustoimintoparametreja.

Tiedot voidaan välittää React-komponenteille ns props. Nämä lisätään komponenttiin aivan kuten attribuutit HTML-elementissä ja niitä voidaan käyttää komponentin määrittelyssä ottamalla asiaankuuluvat arvot argumenttina syötetystä prop-objektista.

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

Jos a:lle vaaditaan koskaan oletusarvoa prop, The defaultProp omaisuutta voidaan käyttää:

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

Nykyaikaisella JavaScriptillä on mahdollista tuhota props objekti ja määritä sille oletusarvo funktion argumentissa.

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

Tämä on edullisempi kuin koodi, jonka nykyaikaiset selaimet voivat lukea ilman ylimääräisiä muunnoksia.

Valitettavasti, defaultProps vaativat jonkin muunnoksen, jotta selain voi lukea ne, koska JSX:ää (JavaScript XML) ei tueta heti. Tämä saattaa vaikuttaa paljon käyttävän sovelluksen suorituskykyyn defaultProps.

Älä käytä propTypes

TL;DR Käytä TypeScriptiä.

Reactissa propTypes ominaisuuden avulla voidaan tarkistaa, välitetäänkö komponentille oikeaa tietotyyppiä sen rekvisiittalle. Niiden avulla voit määrittää, minkä tyyppistä dataa tulee käyttää kullekin rekvisiitille, kuten merkkijono, numero, objekti jne. Niiden avulla voit myös määrittää, tarvitaanko rekvisiittaa vai ei.

Tällä tavalla, jos komponentille välitetään väärä tietotyyppi tai jos vaadittua rekvisiittaa ei anneta, React antaa virheilmoituksen.

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

konekirjoitusteksti tarjoaa tyyppiturvallisuuden tason komponenteille välitettäville tiedoille. Niin varma, propTypes olivat hyvä idea, kun aloitin. Mutta nyt, kun TypeScriptistä on tullut tyyppiturvallisuuden paras ratkaisu, suosittelen sen käyttöä kaiken muun sijaan.

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

TypeScript on ohjelmointikieli, joka rakentuu JavaScriptin päälle lisäämällä staattista tyyppitarkistusta. TypeScript tarjoaa tehokkaamman tyyppijärjestelmän, joka havaitsee enemmän mahdollisia virheitä ja parantaa kehityskokemusta.

Luokkakomponenttien käyttö

TL;DR: Kirjoita komponentit funktioiksi

Reactin luokkakomponentit luodaan JavaScript-luokilla. Niillä on enemmän oliorakennetta ja lisäksi muutamia lisäominaisuuksia, kuten kyky käyttää this avainsana- ja elinkaarimenetelmät.

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

Pidän enemmän luokkien komponenttien kirjoittamisesta kuin funktioista, mutta JavaScript-luokat ovat aloittelijoille vaikeampia ymmärtää ja this voi tulla hyvin hämmentävää. Sen sijaan suosittelen komponenttien kirjoittamista funktioina:

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

Funktiokomponentit ovat yksinkertaisesti JavaScript-funktioita, jotka palauttavat JSX:n. Niitä on paljon helpompi lukea, eikä niissä ole lisäominaisuuksia, kuten this avainsana ja elinkaarimenetelmät mikä tekee niistä tehokkaampia kuin luokkakomponentit.

Toiminnallisten komponenttien etuna on myös koukkujen käyttö. Reagoi koukut antaa sinun käyttää tila- ja muita React-ominaisuuksia kirjoittamatta luokkakomponenttia, mikä tekee koodistasi luettavamman, ylläpidettävämmän ja uudelleenkäytettävän.

Reactin tuonti tarpeettomasti

TL;DR: Sinun ei tarvitse tehdä sitä, ellet tarvitse koukkuja.

Koska React 17 julkaistiin vuonna 2020, Reactia ei nyt tarvitse tuoda tiedostosi yläreunassa aina, kun luot komponentin.

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

Mutta meidän piti tehdä se ennen React 17:ää, koska JSX-muuntaja (joka muuntaa JSX:n tavalliseksi JavaScriptiksi) käytti menetelmää nimeltä React.createElement joka toimisi vain Reactin tuonnissa. Siitä lähtien on julkaistu uusi muuntaja, joka voi muuttaa JSX:n ilman createElement menetelmällä.

Sinun on silti tuotava React käyttääksesi koukkuja, fragmentitja muut toiminnot tai komponentit, joita saatat tarvita kirjastosta:

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

Ne olivat varhaiset virheeni!

Ehkä "virhe" on liian ankara sana, koska jotkut paremmista käytännöistä syntyivät myöhemmin. Silti näen paljon tapauksia, joissa "vanhaa" tapaa tehdä jotain käytetään edelleen aktiivisesti projekteissa ja muissa tutoriaaleissa.

Ollakseni rehellinen, tein luultavasti yli viisi virhettä aloittaessani. Aina kun tavoitat uuden työkalun, se on enemmän kuin oppimismatka sen tehokkaaseen käyttöön sen sijaan, että käännät kytkimen. Mutta nämä ovat asioita, joita kannan mukanani vielä vuosia myöhemmin!

Jos olet käyttänyt Reactia jonkin aikaa, mitä asioita haluaisit tietää ennen aloittamista? Olisi hienoa saada kokoelma, joka auttaa muita välttämään samat kamppailut.

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/5-mistakes-starting-react/