5 errori che ho commesso all'avvio del mio primo progetto React

Sai com'è prendere una nuova lingua o framework. A volte c'è un'ottima documentazione per aiutarti a orientarti. Ma anche la migliore documentazione non copre assolutamente tutto. E quando lavori con qualcosa di nuovo, sei destinato a trovare un problema che non ha una soluzione scritta.

È così che è stato per me la prima volta che ho creato un progetto React e React è uno di quei framework con una documentazione notevole, specialmente ora con i documenti beta. Ma ho ancora lottato per farmi strada. È passato un bel po' di tempo da quel progetto, ma le lezioni che ne ho tratto sono ancora fresche nella mia mente. E anche se ci sono molti tutorial "how-to" su React là fuori, ho pensato di condividere ciò che avrei voluto sapere quando l'ho usato per la prima volta.

Quindi, ecco cos'è questo articolo: un elenco dei primi errori che ho commesso. Spero che aiutino a rendere l'apprendimento di React molto più agevole per te.

Utilizzo di create-react-app per avviare un progetto

TL; DR Usa Vite o Parcel.

Crea l'app React (CRA) è uno strumento che ti aiuta a creare un nuovo progetto React. Crea un ambiente di sviluppo con le migliori opzioni di configurazione per la maggior parte dei progetti React. Ciò significa che non devi perdere tempo a configurare nulla da solo.

Come principiante, questo mi è sembrato un ottimo modo per iniziare il mio lavoro! Nessuna configurazione! Basta iniziare a programmare!

CRA utilizza due pacchetti popolari per raggiungere questo obiettivo, webpack e Babel. webpack è un web bundler che ottimizza tutte le risorse del tuo progetto, come JavaScript, CSS e immagini. Babel è uno strumento che ti consente di utilizzare le funzionalità JavaScript più recenti, anche se alcuni browser non le supportano.

Entrambi sono buoni, ma ci sono strumenti più recenti che possono fare meglio il lavoro, in particolare rapidamente ed Compilatore Web veloce (SWC).

Queste alternative nuove e migliorate sono più veloci e più facili da configurare rispetto a webpack e Babel. Ciò semplifica la regolazione della configurazione che è difficile da eseguire in create-react-app senza espulsione.

Per usarli entrambi quando imposti un nuovo progetto React devi assicurarti di averli Nodo versione 12 o successiva installata, quindi eseguire il seguente comando.

npm create vite

Ti verrà chiesto di scegliere un nome per il tuo progetto. Dopo averlo fatto, seleziona React dall'elenco dei framework. Successivamente, puoi selezionare uno dei due Javascript + SWC or Typescript + SWC

Quindi dovrai cambiare directory cd nel tuo progetto ed esegui il seguente comando;

npm i && npm run dev

Questo dovrebbe eseguire un server di sviluppo per il tuo sito con l'URL localhost:5173

Ed è così semplice.

utilizzando defaultProps per i valori predefiniti

TL;DR Utilizzare invece i parametri di funzione predefiniti.

I dati possono essere passati ai componenti React attraverso qualcosa chiamato props. Questi vengono aggiunti a un componente proprio come gli attributi in un elemento HTML e possono essere utilizzati nella definizione di un componente prendendo i valori rilevanti dall'oggetto prop passato come argomento.

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

Se un valore predefinito è mai richiesto per a prop, le defaultProp la proprietà può essere utilizzata:

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

Con il moderno JavaScript, è possibile destrutturare il file props oggetto e assegnare un valore predefinito a tutto nell'argomento della funzione.

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

Questo è più favorevole in quanto il codice può essere letto dai browser moderni senza la necessità di ulteriori trasformazioni.

Purtroppo, defaultProps richiedono alcune trasformazioni per essere lette dal browser poiché JSX (JavaScript XML) non è supportato immediatamente. Ciò potrebbe potenzialmente influire sulle prestazioni di un'applicazione che utilizza molto defaultProps.

Non usare propTypes

TL; DR Usa TypeScript.

In Reagire, il propTypes La proprietà può essere utilizzata per verificare se a un componente viene passato il tipo di dati corretto per i suoi oggetti di scena. Ti permettono di specificare il tipo di dati che dovrebbero essere usati per ogni prop come una stringa, un numero, un oggetto, ecc. Ti permettono anche di specificare se un prop è richiesto o meno.

In questo modo, se a un componente viene passato il tipo di dati errato o se non viene fornita una prop richiesta, React genererà un errore.

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

Dattiloscritto fornisce un livello di indipendenza dai tipi nei dati che vengono passati ai componenti. Così sicuro, propTypes erano una buona idea quando stavo iniziando. Tuttavia, ora che TypeScript è diventato la soluzione ideale per l'indipendenza dai tipi, consiglio vivamente di usarlo su qualsiasi altra cosa.

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

TypeScript è un linguaggio di programmazione che si basa su JavaScript aggiungendo il controllo del tipo statico. TypeScript fornisce un sistema di tipi più potente, in grado di rilevare più potenziali bug e migliorare l'esperienza di sviluppo.

Utilizzo di componenti di classe

TL; DR: scrive i componenti come funzioni

I componenti di classe in React vengono creati utilizzando le classi JavaScript. Hanno una struttura più orientata agli oggetti e alcune funzionalità aggiuntive, come la possibilità di utilizzare il this parole chiave e metodi del ciclo di vita.

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

Preferisco scrivere componenti con classi rispetto alle funzioni, ma le classi JavaScript sono più difficili da capire per i principianti e this può diventare molto confuso. Invece, consiglierei di scrivere componenti come funzioni:

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

I componenti funzione sono semplicemente funzioni JavaScript che restituiscono JSX. Sono molto più facili da leggere e non hanno funzionalità aggiuntive come il this parola chiave e metodi del ciclo di vita che li rendono più performanti dei componenti di classe.

I componenti funzione hanno anche il vantaggio di utilizzare gli hook. Ganci di reazione ti consentono di utilizzare lo stato e altre funzionalità di React senza scrivere un componente di classe, rendendo il tuo codice più leggibile, gestibile e riutilizzabile.

Importare React inutilmente

TL; DR: Non c'è bisogno di farlo, a meno che tu non abbia bisogno di ganci.

Poiché React 17 è stato rilasciato nel 2020, ora non è necessario importare React nella parte superiore del file ogni volta che crei un componente.

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

Ma dovevamo farlo prima di React 17 perché il trasformatore JSX (la cosa che converte JSX in JavaScript normale) usava un metodo chiamato React.createElement funzionerebbe solo durante l'importazione di React. Da allora, è stato rilasciato un nuovo trasformatore che può trasformare JSX senza il createElement metodo.

Dovrai comunque importare React per utilizzare gli hook, frammentie qualsiasi altra funzione o componente di cui potresti aver bisogno dalla libreria:

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

Questi sono stati i miei primi errori!

Forse "errore" è una parola troppo dura poiché alcune delle migliori pratiche sono arrivate in seguito. Tuttavia, vedo molti casi in cui il "vecchio" modo di fare qualcosa viene ancora utilizzato attivamente in progetti e altri tutorial.

Ad essere onesti, probabilmente ho commesso più di cinque errori quando ho iniziato. Ogni volta che raggiungi un nuovo strumento sarà più come un viaggio di apprendimento per usarlo in modo efficace, piuttosto che premere un interruttore. Ma queste sono le cose che porto ancora con me anni dopo!

Se usi React da un po', quali sono alcune delle cose che vorresti sapere prima di iniziare? Sarebbe fantastico organizzare una raccolta per aiutare gli altri a evitare le stesse lotte.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/5-mistakes-starting-react/