5 greșeli pe care le-am făcut când am început primul meu proiect React

Știi cum este să alegi un nou limbaj sau un cadru nou. Uneori există documente grozave care vă ajută să vă găsiți drumul. Dar nici cea mai bună documentație nu acoperă absolut totul. Și când lucrezi cu ceva nou, ești obligat să găsești o problemă care nu are o soluție scrisă.

Așa a fost pentru mine prima dată când am creat un proiect React - și React este unul dintre acele cadre cu o documentație remarcabilă, mai ales acum cu documentele beta. Dar tot mi-am chinuit drumul. A trecut destul de mult de la acel proiect, dar lecțiile pe care le-am câștigat din el sunt încă proaspete în minte. Și chiar dacă există o mulțime de tutoriale „cum să” React, m-am gândit să vă împărtășesc ceea ce mi-aș dori să știu când l-am folosit prima dată.

Deci, asta este acest articol - o listă a greșelilor timpurii pe care le-am făcut. Sper că vor ajuta la învățarea React mult mai ușoară pentru tine.

Utilizarea create-react-app pentru a începe un proiect

TL;DR Utilizați Vite sau Parcel.

Creați aplicația React (CRA) este un instrument care vă ajută să configurați un nou proiect React. Acesta creează un mediu de dezvoltare cu cele mai bune opțiuni de configurare pentru majoritatea proiectelor React. Acest lucru înseamnă că nu trebuie să petreceți timp configurand nimic singur.

Ca începător, mi s-a părut o modalitate grozavă de a-mi începe munca! Fără configurație! Doar începeți să codați!

CRA folosește două pachete populare pentru a realiza acest lucru, webpack și Babel. webpack este un web bundler care optimizează toate activele din proiectul dvs., cum ar fi JavaScript, CSS și imagini. Babel este un instrument care vă permite să utilizați funcții JavaScript mai noi, chiar dacă unele browsere nu le acceptă.

Ambele sunt bune, dar există instrumente mai noi care pot face treaba mai bine, în special Vieți și Speedy Web Compiler (SWC).

Aceste alternative noi și îmbunătățite sunt mai rapide și mai ușor de configurat decât webpack și Babel. Acest lucru facilitează ajustarea configurației, ceea ce este dificil de realizat în create-react-app fără a fi scos.

Pentru a le folosi pe amândouă atunci când configurați un nou proiect React, trebuie să vă asigurați că le aveți Nod versiunea 12 sau mai mare instalată, apoi executați următoarea comandă.

npm create vite

Vi se va cere să alegeți un nume pentru proiectul dvs. Odată ce faci asta, selectează React din lista de cadre. După aceea, puteți selecta oricare Javascript + SWC or Typescript + SWC

Apoi va trebui să schimbați directorul cd în proiectul dvs. și executați următoarea comandă;

npm i && npm run dev

Acesta ar trebui să ruleze un server de dezvoltare pentru site-ul dvs. cu adresa URL localhost:5173

Și este la fel de simplu.

Utilizarea defaultProps pentru valorile implicite

TL;DR Utilizați în schimb parametrii de funcție impliciti.

Datele pot fi transmise componentelor React prin ceva numit props. Acestea sunt adăugate la o componentă la fel ca atributele dintr-un element HTML și pot fi utilizate în definiția unei componente, luând valorile relevante din obiectul prop transmis ca 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;

Dacă o valoare implicită este vreodată necesară pentru a prop, defaultProp proprietatea poate fi folosita:

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

Cu JavaScript modern, este posibil să se destructureze props obiect și atribuiți o valoare implicită tuturor în argumentul funcției.

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

Acest lucru este mai favorabil ca codul care poate fi citit de browserele moderne fără a fi nevoie de o transformare suplimentară.

Din pacate, defaultProps necesită o anumită transformare pentru a fi citită de browser, deoarece JSX (JavaScript XML) nu este acceptat din fabricație. Acest lucru ar putea afecta performanța unei aplicații care utilizează multe defaultProps.

Nu folosiți propTypes

TL;DR Utilizați TypeScript.

În React, propTypes proprietatea poate fi folosită pentru a verifica dacă unei componente i se transmite tipul de date corect pentru elementele sale de recuzită. Ele vă permit să specificați tipul de date care ar trebui să fie utilizate pentru fiecare prop, cum ar fi un șir, număr, obiect etc. Vă permit, de asemenea, să specificați dacă o recuzită este necesară sau nu.

În acest fel, dacă o componentă primește tipul de date greșit sau dacă nu este furnizată un suport necesar, atunci React va genera o eroare.

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

manuscris dactilografiat oferă un nivel de siguranță de tip în datele care sunt transmise componentelor. Atât de sigur, propTypes au fost o idee bună când începeam. Cu toate acestea, acum că TypeScript a devenit soluția de bază pentru siguranța tipului, aș recomanda cu căldură să-l folosiți peste orice altceva.

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

TypeScript este un limbaj de programare care se bazează pe JavaScript prin adăugarea de verificare statică a tipului. TypeScript oferă un sistem de tipări mai puternic, care poate prinde mai multe erori potențiale și îmbunătățește experiența de dezvoltare.

Utilizarea componentelor clasei

TL;DR: Scrieți componente ca funcții

Componentele clasei din React sunt create folosind clase JavaScript. Au o structură mai orientată pe obiecte și, precum și câteva caracteristici suplimentare, cum ar fi capacitatea de a utiliza this cuvinte cheie și metode de ciclu de viață.

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

Prefer să scriu componente cu clase decât funcții, dar clasele JavaScript sunt mai greu de înțeles pentru începători și this poate deveni foarte confuz. În schimb, aș recomanda să scrieți componente ca funcții:

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

Componentele funcției sunt pur și simplu funcții JavaScript care returnează JSX. Sunt mult mai ușor de citit și nu au caracteristici suplimentare precum this cuvânt cheie și metode ciclului de viață ceea ce le face mai performante decât componentele clasei.

Componentele funcționale au și avantajul de a folosi cârlige. Reaction Hooks vă permit să utilizați stare și alte caracteristici React fără a scrie o componentă de clasă, făcând codul mai lizibil, mai ușor de întreținut și mai reutilizabil.

Importul React în mod inutil

TL;DR: Nu este nevoie să o faci, decât dacă ai nevoie de cârlige.

Deoarece React 17 a fost lansat în 2020, acum nu este necesar să importați React în partea de sus a fișierului de fiecare dată când creați o componentă.

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

Dar a trebuit să facem asta înainte de React 17, deoarece transformatorul JSX (lucru care convertește JSX în JavaScript obișnuit) a folosit o metodă numită React.createElement care ar funcționa numai la importul React. De atunci, a fost lansat un nou transformator care poate transforma JSX fără createElement metodă.

În continuare va trebui să importați React pentru a utiliza cârlige, fragmenteși orice alte funcții sau componente de care ați putea avea nevoie din bibliotecă:

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

Acestea au fost greșelile mele de început!

Poate că „greșeală” este un cuvânt prea dur, deoarece unele dintre cele mai bune practici au apărut mai târziu. Totuși, văd o mulțime de cazuri în care „vechiul” mod de a face ceva este încă folosit în mod activ în proiecte și alte tutoriale.

Sincer să fiu, probabil că am făcut mai mult de cinci greșeli când am început. Ori de câte ori ajungeți la un instrument nou, acesta va fi mai mult ca o călătorie de învățare pentru a-l folosi în mod eficient, mai degrabă decât a apăsa un comutator. Dar acestea sunt lucrurile pe care încă le port cu mine ani mai târziu!

Dacă folosești React de ceva vreme, care sunt unele dintre lucrurile pe care ai vrea să le știi înainte de a începe? Ar fi grozav să obțineți o colecție pentru a-i ajuta pe alții să evite aceleași lupte.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/5-mistakes-starting-react/